Jquery小技巧
jquery 最佳实践：
选择器方面：id 选择器 = 标签选择器 > 类选择器 > 属性选择器、伪类选择器
DOM方面 ：使用 $parent.find('.child') 来选取后代元素。
尽量少操作DOM，将需要append的所有内容，合并起来，最后一起append。
浏览器原生的innterHTML方法比jQuery对象的html()更快
document.getElementById(“myDiv”).innerHTML = “<p>我是新添加的子元素<p>”;
能使用js的地方就不要使用jquery。例如： 使用for循环来代替 .each()，使用 this.id代替$(this).attr("id")
做好缓存，若选中的元素需要用到多次，可以将元素放到变量中。
jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');
使用链式写法：$('div').find('h3').eq(2).html('Hello');
前台脚本的写法：$(function(){
initial();//页面初始化要做的事情
HaveDone();//页面加载完成后要走的事件
});
function initial(){
do sth……//页面初始化要做的事情
}；
function initial(){
do sth……//页面加载完成后要走的事件
}；
$(function(){}); 页面DOM结构加载完之后，触发，如果脚本是在body后面引入的，可以不需要等待加载。
$(window).load(function(){}); 页面中所有的元素全都加载完之后才会触发，包括DOM,图片元素，超链接等……
//ID选择器 $('#one').css(); //类选择器 $('.mini').css(); //标签选择器 $('div').css(); //选取所有元素（通配符选择器？） $('*').css(); //分组选择器 $('span,#two').css(); 下面是层次选择器 //后代选择器（选择body内所有的div元素） $('body div').css(); //子选择器（在body内的选取 元素名是div 的子元素.） $('body > div').css(); //相邻兄弟选择器（选取紧邻着 class为one的元素的。或者说：选取所有class为one 的下一个div元素.） $('.one + div').css(); //普通兄弟选择器（选取id为two的元素后面的所有div兄弟元素.即使中间隔着其他元素，也能够被选中） $('#two ~ div').css(); 下面是伪类选择器 //选取第一个div元素. $('div:first').css(); //选取最后一个div元素. $('div:last').css(); //选取class不为one的 所有div元素. $('div:not(.one)').css(); //选取 索引值为偶数 的div元素。 $('div:even').css(); //选取 索引值为奇数 的div元素。 $('div:odd').css(); //选取 索引等于 3 的元素 $('div:eq(3)').css(); //选取 索引大于 3 的元素 $('div:gt(3)').css(); //选取 索引小于 3 的元素 $('div:lt(3)').css(); //选取 所有的标题元素.比如h1, h2, h3等等... $(':header').css(); //选取 当前正在执行动画的所有元素. $(':animated').css(); //选取 当前获取焦点的所有元素. $(':focus').css(); 下面是表单选择器 $("#form1 :text").val(); $("#form1 :password").val(); $("#form1 :radio").val(); $("#form1 :checkbox").val(); $("#form1 :submit").val(); $("#form1 :image").val(); $("#form1 :reset").val(); $("#form1 :button").val();// <input type=button /> 和 <button ></button>都可以匹配 $("#form1 :file").val(); $("#form1 :hidden").val();// <input type="hidden" />和<div style="display:none">test</div>都可以匹配. $("#form1 select").val(); $("#form1 textarea").val(); $("#form1 :input").val(); $("#form1 input").val(); 下面是内容过滤选择器 //选取含有 属性title 的div元素. $('div[title]').css() //选取含有文本"di"的div元素. $('div:contains(di)').css(); //选取不包含子元素(或者文本元素)的div空元素. $('div:empty').css(); //选取含有class为mini元素 的div元素. $("div:has('.mini')").css(); //选取含有子元素(或者文本元素)的div元素. $('div:parent').css(); //选取所有可见的元素. $('div:visible').css(); //选取所有不可见的元素 $('body :hidden').show(); 下面是属性选择器 //选取含有 属性title 的div元素. $('div[title]').css(); //选取 属性title值等于 test 的div元素. $('div[title=test]').css(); //选取 属性title值不等于 test 的div元素. $('div[title!=test]').css(); //选取 属性title值 以 en 开始 的div元素. $('div[title^="en"]').css(); //选取 属性title值 以 est 结束 的div元素. $("div[title$=est]").css(); //选取 属性title值 含有 en 的div元素. $('div[title*="en"]').css(); //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素 $('div[title|="en"]').css(); //选取 属性title用空格分隔的值中包含字符uk的元素. $('div[title~="uk"]').css(); <div title="en uk">title为en uk的div元素</div> //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素. $('div[id][title*=es]').css(); 下面是子元素过滤选择器 //选取每个父元素下的第2个子元素 $('div.one :nth-child(2)').css(); //选取每个父元素下的第一个子元素 $('div.one :first-child').css(); //选取每个父元素下的最后一个子元素 $('div.one :last-child').css(); //如果父元素下的仅仅只有一个子元素，那么选中这个子元素 $('div.one :only-child').css(); 下面是表单对象属性过滤选择器 //对表单内 可用input 赋值操作. $("#form1 input:enabled").val(); //对表单内 不可用input 赋值操作. $("#form1 input:disabled").val(); //使用:checked选择器，来操作多选框. $(":checkbox").click(); $("input:checked").click(); //使用:selected选择器，来操作下拉列表. $("select :selected").click()
降低元素与事件的耦合性（页面标签和JS事件的另一种绑定方法）
<input type="button" name="name" value="按钮" id="btn" btn-click="clkEvent" />
$(function () { $("input[btn-click]").click(function () { var strFunc = $(this).attr("btn-click");//好像用this.attr()就可以，没必要使用$ eval(strFunc + "()");//利用eval的特点来调用方法clkEvent方法 }); }) function clkEvent(){ //do sth.... } //当该按钮，不需要执行某方法的时候，只需要将html标签中的btn-click属性删掉即可。
document.getElementById(“myDiv”).innerHTML = “<p>我是新添加的子元素<p>”;
$("#getSltValue").trigger("click");
$("#getSltValues").css("opacity", "0.3");
$("#getLocation").click(function () {
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function () {
alert(remote_ip_info.country); //国家
alert(remote_ip_info.province); //省份
alert(remote_ip_info.city); //城市
});
});
var mytime = new Date(); var myhour = mytime.getHours().toString(); var mymins = mytime.getMinutes().toString(); var mysecond = mytime.getSeconds().toString(); var myHaoMiao = mytime.getMilliseconds().toString();
var option=$('#select option: selected'); var remove=option.remove();
$("tr: contains('王五')").addClass("selected").siblings().removeClass("selected").end().find(':radio').attr("checked", true);
/*上面这段代码使用了end()方法，当前对象是$(this)，当进行addClass("selected")操作时，对象从未发生变化，当执行siblings().removeClass('selected')操作时，对象已经变为$(this).siblings(), 因此后面的操作都是针对这个对象的，如果要重新返回到$(this)对象，就可以使用end()方法，这样后面的代码就会针对之前的对象进行操作了。*/
//class内容 .selected { background: #FF6500; color: #fff; } $('tbody>tr').click(function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected').find(':checkbox').attr('checked', false); } else { $(this).addClass("selected").find(':checkbox').attr('checked', true); } });
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>";
//创建 div 元素
$("body").append(tooltip);
//把它追加到文档中
$("#tooltip").css({
"top": (e.pageY) + "px", //+ "px"
"left": (e.pageX) + "px" //+ "px"
}).show("fast");
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove();
//移除
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY) + "px", //
"left": (e.pageX) + "px"//+ "px"
});
});
//提示框的样式
#tooltip
{
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
.focus{ border: 1px solid #f00; background:#fcc; } $(":input").focus(function () { $(this).addClass("focus"); }).blur(function () { $(this).removeClass("focus"); });
//获取页面中的所有p元素 var items = document.getElementsByTagName("p"); for (var i = 0; i < items.length; i++) { items[i].onclick = function (e) { //给每一个p添加onclick事件 alert("事件添加成功！" + e.currentTarget.innerHTML); } };
//将鼠标移到图片上的时候，显示大图 function ABC() { var x = 10; var y = 20; $("a.tooltip").mouseover(function (e) { this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle ? "<br/>" + this.myTitle : ""; var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px"//设置x坐标和y坐标，并且显示 }).show("fast"); }).mouseout(function () { this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function (e) { $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }
$("#tb tr: even").css('background', 'yellow');
$("#tb tr: odd").css('background', 'pink');
$("#tb tr: first").css("background", "");
<label> 无锡</label><input type="checkbox" name="city" value="无锡" /> <label> 苏州</label><input type="checkbox" name="city" value="苏州" /> <label> 江苏省</label><input type="checkbox" name="province" value="江苏省" /> <input type="button" name="btn" value="点击查看" id='btn_query' />
//使用代码，将复选框的（无锡，江苏），默认勾选 $("input[type='checkbox']").val(["无锡", "江苏省"]); //相当于使用 $("input[value='无锡']").attr("checked", true); $("input[value='江苏省']").attr("checked", true); // 获取页面上所有勾选中的城市 $("#btn_query").click(function () { var citys = []; $("input[name='city']:checked").each(function () { var options = {}; if (this.value != "") { options.data = this.value; citys.push(options); } }); }); //全选 $("#CheckedAll").click(function () { $('[name=items]:checkbox').attr('checked', true); // $('[name=items]:checkbox').attr("checked", this.checked); //要使用this.checked代替true，checkedAll肯定要是一个复选框或者单选框 }); //全不选 $("#CheckedNo").click(function () { $('[type=checkbox]:checkbox').attr('checked', false); }); //反选 $("#CheckedRev").click(function () { $('[name=items]:checkbox').each(function () { //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。 //$(this).attr("checked", !$(this).attr("checked")); //$(this).prop("checked", !$(this).prop("checked")); //直接使用JS原生代码，简单实用 this.checked = !this.checked; }); });
<select id="slt"> <option value="cz">常州市</option> <option value="nt">南通市</option> <option value="zj">镇江市</option> <option value="yz">扬州市</option> </select> <button id="setSltValue"> 设置下拉框中的值</button> <button id="getSltValue"> 获取下拉框中的值</button> <input type="button" value="查看下拉框中的所有项" id="getSltValues" />
//设置下拉框当前值 $("#setSltValue").click(function () { $("#slt").val("zj"); //zj=镇江市 //上面这行代码，相当于$("#slt option: eq(2)").attr("selected", true); }); //获取选中的值 $("#getSltValue").click(function () { alert($("#slt").val()); // alert($("select: selected").val()); // $("select:selected").each(function () { //当有多个选项被选中的时候 // str += $(this).text() + ", "; // }); $("#getSltValues").click(function () { var slt = $("#slt").children(); //children方法，只考虑子元素，其他元素不会考虑 for (var i = slt.length - 1;i >= 0; i--) { alert(slt[i].innerHTML); } var city = $("#slt").children("镇江市"); //这里能够获取到option为镇江市的这个对象。 }); //给下拉框增加一个option $("#select_materialid").append("<option value='" + content[0].MaterialId + "'>" + content[0].MaterialId + "</option>"); $("#select_materialid").val(content[0].MaterialId);
function SetSelectValue(e, selector) { var res = $(selector + " option").map(function () { return $(this).val(); }); if (!res.get().includes(e)) { var op = "<option value='" + e + "'>" + e + "</option>"; $(selector).append(op); } $(selector).val(e); }
//存入值 $.cookie('the_cookie', 'the_value'); //取值 $.cookie('the_cookie'); //删除cookie $.cookie('the_cookie', null); //完整的cookie属性 //删除cookie $.cookie('', '', { expires: 7, //cookie的过期时间（天）。如果写入的是一个负数，那么cookie会被删除，如果不设置，或者为null，那么当浏览器在关闭的时候，会被删除。 path: '/', //默认是创建该cookie的页面路径。（说人话就是：在该网站根路径下的所有页面都能读取该cookie） domain: 'jquery.com', //创建该cookie的页面域名(访问jquery.com这个网站的时候，浏览器会将该cookie携带给网站的服务器) secure: true//如果为true，那么在传输的时候会要求一个安全协议，如果https // path, domain, secure都是有默认值的，所以在用的时候，可以不需要额外申明 });
if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); }
//当页面需要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png', 'img/hover-off.png');
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
$('input[type="submit"]').prop('disabled', true);
$('input[type="submit"]').prop('disabled', false);
$('a.no-link').click(function (e) {
e.preventDefault();
});
// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); });
当Ajax调用返回404或500错误时，就执行错误处理程序。如果没有定义处理程序，其他的jQuery代码或会就此罢工。定义一个全局的Ajax错误处理程序： $(document).ajaxError(function (e, xhr, settings, error) { console.log(error); });
//要把页面中，所有输入信息的元素放在表单中 var alltext = $("#form1:text"); var allpassword = $("#form1:password"); var allradio = $("#form1:radio"); var allcheckbox = $("#form1:checkbox");
// 返回顶部 $('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 1000); }); //1000：1秒完成。 <!-- 设置锚 --> <a class="top" href="#">Back to top</a> document.body.scrollTop = 0; $(window).scrollTop(0);
$("input").keydown(function (e) {
alert(e.keyCode);
})
BackSpace 8
Esc 27
Tab 9
Spacebar 32
Enter 13
Delete 46
Shift 16
Control 17
Alt 18
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57
("#div").mousedown(function(e){
alert(e.which);
})
//JS写法 window.onload=function () { //通过event对象来获取事件的参数 document.getElementById("body").onclick=function (e) { //window.event; (在IE9.10.11中获取事件对象的方式) ，在chrome中完美运行！ /*在 火狐中，直接给匿名函数中传递e function(e){ if (e.shiftKey) { alert("按了shift键"); } } */ //在火狐或者IE 8/9/10/11中都能完美运行的解决方法 var evnt=window.event||e; if (evnt.shifKey){ alert("按了shift键"); }else if (evnt.ctrlKey) { alert("按住了ctrl键") }else if(evnt.altKey){ alert("按住了Alt键"); }else{ alert("普通点击！"); } //获取当前页面鼠标坐标点 var x=evnt.clientX; var y=evnt.clientY; //相对于屏幕鼠标坐标点 var x1=evnt.screenX; var y1=evnt.screenY; //相对于元素自身内部鼠标坐标点 var x2=evnt.offsetX; var y2=evnt.offsetY; } } //Jquery写法 $(function(e){ $('body').click(functioin(e){ alert(e.pageX+' , '+e.pageY); }); })
<h3>事件冒泡</h3> <div id="d1" style="background-color: yellow;height:150px;width:150px"> <p id="p1" style="background-color: green;height: 100px;width:100px"> <input id="s1" style="background-color: red;height: 50px;width: 50px" type="text" value="123" /> </p> </div>
window.onload=function () { document.getElementById('d1').onclick=function(e){ //阻止事件冒泡 var evt=window.event||e // evt.cancelBubble=true; alert(this.id); } document.getElementById('p1').onclick=function(e){ //阻止事件冒泡（在IE下） var evt=window.event||e // evt.cancelBubble=true; alert(this.id); } document.getElementById('s1').onclick=function(e){ //阻止事件冒泡（在IE下） var evt=window.event||e // evt.cancelBubble=true; //获取引发事件的最初对象 var TargetObj=evt.srcElement||evt.target; alert(this.id); } //上面这段代码，点击最小的那个元素（123），之后会将P1和d1的ID也给弹出来这就是事件冒泡 document.getElementById('d1').onmousedown=function(e){ //阻止事件冒泡 var evt=window.event||e evt.cancelBubble=true; alert(this.keycode); } }
$(function(){ $('d1').click(function(e){ e.stopPropagation(); e.originalEvent//获取原声的事件（event）对象 }); })
<script> $(function() { //阻止浏览器默认右键点击事件 /*document.oncontextmenu = function() { return false; }*/ //阻止某元素右键点击事件 $("div").bind("contextmenu", function(){ return false; }) $("div").mousedown(function(e) { console.log(e.which); //右键为3 //左键为1 }) }) </script>
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return (r[2]); return null; } var material_NO = getUrlParam('material_NO');
var table = document.createElement("table"); table.border = "1px"; table.width = "150px"; table.style.borderStyle='solid'; var thead = table.createTHead(); var tbody = table.createTBody(); var trHead0 = thead.insertRow(0); trHead0.style.borderStyle='solid'; trHead0.insertCell(0).appendChild(document.createTextNode("姓名")); trHead0.insertCell(1).appendChild(document.createTextNode("年龄")); var trBody0 = tbody.insertRow(0);//在表体中创建第一行 var trBody1 = tbody.insertRow(1);//在表体中创建第二行 trBody0.insertCell(0).appendChild(document.createTextNode("nick")); trBody0.insertCell(1).appendChild(document.createTextNode("18")); trBody1.insertCell(0).appendChild(document.createTextNode("jenny")); trBody1.insertCell(1).appendChild(document.createTextNode("21")); trBody0.deleteCell(1);//将body中，第一行的第二个单元格给删除掉。————将“18”删掉 document.body.appendChild(table);
//日期格式 2011-11-11 function dateCompare(t1, t2) { var strs1 = new Array(); //定义一数组 strs1 = t1.split("-"); //字符分割 var strs2 = new Array(); //定义一数组 strs2 = t2.split("-"); //字符分割 if (strs1[0] > strs2[0]) { return false; } else if (strs1[0] < strs2[0]) { return true; } else { } if (strs1[1] > strs2[1]) { return false; } else if (strs1[1] < strs2[1]) { return true; } else { } if (strs1[2] > strs2[2]) { return false; } else if (strs1[2] < strs2[2]) { return true; } else { } return true; }
JS日期的其他操作：http://www.cnblogs.com/soulmate/p/5629203.html
function showTime () { var curtime=new Date(); $(".getDateTime").text(curtime.toLocaleString()); setTimeout("showTime()",1000); } $(function(){ showTime(); })
生成时钟使用了setTimeout方法，该方法是等待XX毫秒后调用指定的函数。
还可以使用setInterval方法，每隔xx毫秒调用指定的函数
function GetCurrentDate() { var t = new Date(); var y = t.getFullYear(); var d = t.getDate(); var m = t.getMonth() + 1; if (m < 10) { m = '0' + m; } if (d < 10) { d = '0' + d; } return y + '-' + m + '-' + d; }
function GetDateTime() { var mytime = new Date(); var date = mytime.getDate(); var month = mytime.getMonth() + 1; var min = mytime.getMinutes(); var sec = mytime.getSeconds(); var hour = mytime.getHours(); var monthStr = month.toString(); var dateStr = date.toString(); var hourStr = hour.toString(); var minStr = min.toString(); var secStr = sec.toString(); if (date < 10) { dateStr = "0" + dateStr; } if (month < 10) { monthStr = "0" + monthStr; } if (min < 10) { minStr = "0" + minStr; } if (sec < 10) { secStr = "0" + secStr; } var lmDate = mytime.getFullYear().toString() + monthStr + dateStr; var lmTime = hourStr + minStr + secStr; return lmDate + lmTime; }
$('#btn').click(function () {
var tab = document.getElementById("kanBan");
var trs = tab.rows;
for(var i = 0, len = trs.length; i < len; i++){
var cell = trs[i].cells[2];
cell.style.display = 'none';//如果不需要影藏了，可以将display属性赋一个空的字符串。
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h2,h5,#tooltipMsg,p{
white-space: nowrap;
}
td{
border: 1px solid #ccc;
height: 50px;
text-align: center;
font-size: 10px;
padding: 2px;
}
</style>
</head>
<body>
<h2>表格光棒效果</h2>
<table id="lightBar" border="1" width="500">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function () {
var trE=document.getElementById('lightBar').rows,
trLen=trE.length,
i=0;
for (; i < trLen; i++){
var trEi=trE[i];
trEi.onmousemove = function (event) {
this.style.backgroundColor = "#a5e5aa";
}
trEi.onmouseout=function () {
this.style.backgroundColor = "#fff";
}
}
}
</script>
</body>
</html>
var rows = document.getElementById("LGPSPCFormTable").rows; if (rows.length < 1) return null; var ary = []; for (var i = 1; i < rows.length; i++) { var obj = { Customer: rows[i].cells[1].innerText, Model: rows[i].cells[2].innerText, PartNo: rows[i].cells[3].innerText, Technology: rows[i].cells[4].innerText, Point: rows[i].cells[5].innerText, LightDirection: rows[i].cells[6].innerText, UniformitySpec: rows[i].cells[7].innerText, CentralBrightnessSpec: rows[i].cells[8].innerText, UniformityLCL: rows[i].cells[9].innerText, CentralBrightnessLCL: rows[i].cells[10].innerText, LmDate: rows[i].cells[11].childNodes[1].value, Shift: rows[i].cells[12].childNodes[1].value, Line: rows[i].cells[13].childNodes[0].value, Period: rows[i].cells[14].childNodes[1].value, Uniformity: rows[i].cells[15].innerText, CentralBrightness: rows[i].cells[16].innerText }; ary.push(obj); } return ary;
if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++) { if (from in this && this[from] === elt) return from; } return -1; }; }
/** * floatTool 包含加减乘除四个方法，能确保浮点数运算不丢失精度 * * 我们知道计算机编程语言里浮点数计算会存在精度丢失问题（或称舍入误差），其根本原因是二进制和实现位数限制有些数无法有限表示 * 以下是十进制小数对应的二进制表示 * 0.1 >> 0.0001 1001 1001 1001…（1001无限循环） * 0.2 >> 0.0011 0011 0011 0011…（0011无限循环） * 计算机里每种数据类型的存储是一个有限宽度，比如 JavaScript 使用 64 位存储数字类型，因此超出的会舍去。舍去的部分就是精度丢失的部分。 * * ** method ** * add / subtract / multiply /divide * * ** explame ** * 0.1 + 0.2 == 0.30000000000000004 （多了 0.00000000000004） * 0.2 + 0.4 == 0.6000000000000001 （多了 0.0000000000001） * 19.9 * 100 == 1989.9999999999998 （少了 0.0000000000002） * * floatObj.add(0.1, 0.2) >> 0.3 * floatObj.multiply(19.9, 100) >> 1990 * */ var floatTool = function() { /* * 判断obj是否为一个整数 */ function isInteger(obj) { return Math.floor(obj) === obj } /* * 将一个浮点数转成整数，返回整数和倍数。如 3.14 >> 314，倍数是 100 * @param floatNum {number} 小数 * @return {object} * {times:100, num: 314} */ function toInteger(floatNum) { var ret = {times: 1, num: 0} if (isInteger(floatNum)) { ret.num = floatNum return ret } var strfi = floatNum + '' var dotPos = strfi.indexOf('.') var len = strfi.substr(dotPos+1).length var times = Math.pow(10, len) var intNum = parseInt(floatNum * times + 0.5, 10) ret.times = times ret.num = intNum return ret } /* * 核心方法，实现加减乘除运算，确保不丢失精度 * 思路：把小数放大为整数（乘），进行算术运算，再缩小为小数（除） * * @param a {number} 运算数1 * @param b {number} 运算数2 * @param digits {number} 精度，保留的小数点数，比如 2, 即保留为两位小数 * @param op {string} 运算类型，有加减乘除（add/subtract/multiply/divide） * */ function operation(a, b, op) { var o1 = toInteger(a) var o2 = toInteger(b) var n1 = o1.num var n2 = o2.num var t1 = o1.times var t2 = o2.times var max = t1 > t2 ? t1 : t2 var result = null switch (op) { case 'add': if (t1 === t2) { // 两个小数位数相同 result = n1 + n2 } else if (t1 > t2) { // o1 小数位 大于 o2 result = n1 + n2 * (t1 / t2) } else { // o1 小数位 小于 o2 result = n1 * (t2 / t1) + n2 } return result / max case 'subtract': if (t1 === t2) { result = n1 - n2 } else if (t1 > t2) { result = n1 - n2 * (t1 / t2) } else { result = n1 * (t2 / t1) - n2 } return result / max case 'multiply': result = (n1 * n2) / (t1 * t2) return result case 'divide': return result = function() { var r1 = n1 / n2 var r2 = t2 / t1 return operation(r1, r2, 'multiply') }() } } // 加减乘除的四个接口 function add(a, b) { return operation(a, b, 'add') } function subtract(a, b) { return operation(a, b, 'subtract') } function multiply(a, b) { return operation(a, b, 'multiply') } function divide(a, b) { return operation(a, b, 'divide') } // exports return { add: add, subtract: subtract, multiply: multiply, divide: divide } }();
原文地址：https://www.bbsmax.com/A/kvJ3wA7JgM/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写防抖debounce</title>
</head>
<body>
<input type="text" value="" id="ipt">
<script src="jquery-1.7.1.min.js"></script>
<script>
let timer;
$("#ipt").keyup(function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log(this.value);
timer = null;
}, 500);
});
/***************************************************************/
//封装一个debounce函数
function debounce(fn, delay = 500) {
let timer;//timer是在闭包中的。
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
//调用debounce函数。
$("#ipt").keyup(debounce(() => {
console.log(this.value);
}), 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手写节流throttle</title>
</head>
<body>
<div id="div1" draggable="true" style="display: block;width: 100px;height: 100px;border: 1px solid black;"></div>
<script src="jquery-1.7.1.min.js"></script>
<script>
const div1 = document.getElementById('div1');
//let timer;
// div1.addEventListener('drag', (e) => {
// if (timer) {
// return;
// }
// timer = setTimeout(() => {
// console.log(e.offsetX,e.offsetY)
// timer = null;
// }, 500);
// });
/***************************************************************/
//封装一个throttle函数
function throttle(fn, delay = 500) {
let timer;//timer是在闭包中的。
return function () {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
//调用throttle函数。
div1.addEventListener('drag',throttle((e) => {
console.log(e.offsetX,e.offsetY);
}), 100);
</script>
</body>
</html>
//传统方式 function unique(ary) { const res = []; ary.forEach(item => { if(res.indexOf(item)<0){ res.push(item); } }); return res; } //使用set（无序的） function unique(ary){ const set=new Set(ary); return [...set]; } const res=unique([1,2,3,1,5,3]); console.log(res);
lambda表达式
find() 返回第一个元素。
filter() 返回一个包含所有通过测试函数的元素的新数组。
var nub = nubList.find(nub => nub.expressId == "00002");//返回一个对象
_warningData.filter(v => (v.Reserve1 + v.Device) == key);//返回一个数字
let arr = [ { name: 'Rick', age: 60 }, { name: 'Rick', age: 70 }, { name: 'Morty', age: 14 } ] let findResult = arr.find(i => i.name === 'Rick') let filterResult = arr.filter(i => i.name === 'Rick') console.log(arr); /* 输出结果 [ { name: "Rick", age: 60 }, { name: "Rick", age: 70 }, { name: "Morty", age: 14 } ] */ console.log(findResult); // {name: "Rick", age: 60} console.log(filterResult); // [{name: "Rick", age: 60}, {name: "Rick", age: 70}]
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click", function () {
const broadcast = new SpeechSynthesisUtterance(); // 初始化
broadcast.text = "美团外卖已自动为您接单，请注意查收";
broadcast.lang = "zh"; // 音种
broadcast.volume = 1; // 音量
broadcast.rate = 1; // 音速
broadcast.pitch = 1; // 音调
speechSynthesis.speak(broadcast); // 添加到语音队列中播放
});
</script>
