each 方法

　　$ ( selector).each(function( index,element) {  } );

　　 　　参数一表示当前元素在所有匹配元素中的索引号

　　　　参数二表示当前元素（DOM对象）

  1. prevAll("li") 同个父系中前边所有的li元素
  2. nextAll("li")同个父系后边所有的li元素
  1.   jQuery(function () {
  2.             //设置不一样的盒子透明度逐渐递增
  3.             $("ul li").each(function (index,element) {
  4.                 //console.log(index+"---"+element.tagName);
  5.                 $(element).css("opacity",(index+1)/10);
  6.             });
  7.         });

操作form表单：

　　jqipt.attr（“属性名”，属性值）

　　　　获取 jqipt.attr（“属性名”）；

　　　　添加类，jqipt.attr（“class”，“类名”）

　　　　移除属性 jqipt.removeAttr（“属性名”）

　　　　添加checked、selected、display 使用prop（“属性名”，“属性值”）

　　val( )方法

　　　   获取标签中的value的属性

　　　　$("input").val( ); 获取input的值

 　　　  $("input").val("赋值内容");
　　text( ) 方法获取文本值，不包含标签
　　　　$("div").text( ); 获取内容 
　　　　　　innerText( ); 不识别标签
　　　　　　innerHTML( );识别标签　　
　　　　　　.html( ) 识别标签
　　　　$("div").text( );

尺寸操作

　　获取宽高：

　　　　jq对象.height / width ( ); 只是内容的尺寸，不包括padding和margin和border

　　设置宽高：

　　　　jq对象.height ／width("200px" ) ;

　　　　px 可加可不加，不加不需要写双引号

坐标值操作：

　　offset( ).left / top ;距离页面顶端或左边的距离

　　position( ).left / top ; 距离最近的已定位的父系盒子的距离，获取的值和padding、margin无关

　　scrollLeft ／ Top（ ）；被卷曲的头部。 无参数则为获取，有参数则为赋值

事件绑定：

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

　　事件源.bind（“事件一  事件二”，function（）{ } );  可为多个触发事件绑定同一个方法

　　delegate（ “box","click mouseenter", function ( ) { } ); 特点：性能高，支持动态创建的元素

　　　　

  1. $(".parentBox").delegate("p", "click", function(){
  2.     //为 .parentBox下面的所有的p标签绑定事件
  3. });

