JQuery使用及基础原理解析相关笔记（三）

1.jQuery的核心–所有版本：https://code.jquery.com/jquery/

2.jQuery属性操作：

◆设置属性：当前节点.attr(属性名,属性值);
◆获取属性：当前节点.attr(属性名);
◆移除属性：当前节点.removeAttr(属性名);
◆设置属性：当前节点.prop(属性名,属性值);
◆获取属性：当前节点.prop(属性名);

◆移除属性：当前节点.removeProp(属性名);

★使用attr对象对bool类型值得属性赋值时，其实并不会赋值true或者false，如果赋值为false则是undefined，如果是true则是非udefined，所以这样不好，可能会出现多次赋值后失灵无效，因为这种方式不适合操作bool类型值的属性的，于是一个新的专门针对true和false改进的方法诞生，是prop，操作方式和attr一模一样，但是是针对bool类型值得属性赋值的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery操作属性（attr和prop）</title><script src="jquery-1.11.1.js"></script><script>$(function () {//对于特殊的属性 只能够使用一次   对于特殊的属性 不适合用$("button:eq(0)").click(function () {$(":checkbox").attr("checked",true);$(":text").attr("value",$(":checkbox").attr("checked"));});//对于特殊的属性 可以使用多次  这是对那些特殊点的属性专用的方法$("button:eq(1)").click(function () {$(":checkbox").prop("checked",true);$(":text").prop("value",$(":checkbox").prop("checked"));});})</script>
</head>
<body>
<button>attr绑定</button>
<button>prop绑定</button>
<input type="text">
<input type="checkbox">
</body>
</html>

★使用jQuery属性操作DIY:表格的全选与反选、文本框光标闪动

☆表格的全选与反选

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>jQuery使用prop实现表格全选反选</title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style><script src="jquery-1.11.1.js"></script><script>//需求1：选中头部的复选框后，身体部分的复选框也会被选中，//      取消选中头部的复选框后，身体部分的复选框也会被取消//需求2：当身体部分的复选框全部选中时，头部的复选框也会被选中，//      身体部分的复选框有一个没有被选中，头部的复选框就不会被选中//思路1：给头部复选框设置点击事件，让身体部分的复选框与头部的复选框的checked值同步//思路2：给身体部分的复选框设置单击事件，自己也是选中的，//      那么就让头部的复选框被选中，就判断被选中的复选框个数是否与身体部分的复选框个数一致，//      如果一致就选中头部的复选框，//      如果自己没有选中，就取消头部的复选框。//步骤：$(function () {//给头部复选框设置点击事件$("#j_cbAll").click(function () {//让身体部分的复选框与头部的复选框的checked值同步$("#j_tb :checkbox").prop("checked", $(this).prop("checked"));});$("#j_tb :checkbox").click(function () {
//                //如果自己也是选中的话
//                if ($(this).prop("checked")) {
//                    //判断被选中的复选框个数是否与身体部分的复选框个数一致
//                    if ($("#j_tb :checked").length === $("#j_tb :checkbox").length) {
//                        //如果一致就选中头部的复选框
//                        $("#j_cbAll").prop("checked", true);
//                    } else {//否则不选中
//                        $("#j_cbAll").prop("checked", false);
//                    }
//                } else {//如果自己没有选中 就取消头部的复选框
//                    $("#j_cbAll").prop("checked", $(this).prop("checked"));
//                }//优化上面的代码//如果自己被选中if (true === $(this).prop("checked")) {//判断身体部分所有复选框都被选中了if ($("#j_tb :checked").length !==$("#j_tb :checkbox").length) {$("#j_cbAll").prop("checked", false);return;}}//自己没有被选中 那头部的复选框也不会被选中，// 如果代码执行到这里了，自己也被选中了，那么说明所有的复选框都被选中了$("#j_cbAll").prop("checked", $(this).prop("checked"));});})</script>
</head><body>
<div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll"/></th><th>语言名称</th><th>所属对象</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox"/></td><td>JavaScript</td><td>水晶女孩</td></tr><tr><td><input type="checkbox"/></td><td>css</td><td>水晶女孩</td></tr><tr><td><input type="checkbox"/></td><td>html</td><td>水晶女孩</td></tr><tr><td><input type="checkbox"/></td><td>jQuery</td><td>水晶女孩</td></tr></tbody></table>
</div>
</body>
</html>

☆文本框光标闪动

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>使用jQuery制作动态输入文本的光标一闪一闪的动画</title><style>* {margin: 0;padding: 0;}@keyframes blink {0%,100% {opacity: 1}50% {opacity: 0}}@-webkit-keyframes blink {0%,100% {opacity: 1}50% {opacity: 0}}@-moz-keyframes blink {0%,100% {opacity: 1}50% {opacity: 0}}.wrap {width: 1000px;text-align: center;margin: 100px auto 0;}.wrap h1 {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 300;}.word {font-weight: 700;}.typed-cursor {opacity: 1;-webkit-animation: blink .7s infinite;-moz-animation: blink .7s infinite;animation: blink .7s infinite;display: none;}.saySection {margin-top: 50px;}.saySection input {font-size: 30px;}.saySection .txtSay {padding-left: 10px;}.saySection .btnSay {display: inline-block;padding: 0 20px;cursor: pointer;}</style><script src="jquery-1.11.1.js"></script><script>//需求：在文本框中输入文本后点击确定按钮，立即展示文字动态输入的效果//思路：将文本框中的字符串通过循环的方式追加到 .word中//步骤：$(function () {var value = $("#inValue");var text = $(".word");var cursor = $(".typed-cursor");$("#btnSay").click(function () {//使用定时器之前先清除定时器clearInterval($("#btnSay").get(0).timer);var str = "";var txt = value.val();var i = 0;//激活动态光标cursor.show(500);$("#btnSay").get(0).timer = setInterval(function () {str += txt[i];text.text(str);i++;if (i === txt.length) {clearInterval($("#btnSay").get(0).timer);cursor.hide(500);}}, 200);});})</script>
</head>
<body>
<div class="wrap"><h1>You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！</h1><div class="saySection"><input type="text" id="inValue" class="txtSay"/><input type="button" value="确定" id="btnSay" class="btnSay"/></div>
</div>
</body>
</html>

3.表单选择器与表单对象属性选择器
◆表单选择器

:input //input标签
:text //文本框
:password  //密码框
:radio  //单选按钮
:checkbox //复选框
:submit //提交按钮
:image  //图片提交按钮
:reset //重置按钮
:button //按钮
:file //上传文件按钮
:hidden //隐藏文本域

◆表单对象属性选择器

:enabled //已经启用
:disabled //可以显示
:checked //已经选中
:selected  //已经选择

4.三种获取设置值的方法 val()、text()、html()
◆val()：主要是用来获取标签中允许拥有value的属性的值，几乎所有表单标签都有value属性值。
◆text()：主要用来获取标签对中的文本内容，其实就是原生js中的innerText和textContent的兼容。
◆html()：主要用来获取标签对中的文本内容或html标签文本，很像是原生js中的innerHTML。

★方法中不写参数就是获取值，方法中写参数就是设置值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的val、text、html方法</title><script src="jquery-1.11.1.js"></script><script>$(function () {var input=$("input");var div=$("div");var span=$("span");input.val("使用了value方法");span.text("<button>只能显示纯文本</button>")div.html("<button>我是一个按钮</button>")console.log(input.val());console.log(span.text());console.log(div.html());});</script>
</head>
<body>
<input type="text">
<div></div>
<span></span>
</body>
</html>

5.获取和设置宽高的方法 height()和width()
◆height()：只是单纯的获取css样式中的height属性值，与padding和border以及margin无关。
◆width()：只是单纯的获取css样式中的width属性值，与padding和border以及margin无关。

★方法中不写参数就是获取值（获取的值为纯数字），方法中写参数就是设置值，设置值的方式可以是纯数字，参数为纯数字时默认像素为单位，参数也可以是字符串。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的height()与width()</title><style type="text/css">.box {width: 150px;height: 150px;background-color: #a05;padding:20px;margin:100px;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {$(".box").html("<h4>width():"+($(".box").width())+"</h4>" +"<h4>height():"+($(".box").height())+"</h4>"+"<h4>只是获取css样式中width属性值与height属性值</h4>")})</script>
</head>
<body>
<div class="box"></div>
</body>
</html>

6.获取定位的距离

◆

offset().top

表示距离浏览器起始点（0，0）点的y轴的距离，和无论有没有定位（maring的属性值也算），并且offset().top获取的都是针对浏览器起始点，与js原生属性offsetTop不一样，由于无论有没有定位都是针对浏览器的起始点。

◆

offset().left

表示距离浏览器起始点（0，0）点的x轴的距离，和无论有没有定位（maring的属性值也算），并且offset().left获取的都是针对浏览器起始点，与js原生属性offsetLeft不一样。

★offset()还可以赋值，如

offset({left:200,top:200})

，赋值的时候其实就是设置定位时的left和top属性值;，但是实际上它会和当前的位置上的坐标值进行计算（和margin的属性值进行减法运算），从而得到真正的定位坐标属性left和top值，然后再进行设置。

◆

position().top

表示距离父级非静态定位的盒子的y轴距离，这个方法其实就是获取定位时设置的top属性值而已与其它属性值无关。

◆

position().left

表示距离父级非静态定位的盒子的x轴距离，这个方法其实就是获取定位时设置的left属性值而已与其它属性值无关，可能会与父容器的margin-left值相关联。

◆

scrollTop()

表示距离元素被卷去的距离，用法$(document).scrollTop()，相当于之前封装的scroll方法一样scroll().scrollTop()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。

◆

scrollLeft()

表示距离元素被卷去的距离，用法$(document).scrollLeft()，相当于之前封装的scroll方法一样scroll().scrollLeft()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。

★scrollTop()方法与scrollLeft()方法其实不光可以获取并且还可以设置，内部调用了window.moveTo(x,y)的方法，不光可以$(document).scrollLeft()，也可以是$(window).scrollLeft()，是一样的，因为自己封装scroll()时就是这样子的

function scroll(){
return {scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}
}

★

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的offset()、position()、scrollTop()、scrollLeft()</title><style>body {margin:20px;height: 5000px;}div {width: 150px;height: 150px;margin: 100px;background-color: #a05;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {//获取定位的距离// offset().top：表示距离浏览器起始点（0，0）点的y轴的距离，// 和无论有没有定位（maring的属性值也算），// 并且offset().top获取的都是针对浏览器起始点，// 与js原生属性offsetTop不一样。console.log('$("div").offset().top：' + ($("div").offset().top));//offset().left：表示距离浏览器起始点（0，0）点的x轴的距离，// 和无论有没有定位（maring的属性值也算），// 并且offset().left获取的都是针对浏览器起始点，// 与js原生属性offsetLeft不一样。console.log('$("div").offset().left：' + ($("div").offset().left));//offset()还可以赋值，如offset({left:200,top:200})，// 赋值的时候其实就是设置定位时的left和top属性值;//，但是实际上它会和当前的位置上的坐标值进行计算（和margin的属性值进行减法运算），// 从而得到真正的定位坐标属性left和top值,然后再进行设置。$("div").offset({left: 300, top: 300});//position().top：表示距离父级非静态定位的盒子的y轴距离，// 这个方法其实就是获取定位时设置的top属性值而已与其它属性值无关。console.log($("div").position().top);//position().left：表示距离父级非静态定位的盒子的x轴距离，// 这个方法其实就是获取定位时设置的left属性值而已与其它属性值无关,// 可能会与父容器的margin-left值相关联。console.log($("div").position().left);//scrollTop()：表示距离元素被卷去的距离，// 用法$(document).scrollTop()，// 相当于之前封装的scroll方法一样scroll().scrollTop()，// 如果你像获取元素被卷去的距离，可以让元素产生滚动条，// 这样就能够获取了，使用overflow:auto;获取overflow:scroll;// 来产生滚动条，前提条件是，子容器要大于父容器。//scrollLeft()：表示距离元素被卷去的距离，// 用法$(document).scrollLeft()，// 相当于之前封装的scroll方法一样scroll().scrollLeft()，// 如果你像获取元素被卷去的距离，可以让元素产生滚动条，// 这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，// 前提条件是，子容器要大于父容器。//scrollTop()方法与scrollLeft()方法其实不光可以获取并且还可以设置，// 内部调用了window.moveTo(x,y)的方法，不光可以$(document).scrollLeft()，// 也可以是$(window).scrollLeft()，是一样的，因为自己封装scroll()时就是这样子的【
//        function scroll(){
//            return {
//                scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
//                scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
//            }
//        }//设置页面被卷去的距离时，前提是 页面要有滚动条$("button").click(function () {$(document).scrollTop(1000);});})</script>
</head>
<body>
<button>scrollTop(1000)</button>
<div></div>
</body>
</html>

7.jQuery事件机制
◆jQuery的事件机制，指的是：jQuery对javascript操作dom事件的封装，包括了：事件绑定、事件解绑、事件触发。

◆jQuery事件的发展历程：简单事件绑定-->bind事件绑定-->delegate事件绑定-->on事件绑定（on最优秀，因为bind、delegate内部就是使用的on，所以on是最好的）

8..事件绑定的四种方式（其实只有两种方式一种非事件委托的方式、一种事件委托的方式）
◆简单事件绑定

$(".box").click(function(){}); //这种放式最为简单了，可以多次绑定，不会被后面绑定的相同的事件层叠掉，一次只能够绑定一个事件，并且无法以指定父容器的方式给子元素绑定事件，也就是说不会进行事件委托了。

◆bind事件绑定

$(".box").bind("click dbclick",function(){});//这种方式要比简单事件绑定复杂一点，但是在jQuery1.7版本后不再使用了，不仅有简单事件绑定的所有优点，并且至此多事件绑定，但是依旧不能进行事件委托，因为事件委托的方式仅仅是需要依赖父容器的。

◆delegate事件绑定

◇非事件委托的方式

$(".box").delegate(null,"click dbclick",function(){});//这种方式与bind事件绑定一样的，实际上无论是bind还是delegate内部使用的都是on事件绑定。

◇事件委托的方式绑定事件

$(document).delegate(".box","click dbclick",function(){});//这种方式属于事件委托的方式绑定事件

◆on事件绑定

◇非事件委托的方式

$(".box").on("click dbclick",{age:20},function(){});//非事件委托的方式绑定事件，bind与delegate还有on都是一样的，只不过参数有点区别而已。

◇事件委托的方式绑定事件

$(document).on("click dbclick",".box",{age:20},function(){});//事件委托的方式绑定事件，推荐使用这种，最好用了，{age:20}表示事件绑定时传递一个数据进去，然后事件触发后，可以在内部获取这个数据，但是绑定的时候function(event){}，方法的参数里面要加一个event或者其它形参，然后在方法内部可以使用 event.data的方式获取你传递进去的数据。

★

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的事件绑定四种方式</title><style type="text/css">div {width: 300px;height: 300px;background-color: #a05;margin: 50px;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {/** 事件绑定的四种方式（其实只有两种方式  一种非事件委托的方式、一种事件委托的方式  ）* *//第一种方式  简单事件绑定 \\\\\// 绑定相同的事件时不会被层叠掉，// 因为内部有一个事件队列存着这些事件$("div").click(function () {console.log("简单事件绑定：触发了div的单击事件1");})$("div").click(function () {console.log("简单事件绑定：触发了div的单击事件2");})/第二种方式  bind事件绑定 \\\\\// 每次都可以绑定多个事件，// 并且绑定相同的事件不会被层叠掉$("div").bind("click dblclick", function () {console.log("bind事件绑定：单击和双击都会触发这个事件1");})$("div").bind("click dblclick", function () {console.log("bind事件绑定：单击和双击都会触发这个事件2");})/第三种方式  delegate事件绑定 \\\\\// 每次可以绑定多个实际那，// 并且绑定相同的事件不会被层叠掉// 还可以指定的给父容器里的子容器绑定事件// 并且还是以事件委托的方式来进行绑定的// 当你动态添加新的元素时，// 那个元素如果符合要求的话也会有这个被绑定的事件方法，// 所以更加的准确灵活健壮稳定了$(document).delegate("div", "click dbclick", function () {console.log("delegate事件绑定：单击和双击都会触发这个事件1");})$(document).delegate("div", "click dbclick", function () {console.log("delegate事件绑定：单击和双击都会触发这个事件2");})$("div").delegate(null, "click dbclick", function () {console.log("delegate事件绑定：单击和双击都会触发这个事件3");})//添加新的div  新的div也会有事件$("button").click(function () {$("<div>新</div>").appendTo($(document).find("body"));});/第四种方式  on事件绑定 \\\\\//其实无论是bind事件绑定还是delegate事件绑定，//其实内部都是使用的on事件绑定//on事件绑定的方式是最优秀的//on事件还是传递数据进去$(document).on("click dbclick","div",{name:"xf"},function(event){console.log("on事件绑定：单击和双击都会触发这个事件1，传递的数据为："+event.data.name);});$(document).on("click dbclick","div",{name:"xf"},function(event){console.log("on事件绑定：单击和双击都会触发这个事件2，传递的数据为："+event.data.name);});$("div").on("click dbclick", {name: "xf"}, function (event) {console.log("on事件绑定：单击和双击都会触发这个事件3，传递的数据为：" + event.data.name);})});</script>
</head>
<body>
<button>添加一个div</button>
<div></div>
</body>
</html>

9.事件解绑的两种方式（非事件委托的方式与事件委托的方式）

◆事件绑定的方式有四种分别是简单事件绑定、bind事件绑定、delegate事件绑定（支持事件委托）、on事件绑定(支持事件委托)
◆由于这几种方式绑定事件都不会被层叠掉，非指定父容器给子容器（非事件委托）的简单事件绑定、bind事件绑定、delegate、on事件绑定可以使用对象.unbind()、对象.undelegate()、对象.off()来解绑

$("div").unbind();
$("div").undelegate();
$("div").off();

，如果指定父容器给子容器（事件委托）的delegate和on事件绑定可以使用相应的undelegate()和off()方式来解绑

$(document).undelegate("div","click dbclick");//解绑指定的元素的指定事件
$(document).off("click dbclick","div");//解绑指定的元素的指定事件
$(document).off("","div"); //解除指定元素的全部事件

◆事件解绑不仅仅可以解绑全部事件，也可以针对性的解绑某一个事件，获取某一个事件中的某一个方法，但是你绑定事件的时候，方法不能是匿名函数，不然找不到指针地址，当不解绑全部事件时，怎么绑定的就怎么解绑，参数差不多，如

//绑定
$(document).delegate(".box","click blur keydown",function(e){
//事件驱动程序
})
//解绑
$(document).undelegate(".box","click");

★使用bind绑定事件会存在bug，例如双击事件的绑定是无法解除的，必须使用全部解绑的方式

◇ $("div").unbind();

才能够解绑。

★

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的事件解绑三种方式</title><style type="text/css">div {width: 300px;height: 300px;background-color: #a05;margin: 50px;}</style><script src="jquery-1.11.1.js"></script><script>//这个入口函数中是事件绑定的入口函数$(function () {/** 事件绑定的四种方式（其实只有两种方式  一种非事件委托的方式、一种事件委托的方式  ）* *//第一种方式  简单事件绑定 \\\\\// 绑定相同的事件时不会被层叠掉，// 因为内部有一个事件队列存着这些事件$("div").click(function () {console.log("简单事件绑定：触发了div的单击事件1");})$("div").click(function () {console.log("简单事件绑定：触发了div的单击事件2");})/第二种方式  bind事件绑定 \\\\\// 每次都可以绑定多个事件，// 并且绑定相同的事件不会被层叠掉$("div").bind("click dblclick", function (e) {console.log("bind事件绑定：单击和双击都会触发这个事件1" + e.type);})$("div").bind("click dblclick", function (e) {console.log("bind事件绑定：单击和双击都会触发这个事件2" + e.type);})/第三种方式  delegate事件绑定 \\\\\// 每次可以绑定多个实际那，// 并且绑定相同的事件不会被层叠掉// 还可以指定的给父容器里的子容器绑定事件// 并且还是以事件委托的方式来进行绑定的// 当你动态添加新的元素时，// 那个元素如果符合要求的话也会有这个被绑定的事件方法，// 所以更加的准确灵活健壮稳定了$(document).delegate("div", "click dbclick", function () {console.log("delegate事件绑定：单击和双击都会触发这个事件1");})$(document).delegate("div", "click dbclick", function () {console.log("delegate事件绑定：单击和双击都会触发这个事件2");})$("div").delegate(null, "click dbclick", function () {console.log("delegate事件绑定：单击和双击都会触发这个事件3");})//添加新的div  新的div也会有事件$("button").click(function () {$("<div>新</div>").appendTo($(document).find("body"));});/第四种方式  on事件绑定 \\\\\//其实无论是bind事件绑定还是delegate事件绑定，//其实内部都是使用的on事件绑定//on事件绑定的方式是最优秀的//on事件还是传递数据进去$(document).on("click dbclick", "div", {name: "xf"}, function (event) {console.log("on事件绑定：单击和双击都会触发这个事件1，传递的数据为：" + event.data.name);});$(document).on("click dbclick", "div", {name: "xf"}, function (event) {console.log("on事件绑定：单击和双击都会触发这个事件2，传递的数据为：" + event.data.name);});$("div").on("click dbclick", {name: "xf"}, function (event) {console.log("on事件绑定：单击和双击都会触发这个事件3，传递的数据为：" + event.data.name);})});//这个入口函数中是事件解绑的入口函数$(function () {/*** 事件解绑的两种方式 （非事件委托的方式与事件委托的方式）* *///第一种事件解绑的方式  非事件委托的方式//注意：bind事件绑定方式存在bug  例如dbclick无法解除,// 必须使用全部解绑的方式：$("div").unbind();才能够解绑。//解除该元素的指定事件
//            $("div").unbind("dbclick click");//解除该元素的全部事件
//            $("div").unbind();
//            $("div").off();//第二种事件解绑的方式 事件委托的方式// 可以解除 指定父容器给子容器的delegate和on事件绑定//解除指定元素的指定的事件
//            $(document).undelegate("div", "click dbclick");
//            $(document).off("click dbclick", "div");//解除指定元素的全部事件
//            $(document).off("","div");})</script>
</head>
<body>
<button>添加一个div</button>
<div></div>
</body>
</html>

10.事件触发的三种方式
◆事件触发的第一种方式其实就是简单事件绑定时方法不要参数，如

$(".box").click();
$(".box").dbclick();

，这种方式会触发浏览器的默认行为，例如文本框获取焦点后会有样式的变化之类的表现。

◆事件触发的第二种方式使用

$(".box").trigger("click dbclick");

，可以同时触发多个事件，其实也可以传递叫data的数据进去，但是不常用，因为on绑定事件的方式已经传递了data，这种方式会触发浏览器的默认行为，如超链接的点击事件会进行默认跳转。

◆事件触发的第三种方式使用

$(".box").triggerHandler("click dbclick");

，其实和第二种触发方式相比只有一个区别，就是这种方式不会触发浏览器的默认行为，相当于执行完了事件中的方法后会取消默认的行为比如return false之类的，然后超链接不跳转了，文本框不会显示获取焦点后的样式变化的表现，有一个缺点，就是不支持事件委托的方式绑定的事件。

★

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的事件触发的三种方式</title><style type="text/css">.box {width: 200px;height: 200px;background-color: #0f0;margin: 50px;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {$(".box").on("focus", "input", function () {console.log(("触发了文本框的获取焦点事件"));});//            $("input").focus(function () {
//                console.log(("触发了文本框的获取焦点事件"));
//            });//第一种触发方式// 简单事件绑定时方法不要参数// 这种方式会触发浏览器的默认行为，例如文本框获取焦点后会有样式的变化之类的表现$("button:eq(0)").on("click", {}, function (e) {$("input").focus();});//第二种触发方式// 可以同时触发多个事件，// 其实也可以传递叫data的数据进去，// 但是不常用，// 因为on绑定事件的方式已经传递了data，// 这种方式会触发浏览器的默认行为，// 如超链接的点击事件会进行默认跳转$("button:eq(1)").on("click", {}, function (e) {$("input").trigger("focus");});//第三种触发方式//其实和第二种触发方式相比只有一个区别，// 就是这种方式不会触发浏览器的默认行为// 相当于执行完了事件中的方法后会取消默认的行为比如return false之类的，// 然后超链接不跳转了，// 文本框不会显示获取焦点后的样式变化的表现//有一个缺点， 就是不支持事件委托的方式绑定的事件$("button:eq(2)").on("click", {}, function (e) {$("input").triggerHandler("focus");});})</script>
</head>
<body>
<button>对象.focus()</button>
<button>对象.trigger("focus")</button>
<button>对象.triggerHandler("focus")</button>
<div class="box"><input type="text">
</div>
</body>
</html>

11.jQuery事件对象的常用属性

◆常用属性

event.data//传递事件处理程序的额外数据
event.currentTarget//等同与this，当前的dom对象
event.pageX//鼠标相对与页面文档x轴的坐标值
event.pageY//鼠标相对与页面文档y轴的坐标值
event.target//触发事件源，不一定绝对等于this，因为可能会是事件委托
event.stopPropagation()//阻止事件冒泡
event.preventDefault()//阻止默认行为
event.type//事件类型：click，dbclick...
event.which//鼠标的按键类型：左边1 中间2 右边3
event.keyCode//键盘按键代码

★

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的事件对象的常用属性</title><style type="text/css">.box {width: 200px;height: 200px;background-color: #0f0;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {$(".box").on("click", {}, function (event) {console.log("传递事件处理程序的额外数据："+event.data);   //传递事件处理程序的额外数据console.log("等同与this，当前的dom对象:"+event.currentTarget);  //等同与this，当前的dom对象console.log("鼠标相对与页面文档x轴的坐标值:"+event.pageX);  //鼠标相对与页面文档x轴的坐标值console.log("鼠标相对与页面文档y轴的坐标值:"+event.pageY);   //鼠标相对与页面文档y轴的坐标值console.log("触发事件源，不一定绝对等于this，因为可能会是事件委托:"+event.target);  //触发事件源，不一定绝对等于this，因为可能会是事件委托console.log("阻止事件冒泡:"+event.stopPropagation());   //阻止事件冒泡console.log("阻止默认行为:"+event.preventDefault());     //阻止默认行为console.log("事件类型："+event.type);   //事件类型：click，dbclick...console.log("鼠标的按键类型："+event.which);   //鼠标的按键类型：左边1中间2右边3console.log("键盘按键代码:"+event.keyCode);   //键盘按键代码})})</script>
</head>
<body>
<div class="box"></div>
</body>
</html>

12.使用jQuery来DIY：表单文本框回车换行并选中、按键后指定区域变色

◆按回车就让文本框的焦点移动到下一个文本框中，使用的是文本框的keydown事件，判断event.keyCode码，如果是回车键的码，那么就将焦点移动到下一个文本框中，使用的是focus()，或者select方法也行，focus只是让下一个文本框获得焦点，而select方法会让下一个文本框获取焦点的同时选中下一个文本框中的内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用jQuery制作表单文本框回车换行并选中</title><script src="jquery-1.11.1.js"></script><script>//需求1：当文本框中按下回车按钮，将自动把广告移动到下一个文本中去//需求2：移动到下一个文本框中时，如果下一个文本框不为空，则自动选中//思路：设置每一个文本框的按键按下的事件， keydown// 判断按键的码，如果是回车，就让下一个文本框获取焦点 focus()// 下一个文本框中如果有值，就让下一个文本框中的值被选中 select()//步骤：$(function () {$(":text").on("keydown", {}, function (event) {
//                console.log(event.keyCode);//是否是按下了回车键if (event.keyCode === 13) {
//                    $(this).next().next().next().focus();//获取焦点$(this).next().next().next().select();//选中}})})</script>
</head>
<body>
<input type="text" value="请输入文本1"><br><br>
<input type="text" value="请输入文本2"><br><br>
<input type="text" value="请输入文本3"><br><br>
<input type="text" value="请输入文本4"><br><br>
<input type="text" value="请输入文本5"><br><br>
<input type="text" value="请输入文本6"><br><br>
<input type="text" value="请输入文本7"><br><br>
<input type="text" value="请输入文本8"><br><br>
<input type="text" value="请输入文本9"><br><br>
</body>
</html>

◆按键后指定区域变色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用jQuery制作按键变色的效果</title>
</head>
<style>.wrap {width: 400px;height: 400px;margin: 100px auto 0;}.wrap h1 {text-align: center;}.wrap div {width: 400px;height: 300px;background: pink;font-size: 30px;text-align: center;line-height: 300px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>//需求：当按下 r键时 在改变div的背景色为红色 并且在span中打印 keyCode//思路：使用switch判断 keycode码 ，使用keydown事件  获取event.keyCode//步骤：$(function () {$(document).on("keydown", {}, function (event) {switch (event.keyCode) {case 80 :setEle("pink", event.keyCode)break;case 66:setEle("blue", event.keyCode)break;case 79:setEle("orange", event.keyCode)break;case 82:setEle("red", event.keyCode)break;case 89:setEle("yellow", event.keyCode)break;default :alert("系统没有这个颜色！！！");break;}})/*** 功能：设置背景色和指示文本* @param bgcolor* @param text*/function setEle(bgcolor, text) {$("#bgChange").css("background-color", bgcolor);$("#keyCodeSpan").text(text);}})
</script>
</head>
<body>
<div class="wrap"><h1>按键改变颜色</h1><div id="bgChange">keyCode为：<span id="keyCodeSpan">80</span></div>
</div>
</body>
</html>

13.链式编程与隐式迭代的原理

◆简单原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链式编程与隐式迭代的原理</title>
</head>
<body><script>/** 链式编程的原理是，最后都会return this，但是通常情况下，*只有设置的操作才能把链式编程延续下去。因为获取操作的时候，*或返回获取到的值，所以无法返回this，于是乎，*可以使用end()，找到当前链最近的一次断链之前的对象，*也就是说，如果没有返回之前那个this，*可以通过end()方法获取到之前获取到的那个this。*//** 隐式遍历是因为内部对jQuery对象进行了循环操作，*实际上jQuery对象都是一个伪数组对象，*jQuery中有显式遍历的方式，*each和map方法，遍历的操作方式和数组的forEach与map方法类似，*内部获取到的每一个元素也是原生js的dom对象。*/</script>
</body>
</html>

◆jQuery来DIY：五角星评价

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用jQuery制作五角星评价</title><style>* {padding: 0;margin: 0;}.comment {font-size: 40px;color: #ff3100;}.comment li {float: left;cursor: pointer;}ul {list-style: none;}</style><script src="jquery-1.11.1.js"></script><script>//需求1：当鼠标移入到某一个五角星上时，// 那个五角星及之前的五角星都会是亮的// 那个五角星之后的五角星都是不亮的//需求2：当鼠标点击后，// 鼠标再移出时，// 让原来那个点击的五角星及之前的五角星变亮，// 那个点击的五角星之后的不亮//思路1：给每一个五角星绑定鼠标移入事件，// 鼠标移入时，// 让当前五角星是亮的，// 然后再让之前的五角星亮// 最后让鼠标移入的五角星之后的五角星不亮//思路2：给每一个五角星绑定鼠标点击事件，// 单击后添加一个类，// 然后让所在的类及之前的五角星都是亮的，// 最后让这个类之后的五角星都是不亮的。//步骤：$(function () {var wjx_none = '☆'; // 空心五角星var wjx_sel = '★'; // 实心五角星//鼠标移入五角星$(".comment>li").on("mouseenter",{}, function () {//当前五角星及之前的五角星都变亮，之后的五角星不亮  end()补链$(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);})//鼠标移出五角星$(".comment>li").on("mouseleave",{},function(){//当前的五角星不亮，之前的五角星也不亮            end()补链$(this).text(wjx_none).prevAll().text(wjx_none).end().nextAll().text(wjx_none);})//鼠标点击五角星$(".comment>li").on("click",{}, function () {$(this).addClass("current").siblings().removeClass("current");})//鼠标移出所有五角星$(".comment").on("mouseleave",{}, function () {//                                                end()补链$(".current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);})})</script>
</head>
<body>
<ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li>
</ul>
</body>
</html>

◆显式遍历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的显式遍历</title><style>li {width: 200px;height: 200px;margin: 20px;float: left;list-style: none;text-align: center;font: 50px/200px "simsun";background-color: pink;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {//jQuery中有显式遍历的方式，each和map方法，// 遍历的操作方式和数组的forEach与map方法类似，// 内部获取到的每一个元素也是原生js的dom对象$("li").each(function (index,element) {$(element).css("opacity",(index+1)/10);$(element).addClass("index:"+index);});})</script>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
</ul>
</body>
</html>

14.解决多库共存方法

◆当引入jQuery的多个版本库时，无论使用$还是jQuery，其实都是在使用最后一个引入的jQuery版本库，可以通过打印jQuery的版本号来确定

console.log($.fn.jquery);console.log(jQuery.fn.jquery);

◆如果你想放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库的话，可以使用

$.noConflict()

，然后你就可以通过调用$符号使用上一个jQuery版本库了，而当前这一个版本库你可以使用jQuery单词来调用

◆如果你想放弃$符号与jQuery单词的使用权而改用其它自定义的单词时，可以使用

var customer=$.noConflict(true);

，然后当前这个jQuery版本库就能够通过调用customer单词来使用了，而$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存。

◆jQuery版本库的多版本库的引入都是从低到高的引入，不推荐从高到低的引入。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>解决jQuery多库共存的问题</title><script src="jquery-1.8.2.min.js"></script><script src="jquery-1.11.1.js"></script><script>/**解决多库共存方法1.当引入jQuery的多个版本库时，无论使用$还是jQuery，其实都是在使用最后一个引入的jQuery版本库，可以通过打印jQuery的版本号来确定（console.log($.fn.jquery);console.log(jQuery.fn.jquery);）2.如果你想放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库的话，可以使用$.noConflict()，然后你就可以通过调用$符号使用上一个jQuery版本库了，而当前这一个版本库你可以使用jQuery单词来调用3.如果你想放弃$符号与jQuery单词的使用权而改用其它自定义的单词时，可以使用var customer=$.noConflict(true);，然后当前这个jQuery版本库就能够通过调用customer单词来使用了，而$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存。4.jQuery版本库的多版本库的引入都是从低到高的引入，不推荐从高到低的引入。*///1.打印jQuery的版本号
//        console.log($.fn.jquery);//1.11.1 最后引入的jquery版本库//2.放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库
//        $.noConflict();
//        console.log($.fn.jquery);//1.8.2 $符号给 最后一个引入的jQuery版本库的上一个引入的jQuery版本库使用了
//        console.log(jQuery.fn.jquery);//1.11.1  jQuery单词还可以使用 ，可以用来调用最后一个引入的jQuery版本库//放弃$符号与jQuery单词的使用权而改用其它自定义的单词var customer= $.noConflict(true);console.log(customer.fn.jquery);//1.11.1console.log($.fn.jquery);//1.8.2console.log(jQuery.fn.jquery);//1.8.2//说明：$.noConflict(true)这种方式改变使用权的调用符号，让多个jQuery版本库共存//例如；$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，// 但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存</script>
</head>
<body></body>
</html>

15.JS扩展方法与JQuery扩展方法的区别

◆原生js使用原型的方式是：

object.prototype.functionName=function(){}

◆jQuery使用原型的方式是：

$.fn.functionName=function(){}

，其实都差不多，只不过前者是给对象扩展方法，后者是给伪数组扩展方法。

16.使用jQuery的插件来DIY：动态改变颜色、图片懒加载

◆动态改变颜色：jquery.color.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>解决jQuery的animate()无法改变颜色的问题（使用color插件）</title><style type="text/css">.box {width: 400px;height: 400px;/*border: 1px solid #000;*/background-color: black;margin:100px;}</style><script src="jquery-1.11.1.js"></script><script src="jquery.color.js"></script><script>$(function () {$("button:eq(0)").on("click",{}, function () {$(".box").animate({backgroundColor:"#f00"},2000);})$("button:eq(1)").on("click",{}, function () {$(".box").animate({backgroundColor:"#0f0"},2000);})$("button:eq(2)").on("click",{}, function () {$(".box").animate({backgroundColor:"#00f"},2000);})$("button:eq(3)").on("click",{}, function () {$(".box").animate({backgroundColor:"#fff"},2000);})$("button:eq(4)").on("click",{}, function () {$(".box").animate({backgroundColor:"#000"},2000);})})</script>
</head>
<body>
<button>变红色</button>
<button>变绿色</button>
<button>变蓝色</button>
<button>变白色</button>
<button>变黑色</button>
<div class="box">
</div>
</body>
</html>

◆图片懒加载：jquery.lazyload.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用jQuery的lazyload插件进行图片懒加载</title><style type="text/css">div {height: 2000px;}</style><script src="jquery-1.11.1.js"></script><script src="jquery.lazyload.js"></script><script>$(function () {//懒加载调用//使用插件：1.引包。(必须在jquery之下)   2.通过调用方法实现功能，而参数的不同，功能也可能不同。$(".lazy").lazyload();})</script>
</head>
<body>
<div></div>
<!--<img src="data:images/02.jpg">-->
<img class="lazy" data-original="images/02.jpg" width="640" height="480">
</body>
</html>

17.自己制作JQuery简单插件：

◆jquery的1.xx版本是支持IE678等低版本的浏览器的，而jquery的2.xx版本是不支持IE678等低版本的浏览器的

◆自己做的jquery插件.js

$(function () {/*设置颜色*/$.fn.setColor= function () {console.log(this);$(this).css({"background-color":"#a05"});}/*设置大小*/$.fn.setSize= function (size) {$(this).css({width:size,height:size})}
})

◆使用自己做的jQuery插件：原理就是先引入JQuery，然后给JQuery扩展方法，最后就是你直接调用自己给JQuery扩展的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用自己做的jQuery插件</title><style type="text/css">div {width: 300px;height: 300px;margin:50px;}</style><script src="jquery-1.11.1.js"></script><script src="19.自己做的jquery插件.js"></script><script>$(function () {//使用自己写的插件中的方法$("div").setColor();$("div").setSize(500);/**原生js使用原型的方式是：* object.prototype.functionName=function(){}，* jQuery使用原型的方式是：$.fn.functionName=function(){}，* 其实都差不多，只不过前者是给对象扩展方法，* 后者是给伪数组扩展方法。*/})</script>
</head>
<body>
<div></div>
</body>
</html>

JQuery使用及基础原理解析相关笔记（三）相关推荐

JQuery使用及基础原理解析相关笔记（一）
1.jquery ◆很强大,但是很臃肿,需要自己封装一个jquery,要用到jqery中哪些方法,就把原来jquery中的方法拿出来. ◆jquery有两大特点:链式编程.隐式迭代(遍历). 2.原生 ...
深入浅出图神经网络|GNN原理解析☄学习笔记（四）表示学习
深入浅出图神经网络|GNN原理解析☄学习笔记(四)表示学习文章目录深入浅出图神经网络|GNN原理解析☄学习笔记(四)表示学习表示学习表示学习的意义离散表示与分布式表示端到端学习基于重构损 ...
Java异常基础+原理解析+自定义异常
Java异常基础+原理解析 1.什么是异常呀? 程序中的异常就好比人生病了,即再程序的运行过程中.出现非正常的情况,导致jvm非正常终止终止异常的体系: 异常的的根类为java.lang.Throw ...
Macaca基础原理解析
导语前面几篇文章介绍了在Macaca实践中的一些实用技巧与解决方案,今天简单分析一下Macaca的基础原理.这篇文章将以前面所分享的UI自动化Macaca-Java版实践心得中的demo为基础,进行 ...
第一部份1：JMF基础原理与相关术语介绍。。。。快速了解JMF有什么相关内容
(注:本贴为方便自己可快速得知一书中英文段落所讲的主要内容是什么,并非给不懂英文的人看的,当然也可以作一个了解性的阅读) JMF 是一个应用程序编程接口,它可以让实时的多媒体信息合并到Java 应用程 ...
深入浅出之虚函数原理篇（笔记三）
上一节,我们讲到了虚函数,那么你知道虚函数是如何做到多态的吗? 虚函数是通过后期绑定,在执行时间接通过一张虚函数表,间接调用欲绑定的函数.表中的每一个元素都指向虚函数的地址.当然,编译器也会为类增加一 ...
rabbitmq 持久化_RabbitMQ原理与相关操作(三)消息持久化
现在聊一下RabbitMQ消息持久化: 问题及方案描述 1.当有多个消费者同时收取消息,且每个消费者在接收消息的同时,还要处理其它的事情,且会消耗很长的时间.在此过程中可能会出现一些意外,比如消息接收 ...
《CSS基础教程》读书笔记三
1.元素总宽度=容器宽度+padding+border; 2.对这些布局有所了解是一回事,真正实施布局是另外一回事,真正从头开始实施布局是完全掌握这些方法的唯一途径. 3.理智使用display:no ...
Nacos-注册中心原理解析
Nacos-注册中心原理解析一.注册中心二.Nacos注册中心原理解析 2.1 NamingService 2.2 NacosNamingService 2.2.1 NamingProxy 2.2 ...

JQuery使用及基础原理解析相关笔记（三）

JQuery使用及基础原理解析相关笔记（三）相关推荐

最新文章

热门文章