　　on("事件1    事件2“，”事件源“，{ ( json串 ) },function() { } ） ;

　　

  1. $(selector).on(events,[selector],[data],handler);

给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点

语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）

// 第二个参数：selector, 执行事件的后代元素

// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用

// 第四个参数：handler，事件处理函数

$(document).on("click mouseenter",".box",{"name":111}, function (event) {
 alert(event.data.name);
 });

$(selector).on("click","span",function ( ) { } ;

// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件

事件解绑：

　　使用unbind、 undelegate方式解绑.   只解绑使用此方式绑定的

  1. $(selector).unbind(); //解绑所有的事件
  2. $(selector).unbind(“click”); //解绑指定的事件
  3. $( selector ).undelegate(); //解绑所有的delegate事件
  4. $( selector).undelegate( “click” ); //解绑所有的click事件

　　使用off（）解绑on方式绑定的事件

  1. $ (selector ).off( ) ; //解绑匹配元素的所有事件
  2. $ (selector ).off("click") ;// 解绑匹配元素的所有click事件
  3. $ (selector) .off(:click", " ** "; //解绑所有代理的click事件，元素本事的事件不会被解绑

事件触发

　　简单事件触发

　　　　$(selector).click ( ); // 触发click事件

　　trigger方法触发事件

　　　　$(selector).trigger("click");

　　triggerHander触发事件响应方法，不触发浏览器行为；比如（文本框获得焦点的默认行为）

　　　　$(selector).triggerHandler("focus");

　　

jQuery事件对象介绍

　　event.date

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX  鼠标相对于文档左部边缘的位置

event.target  触发事件源，不一定===this

event.stopPropagation()； 阻止事件冒泡

event.preventDefault();  阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码

隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

多库共存

　　

解决方式：

// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法

　　　　$.noConflict(); 　　放弃版本高的$的使用权,版本高的写在下面

　　　　

放弃两个符号的使用权，同时定义一个新的使用权
 var MrLv = $.noConflict(true);
 console.log($.fn.jquery);
 console.log(jQuery.fn.jquery);
 console.log(MrLv.fn.jquery);

jQueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

  1. 引入jQueryUI的样式文件
  2. 引入jQuery
  3. 引入jQueryUI的js文件
  4. 使用jQueryUI功能
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.  
  13.         .wrap {
  14.             width: 300px;
  15.             margin: 100px auto 0;
  16.         }
  17.  
  18.         table {
  19.             border-collapse: collapse;
  20.             border-spacing: 0;
  21.             border: 1px solid #c0c0c0;
  22.         }
  23.  
  24.         th,
  25.         td {
  26.             border: 1px solid #d0d0d0;
  27.             color: #404060;
  28.             padding: 10px;
  29.         }
  30.  
  31.         th {
  32.             background-color: #09c;
  33.             font: bold 16px "微软雅黑";
  34.             color: #fff;
  35.         }
  36.  
  37.         td {
  38.             font: 14px "微软雅黑";
  39.         }
  40.  
  41.         tbody tr {
  42.             background-color: #f0f0f0;
  43.         }
  44.  
  45.         tbody tr:hover {
  46.             cursor: pointer;
  47.             background-color: #fafafa;
  48.         }
  49.     </style>
  50.     <script src="jquery-1.11.1.js"></script>
  51.     <script>
  52.         $(function () {
  53.             //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
  54.             //需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定
  55.  
  56.             //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
  57.             //步骤：绑定事件，直接让下面的所有按钮和上面的按钮属性值一模一样
  58.             $("#j_cbAll").click(function () {
  59.                 //直接让下面的所有按钮和上面的按钮属性值一模一样
  60.                 $("#j_tb input:checkbox").prop("checked",$(this).prop("checked"));
  61.             });
  62.  
  63.             //需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定
  64.             $("#j_tb input:checkbox").click(function () {
  65.                 //判断，只有所有都背选定，上面的才被选定
  66.                 //技术点：带有checked属性的标签和checkbox个数一样多的时候
  67.                 if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
  68.                     //只有所有的都有checked属性，上面的才被选定
  69.                     $("#j_cbAll").prop("checked",true);
  70.                 }else{
  71.                     $("#j_cbAll").prop("checked",false);
  72.                 }
  73.             });
  74.  
  75.         })
  76.     </script>
  77. </head>
  78.  
  79. <body>
  80.     <div class="wrap">
  81.         <table>
  82.             <thead>
  83.                 <tr>
  84.                     <th>
  85.                         <input type="checkbox" id="j_cbAll"/>
  86.                     </th>
  87.                     <th>课程名称</th>
  88.                     <th>所属学院</th>
  89.                 </tr>
  90.             </thead>
  91.             <tbody id="j_tb">
  92.                 <tr>
  93.                     <td>
  94.                         <input type="checkbox"/>
  95.                     </td>
  96.                     <td>JavaScript</td>
  97.                     <td>前端与移动开发学院</td>
  98.                 </tr>
  99.                 <tr>
  100.                     <td>
  101.                         <input type="checkbox"/>
  102.                     </td>
  103.                     <td>css</td>
  104.                     <td>前端与移动开发学院</td>
  105.                 </tr>
  106.                 <tr>
  107.                     <td>
  108.                         <input type="checkbox"/>
  109.                     </td>
  110.                     <td>html</td>
  111.                     <td>前端与移动开发学院</td>
  112.                 </tr>
  113.                 <tr>
  114.                     <td>
  115.                         <input type="checkbox"/>
  116.                     </td>
  117.                     <td>jQuery</td>
  118.                     <td>前端与移动开发学院</td>
  119.                 </tr>
  120.             </tbody>
  121.         </table>
  122.     </div>
  123. </body>
  124.  
  125. </html>

表格全选和反选

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         @keyframes blink {
  14.             0%,
  15.             100% {
  16.                 opacity: 1
  17.             }
  18.             50% {
  19.                 opacity: 0
  20.             }
  21.         }
  22.  
  23.         @-webkit-keyframes blink {
  24.             0%,
  25.             100% {
  26.                 opacity: 1
  27.             }
  28.             50% {
  29.                 opacity: 0
  30.             }
  31.         }
  32.  
  33.         @-moz-keyframes blink {
  34.             0%,
  35.             100% {
  36.                 opacity: 1
  37.             }
  38.             50% {
  39.                 opacity: 0
  40.             }
  41.         }
  42.  
  43.         .wrap {
  44.             width: 1000px;
  45.             text-align: center;
  46.             margin: 100px auto 0;
  47.         }
  48.  
  49.         .wrap h1 {
  50.             font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  51.             font-weight: 300;
  52.         }
  53.  
  54.         .word {
  55.             font-weight: 700;
  56.         }
  57.  
  58.         .typed-cursor {
  59.             opacity: 1;
  60.             -webkit-animation: blink .7s infinite;
  61.             -moz-animation: blink .7s infinite;
  62.             animation: blink .7s infinite;
  63.             display: none;
  64.         }
  65.  
  66.         .saySection {
  67.             margin-top: 50px;
  68.         }
  69.  
  70.         .saySection input {
  71.             font-size: 30px;
  72.         }
  73.  
  74.         .saySection .txtSay {
  75.             padding-left: 10px;
  76.         }
  77.  
  78.         .saySection .btnSay {
  79.             display: inline-block;
  80.             padding: 0 20px;
  81.             cursor: pointer;
  82.         }
  83.     </style>
  84.     <script src="jquery-1.11.1.js"></script>
  85.     <script>
  86.         jQuery(function () {
  87.             //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
  88.             //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。
  89.  
  90.             //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
  91.             //步骤：
  92.             //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
  93.             //2.定时器。
  94.             //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
  95.             //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
  96.  
  97.             //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
  98.             var str = "红鲤鱼与绿鲤鱼与驴";
  99.             var arr =  str.split("");
  100.             var str2 = "";
  101.             var num = 0;
  102.             var timer = null;
  103.  
  104.             $(".typed-cursor").show();
  105.             //2.定时器。
  106.             timer = setInterval(function () {
  107.                 //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
  108.                 if(arr[num] === undefined){
  109.                     clearInterval(timer);
  110.                     $(".typed-cursor").hide();
  111.                 }else{
  112.                     //定义一个字符串用来接收
  113.                     str2 += arr[num];
  114.                     //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
  115.                     $(".word").text(str2);
  116.                     //索引值自增
  117.                     num++
  118.                 }
  119.             },200);
  120.  
  121.             //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容
  122.             $("#btnSay").click(function () {
  123.                 str = $("#inValue").val();
  124.                 $("#inValue").val("");
  125.                 arr =  str.split("");
  126.                 str2 = "";
  127.                 num = 0;
  128.                 //2.定时器。
  129.                 timer = setInterval(function () {
  130.                     //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
  131.                     if(arr[num] === undefined){
  132.                         clearInterval(timer);
  133.                         $(".typed-cursor").hide();
  134.                     }else{
  135.                         //定义一个字符串用来接收
  136.                         str2 += arr[num];
  137.                         //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
  138.                         $(".word").text(str2);
  139.                         //索引值自增
  140.                         num++
  141.                     }
  142.                 },200);
  143.             });
  144.  
  145.         });
  146.     </script>
  147. </head>
  148.  
  149. <body>
  150.  
  151.     <div class="wrap">
  152.         <h1>
  153.             You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
  154.         </h1>
  155.  
  156.         <div class="saySection">
  157.             <input type="text" id="inValue" class="txtSay"/>
  158.             <input type="button" value="Say" id="btnSay" class="btnSay"/>
  159.         </div>
  160.     </div>
  161.  
  162. </body>
  163. </html>

动态输入

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="jquery-1.11.1.js"></script>
  7.     <script>
  8.         $(function () {
  9.             //需求：在input中安回车，插入条光标跳转到下一个input
  10.             $("input").on("keyup", function (e) {
  11.                 if(e.keyCode === 13){
  12. //                    alert("您按了，回车键！");
  13.                     //跳转到下一行：下一个input获取插入条光标。
  14.                     //   focus();//js和jq中一模一样的方法
  15.                     $(this).next().next().focus();
  16. //                    $(this).next().next()[0].focus();
  17.                 }
  18.             });
  19.  
  20.             $("input").on("mouseenter", function (e) {
  21.                 //选定所有内容(能够输入内容的标签)
  22.                 $(this).select();
  23.             });
  24.         })
  25.     </script>
  26. </head>
  27. <body>
  28.     <input type="text" value="我是中国人！"/><br>
  29.     <input type="text" value="我是中国人！"/><br>
  30.     <input type="text" value="我是中国人！"/><br>
  31.     <input type="text" value="我是中国人！"/><br>
  32.     <input type="text" value="我是中国人！"/><br>
  33.     <input type="text" value="我是中国人！"/><br>
  34.     <input type="text" value="我是中国人！"/><br>
  35.  
  36. <div>nihao </div>
  37. </body>
  38. </html>

回车换行

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         .wrap {
  9.             width: 400px;
  10.             height: 400px;
  11.             margin: 100px auto 0;
  12.         }
  13.  
  14.         .wrap h1 {
  15.             text-align: center;
  16.         }
  17.  
  18.         .wrap div {
  19.             width: 400px;
  20.             height: 300px;
  21.             background: pink;
  22.             font-size: 30px;
  23.             text-align: center;
  24.             line-height: 300px;
  25.         }
  26.     </style>
  27.     <script src="jquery-1.11.1.js"></script>
  28.     <script>
  29.         $(function () {
  30.             //需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
  31.             //步骤：
  32.             //1.给document绑定keyup事件
  33.             //2.获取值，根据此值，给div和span上色和内容
  34.  
  35.             var div = $("#bgChange");
  36.             var span = $("#keyCodeSpan");
  37.  
  38.             //绑定事件
  39.             $(document).keyup(function (e) {
  40.                 //调用方法
  41.                 setColor(e.keyCode);
  42.             });
  43.  
  44.             function setColor(aaa){
  45.                 //alert(e.keyCode);
  46.                 //2.获取值，根据此值，给div和span上色和内容
  47.                 switch (aaa){
  48.                     case 80:
  49.                         //修改内容pink
  50.                         setEle("pink",aaa);
  51.                         break;
  52.                     case 66:
  53.                         //修改内容blue
  54.                         setEle("blue",aaa);
  55.                         break;
  56.                     case 79:
  57.                         //修改内容orange
  58.                         setEle("orange",aaa);
  59.                         break;
  60.                     case 82:
  61.                         //修改内容red
  62.                         setEle("red",aaa);
  63.                         break;
  64.                     case 89:
  65.                         //修改内容yellow
  66.                         setEle("yellow",aaa);
  67.                         break;
  68.                     default :
  69.                         alert("系统没有设置该颜色！");
  70.                 }
  71.  
  72.                 function setEle(a,b){
  73.                     div.css("background-color",a);
  74.                     span.text(b);
  75.                 }
  76.  
  77.             }
  78.  
  79.             //1.给document绑定keyup事件
  80. //            $(document).keyup(function (e) {
  81. //                //alert(e.keyCode);
  82. //                //2.获取值，根据此值，给div和span上色和内容
  83. //                switch (e.keyCode){
  84. //                    case 80:
  85. //                        //修改内容pink
  86. //                        div.css("background-color","pink");
  87. //                        span.text(e.keyCode);
  88. //                        break;
  89. //                    case 66:
  90. //                        //修改内容blue
  91. //                        div.css("background-color","blue");
  92. //                        span.text(e.keyCode);
  93. //                        break;
  94. //                    case 79:
  95. //                        //修改内容orange
  96. //                        div.css("background-color","orange");
  97. //                        span.text(e.keyCode);
  98. //                        break;
  99. //                    case 82:
  100. //                        //修改内容red
  101. //                        div.css("background-color","red");
  102. //                        span.text(e.keyCode);
  103. //                        break;
  104. //                    case 89:
  105. //                        //修改内容yellow
  106. //                        div.css("background-color","yellow");
  107. //                        span.text(e.keyCode);
  108. //                        break;
  109. //                    default :
  110. //                        alert("系统没有设置该颜色！");
  111. //                }
  112. //            });
  113.         })
  114.     </script>
  115. </head>
  116.  
  117. <body>
  118.  
  119.     <div class="wrap">
  120.         <h1>按键改变颜色</h1>
  121.         <div id="bgChange">
  122.             keyCode为：
  123.             <span id="keyCodeSpan">80</span>
  124.         </div>
  125.     </div>
  126.  
  127. </body>
  128. </html>

按键变色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>五角星评分案例</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.  
  12.         .comment {
  13.             font-size: 40px;
  14.             color: #ff3100;
  15.         }
  16.  
  17.         .comment li {
  18.             float: left;
  19.             cursor: pointer;
  20.         }
  21.  
  22.         ul {
  23.             list-style: none;
  24.         }
  25.     </style>
  26.     <script src="jquery-1.11.1.js"></script>
  27.     <script>
  28.         $(function () {
  29.             var wjx_none = '☆'; // 空心五角星
  30.             var wjx_sel = '★'; // 实心五角星
  31.  
  32.             //需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
  33.             $(".comment li").on("mouseenter", function () {
  34.                 //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
  35. //                $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
  36. //                $(this).nextAll("li").text(wjx_none);
  37.                 $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
  38.             });
  39.  
  40.             $(".comment li").on("mouseleave", function () {
  41.                 //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
  42.                 if($("li.current").length === 0){
  43.                     $(".comment li").text(wjx_none);
  44.                 }else{
  45.                     //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
  46.                     $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
  47.                 }
  48.             });
  49.  
  50.             //需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
  51.             $(".comment li").on("click", function () {
  52.                 //点击哪个li给他加一个类名。清空其他所有的li的类名
  53.                 $(this).attr("class","current").siblings("li").removeAttr("class");
  54.             });
  55.  
  56.         });
  57.     </script>
  58. </head>
  59.  
  60. <body>
  61.  
  62.     <ul class="comment">
  63.         <li>☆</li>
  64.         <li>☆</li>
  65.         <li>☆</li>
  66.         <li>☆</li>
  67.         <li>☆</li>
  68.     </ul>
  69.  
  70. </body>
  71. </html>

五角星案例

 
 
 
 
 
 
 
 
 
 
 

jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存的更多相关文章

  1. jQuery常用属性方法大全 attr(),val()

    @@@@属性篇: 写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统.到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的 ...

  2. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  3. jQuery事件之解绑事件

    语法: $(selector).unbind([eventType][,handler(eventObject)]); 返回值:jQuery 参数解释: eventTypey:类型:String以后包 ...

  4. jquery绑定事件,解绑事件

    unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提 ...

  5. jquery移除元素时会自动解绑事件

    .html() When .html() is used to set an element's content, any content that was in that element is co ...

  6. JQuery事件绑定bind、live、on、trigger

    one 作用:只触发一次,并在触发后失效,触发时会产生时间冒泡. 语法:$(selector).one(event,data,function) 例子: $(item).one("click ...

  7. 关于jquery中的事件绑定bind（）和live（）

    live可以说是bind是方法的变种. 二者的主要区别就是live方法的作用机理是事件委托,live方法的作用机理是将事件绑定DOM的根节点上. live方法的处理机制就是把事件绑定在DOM树的根节点 ...

  8. 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. jQuery相关方法8-----解绑事件

    一.解绑事件方法unbind() 用什么方式绑定的事件,最好用对应的方式解绑事件 unbind("事件名字")括号里写上事件名字,就会解除这个事件 unbind()括号里没有参数就 ...

随机推荐

  1. k8s学习02-----kubeadm部署k8s

    机器规划 系统配置 三台机器都执行 1.关闭selinux及firewalld sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/selinux ...

  2. GooglePlay新版排行榜接入

    新版本的GMS的api和老版本的有很大的差异,刚接了一下,在这里留一个记号,以便查阅:判定是否已经登录 private static boolean isSignedIn(Cocos2dxActivi ...

  3. Java小白进阶之值传递-引用传递

    class ClassA{ int value;//成员变量 } public class TestClassA{ public static void main(String args[]){ in ...

  4. Spring系列（二）：Spring IoC应用

    一.Spring IoC的核心概念 IoC(Inversion of Control  控制反转),详细的概念见Spring系列(一):Spring核心概念 二.Spring IoC的应用 1.定义B ...

  5. java多线程基础（一）--sleep和wait的区别

    sleep和wait的区别有: 1.这两个方法来自不同的类分别是Thread和Object: 2.最主要是sleep方法没有释放锁,而wait方法释放了锁,使得线程可以使用同步控制块或者方法: 3.w ...

  6. Hibernate的执行流程

    Hibernate框架的工作流程 1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件 2.由hibernate.cfg.xml中的&l ...

  7. Mysql超详解

    Mysql超详解 一.命令框基本操作及连接Mysql 找到Mysql安装路径,查看版本 同时按快捷键win+R会弹出一个框,在框中输入cmd 点击确定后会出现一个黑框,这是命令框,我们的操作要在这命令 ...

  8. Java 内存模型和 JVM 内存结构真不是一回事

    这两个概念估计有不少人会混淆,它们都可以说是 JVM 规范的一部分,但真不是一回事!它们描述和解决的是不同问题,简单来说, Java 内存模型,描述的是多线程允许的行为 JVM 内存结构,描述的是线程 ...

  9. 几图理解BeautifulSoup

  10. java多线程----悲观锁与乐观锁

    java多线程中悲观锁与乐观锁思想 一.悲观锁 总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会阻塞直到它拿到锁(共享资源每次只给一个线 ...