由于是一边看书一边练习，所以干把笔记写在html文档中。想看的同学可以复制到一个html文档中，结合浏览器查看。不得不说《锋利的jQuery》是本好书，建议好好看看。尊重知识产权，请购买正版书籍。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>锋利的jQuery</title> 6 <style type="text/css"> 7 * { margin: 0; padding: 0; list-style: none; } 8 body { background: #f5f5f5; font-family: "Microsoft Yahei"; } 9 .red { color: red; } 10 i.xing { color: red; margin-right: 10px; } 11 .wrap {margin-bottom:200px; padding: 0 20px; } 12 h1{ width: 100%; height: 60px; line-height: 60px; text-align: center; color: #333; background: #d6d6d6; } 13 h3{ height: 36px; line-height: 36px; } 14 h4 { height: 24px; line-height: 24px; padding-left: 20px; } 15 h5{ height: 20px; line-height: 20px; padding-left: 30px; } 16 p{ text-indent: 2em; line-height: 1.5em; } 17 </style> 18 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 19 </head> 20 21 <body> 22 <h1>jQuery</h1> 23 <div class="wrap"> 24 <div class="chapterOne"> 25 <h3>一、认识jQuery</h3> 26 <p>在html文档中的head标签中，用一个script标签引入jQ.min.js,然后在html文档的任意位置书写script标签，在script内部书写jQ的入口函数，$(fucntion(){jQuery代码写在这里})，入口函数还可以是$(document).ready(function(){})。jQ的入口函数可以书写多个，而且会被按照书写顺序一一执行；而jS只能书写一个window.onload(),因为书写多个的时候，只有最后一个会被执行，其它的将会被忽略。</p> 27 <h4>DOM对象对象与jQuery</h4> 28 <h5>1、DOM、DOM元素、DOM对象（DOM）</h5> 29 <p>DOM(Document Object Model,文档对象<b>模型</b>)，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过 JavaScript，可以重构整个 HTML 文档，可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。</p> 30 <p>DOM元素可以认为是这个模型的节点，如p、div等标签都可以看作是DOM元素。</p> 31 <p>而用JavaScript的方法获得DOM元素的方式得到的值可以认为是DOM对象。var t = document.getElementsById(#name01);这样t就是一个DOM对象。</p> 32 <h5>2、jQuery对象</h5> 33 <p>jQuery对象就是通过Jquery包装后DOM对象后产生的对象；例如：$('.footer')就是一个jQ对象</p> 34 <h5>3、DOM对象与jQ对象的相互转换</h5> 35 <p>jQuery对象不能使用DOM中的方法，DOM对象不能使用jQurey中的方法。所以当jQuery对象要使用DOM中的方法，或DOM对象要使用jQuery中的方法时，就要在jQuery对象和DOM对象之间进行转换。</p> 36 <h5>将jQ对象转换为DOM对象：</h5> 37 <p>var rrr = $('.name01') // jQ对象</p> 38 <p>方法1：var sss = rrr[0] // 转换成了DOM对象</p> 39 <p>方法2：var sss = rrr.get(0) //转换成了DOM对象</p> 40 <h5>将DOM对象转换为jQ对象</h5> 41 <p>对于一个DOM对象只要用$()将其包含起来，即可将其转换为jQ对象。</p> 42 <p>var ttt = document.getElementById('#name01'); // 这是一个DOM对象</p> 43 <p>var xxx = $('ttt'); // 已转换成jQ对象</p> 44 <h5 style="padding: 10px;"><i class="xing">*</i>示例：用DOM对象和jQuery对象去操作</h5> 45 <div style="padding-left: 40px;"> 46 <label><input type="checkbox" id="ckbx">我已同意并阅读协议</label> 47 </div> 48 </div> 49 <div class="chapterTwo"> 50 51 <h3>二、jQuery选择器</h3> 52 <h5>当html某个节点不存在时，用JavaScript去写代码会报错，而用jQuery却不会报错；</h5> 53 <p>document.getElementById('ttt').style.color = "red"; 如果此时#ttt已被删除，程序会报错。</p> 54 <p>必须if(document.getElementById('ttt')){document.getElementById('ttt').style.color = "red";}才不会报错。</p> 55 <p>但是如果用$('#ttt').css('color','red');即使#ttt被删除，程序也不会报错；</p> 56 <h4>2.1、基本选择器</h4> 57 <p>$('#name01') 选择id为name01的元素 , </p> 58 <p>$('.name02') 选择类名为.name02的元素 ,</p> 59 <p>$('div,p,span') 按照标签名选择元素选择 ,</p> 60 <p>$('p.red')可以标签名与类名进行选择</p> 61 <p>$(*) 用通配符选择所有元素 ，</p> 62 <h4>2.2、层次选择器</h4> 63 <p>$('div span') 可以结合后代选择器进行选择，选择div下所有的后代（不止是子代）span；注意单引号的位置</p> 64 <p>$('div>span') 只选择div下所有的子代span；注意单引号的位置</p> 65 <p>$('.one + .ttt'),选择.one后面的名为ttt元素的同级元素，也是集合；注意单引号的位置</p> 66 <p>$('.xxx~siblings'),选择.xxx后的所有siblings元素；注意单引号的位置</p> 67 <h5>可以用prev（）与next（）方法来进行更方便的选择；</h5> 68 <p>$('.one').next('yyy')选择.one后的平级的</p> 69 <h5>示例：next能否选择不是紧临的平级元素</h5> 70 <ul class="test_next" style="margin-left: 40px;"> 71 <li class="name01">ttt</li> 72 <li class="name02">ttt</li> 73 <li class="name03">ttt $('.test_next .name02').next().css('color','red'); 起作用</li> 74 <li class="name04">ttt</li> 75 <li class="name05">ttt $('.test_next .name02').next('.name05').css('color','red');i 不起作用</li> 76 <li class="name06">ttt</li> 77 <li class="name07">ttt</li> 78 <li class="name08">ttt $('.test_next .name05').nextAll('li').css('color','green');</li> 79 </ul> 80 <h4>2.3、过滤选择器</h4> 81 <h5>2.3.1基本过滤选择器</h5> 82 <p>$('div:first'),选取所有div中的第一个div；</p> 83 <ul class="test_class" style="padding-left: 40px;"> 84 <li class="myLi">text1,$('.myLi:first').css('color','red');</li> 85 <li class="myLi">text2</li> 86 <li class="myLi">text3</li> 87 <li class="myLi">text4</li> 88 <li class="myLi">text5</li> 89 </ul> 90 <p>$('div:last'),选取所有div中的最后一个div；</p> 91 <p>$('div:not(.name01)'),注意.name01并不用引号包围；</p> 92 <ul class="not_test" style="padding-left: 40px;"> 93 <li class="name001">text text text </li> 94 <li class="name002">text text text </li> 95 <li class="name003">text text text </li> 96 <li class="name004">text text text </li> 97 <li class="name005">text text text,$('.not_test li:not(.name005)').css('color','blue'); </li> 98 </ul> 99 <p>$('li:odd'),选择奇数序号的li元素，计数是从0开始的</p> 100 <p>$('li:even'),选择偶数序号的li元素，计数是从0开始的</p> 101 <p>$('li:gt(2)'),选择索引大于2的元素，不包含索引是2的元素</p> 102 <p>$('li:lt(5)'),选择索引小于5的元素，不包含索引是5的元素</p> 103 <p>$(':header')，选取所有的标题，h1-h6</p> 104 <p>$('div:animated'),选择正在运行动画的div</p> 105 <h5>2.3.2内容过滤选择器</h5> 106 <p>$('div:contain("我")')，选取含有文本“我”的div</p> 107 <p>$('div:empty'),选择没有子元素且没有文本的div，文本也算作是元素</p> 108 <p>$('div:has('p')'),选取含有p子元素的div元素</p> 109 <ul style="margin-left: 40px;"> 110 <li class="test_has"><span class="in_has">tttt$('.test_has:has(.in_has) ').css('color','red');</span></li> 111 <li>ttt</li> 112 <li>ttt</li> 113 <li>ttt</li> 114 <li>ttt</li> 115 </ul> 116 <p>$('div:parent'),选取含有子元素的div，文本也算作是元素，所以只包含文本也是可以被选中的</p> 117 <h5>2.3.3可见性过滤选择器</h5> 118 <p>$('div:visible'),选择所有可见的div</p> 119 <p>$(':hidden'),选取所有不可见元素，其中包括input应用了type="hidden",应用了display:none的元素，以及应用了visiblity: hidden的元素；</p> 120 <h5>2.3.4属性过滤选择器</h5> 121 <p>$('div[id]'),$('p[class]'),选择含有id属性的div，选择含有class属性的div</p> 122 <p>$('div[title=ttt]'),选取含有title属性且值为ttt的div</p> 123 <p>$('div[title!=ttt]'),选取title值不等于ttt的div，不含title的div也会被选中</p> 124 <p>$('div[title^=ttt]'),选取含有title属性且title属性值以ttt开始的div</p> 125 <p>$('div[title$=ttt]'),选取含有title属性且title属性值以ttt结束的div</p> 126 <p>$('div[title*=ttt]',选取含有title属性且title属性值含有ttt的div)</p> 127 <p>$('div[attr01][attr02][attr03][attr04]'),用多个属性缩小div可选择的范围，因为多个属性是且的关系</p> 128 <h5>2.3.5子元素过滤选择器</h5> 129 <p>$('div ul li span:nth-child(index/even/odd/equation)'),选取每个父元素（li）的第index个元素/偶数元素/奇数元素（span）。这样选出来的是一个集合（每个）;要注意:nth-child(index)是从1开始计数的</p> 130 <ul class="nth_test" style="margin-left: 40px;"> 131 <li> 132 <span>text text text </span> 133 <span>text text text</span> 134 <span>text text text $('.nth_test li span:nth-child(2)').css('color','red');</span> 135 <span class="red">每个li下的第二个span，li是span的父元素</span> 136 </li> 137 <li> 138 <span>text text text</span> 139 <span>text text text</span> 140 <span>text text text</span> 141 </li> 142 <li> 143 <span>text text text</span> 144 <span>text text text</span> 145 <span>text text text</span> 146 </li> 147 <li> 148 <span>text text text</span> 149 <span>text text text</span> 150 <span>text text text</span> 151 </li> 152 </ul> 153 <p>$('div ul:first-child'),选取每个父元素（div）下的第一个元素（第一个ul）；</p> 154 <p>$('div ul:last-child'),选取每个父元素（div）下的最后一个元素（最后一个ul）；</p> 155 <p>$('ul li:only-child'),如果ul只有一个子元素是li，那么将会被匹配</p> 156 <h5>:nth-child详细例举：</h5> 157 <p>:nth-child(even);选取每个父元素下索引值是偶数的元素</p> 158 <p>:nth-child(odd);选取每个父元素下索引值是奇数的元素</p> 159 <p>:nth-child(2);选取每个父元素下索引值是2的元素</p> 160 <p>:nth-child(3n);选取每个父元素下索引值是3n的元素，n从0开始，0,3,6,9...,:nth的计数是从1开始的</p> 161 <p>:nth-child(3n+1);选取每个父元素下索引值是(3n+1)的元素，n从0开始，1,4,7,10...，nth的计数是从1开始的</p> 162 <p class="nth_test_2"> 163 <span>1</span> 164 <span>2</span> 165 <span>3</span> 166 <span>4</span> 167 <span>5</span> 168 <span>6</span> 169 <span>7</span> 170 <span>8</span> 171 <span>9</span> 172 <span>10</span> 173 <span>11</span> 174 <span>12</span> 175 <span>13</span> 176 <span>14</span> 177 <span>15</span> 178 <span>16</span> 179 <span>17</span> 180 <span>18</span> 181 <span>19</span> 182 <span>20</span> 183 <span>$('.nth_test_2 span:nth-child(3n)').css('color','red');</span> 184 <span>$('.nth_test_2 span:nth-child(3n+1)').css('color','green');</span> 185 </p> 186 <h5>2.3.6表单对象属性过滤选择器</h5> 187 $('#form01:enabled'),选取id是form01的表单内的所有的可用元素； 188 $('#form01:disabled'),选取id是form01的表单内的所有的不可用元素； 189 $('input:checked'),选取所有的（单选框、复选框被选中的）被选中的input元素； 190 $('select:selected'),选取所有被选中的选元素； 191 <h4>2.4表单选择器</h4> 192 <p>$(':input'),选中所有的input,select,textarea,button标签元素</p> 193 <p>$(':text'),选取所有的单行文本，</p> 194 <p>$(':password'),选取所有的密码框，</p> 195 <p>$(':radio'),选取所有的单选框，</p> 196 <p>$(':checkbox'),选取所有的复选框，</p> 197 <p>$(':submit'),选取所有的提交按钮，</p> 198 <p>$(':image'),选取所有的图像按钮，</p> 199 <p>$(':reset'),选取所有的重置按钮，</p> 200 <p>$(':button'),选取所有的按钮，</p> 201 <p>$(':file'),选取所有的上传域，</p> 202 <p>$(':hidden'),选取所有的不可见元素，</p> 203 <h4>2.5特殊符号注意事项</h4> 204 <p>要注意空格，$('.name01 :hidden')表示的是class为name01内的隐藏元素，而$('name01:hidden')表示的是隐藏的类名为class的元素</p> 205 <h4>2.6小知识积累</h4> 206 <p>if (('.name01').is(':visible')){执行代码};判断.name01可见时，要执行的代码</p> 207 <h4>2.6选择器中的注意对象</h4> 208 <h5>2.6.1当选择器中含有特殊符号时</h5> 209 <p>当选择器中含有'.'、'#'、'('、'['符号时，要用转义字符'\'将其转义，例如 $('#b#f')是不正确的，转义成$('#db\#f'),$('#df[1]')不正确，转义成$('#df\[1\]')</p> 210 <h5>2.6.2选择器中含有空格</h5> 211 <p>$('.box :hidden')选中的是类名为box的盒子下的隐藏元素，而$('.box:hidden')选中的是类名为box的隐藏元素</p> 212 213 <p></p> 214 215 </div> 216 <div class="chapterThree"> 217 <h3>三、jQurey中的DOM操作</h3> 218 <h4>3.1、DOM操作的分类</h4> 219 <p>分为DOM Core，HTML-DOM，CCS_DOM</p> 220 <h5>3.1.1DOM Core</h5> 221 <p>getElementById(),getElementsByTagName(),getAttribute(),setAttribute(),都是DOM Core的组成部分，document.getElementById('#name001')获取某元素,element.getAttribute('src')获取某元素的src属性</p> 222 <h5>3.1.2HTML-DOM</h5> 223 <p>document.forms提供一个forms对象,element.src获取某元素的src属性；HTML_DOM只能用在用来处理web文档</p> 224 <h5>3.1.3CSS-DOM</h5> 225 <p>CSS-DOM是针对CSS的操作，JavaScript中CSS-DOM的主要作用是获取和设置style的各种属性，如element.style.color='red';</p> 226 <h4>3.2jQurey中的DOM操作</h4> 227 <h5>3.2.1查找节点</h5> 228 <h5>1、查找元素节点</h5> 229 <p>var pp = $('ul li:eq(0)');获取ul下的第一个li</p> 230 <h5>2、查找属性节点</h5> 231 <p>var tit = $('img').attr('title')，获取img的title属性</p> 232 <h5>3.2.2、创建节点</h5> 233 <h5>1、创建元素节点，格式$('html')</h5> 234 <p>格式$('html')中的html的写法与html文档中的写法一致。且无论html中的内容在多复杂，只要确保和html文档中的写法一致即可。创建两个li节点，var li01 = $('《li>text01《/li》')，var li02 = $('《li>text02《/li》')。要注意这样动态创建的元素不会自动添加到html文档中，要用append等方法将其添加到html文档中；另外，在创建新元素时，要使用严格的xhtml，并确保用小写字母写标签，而且标签是完整封闭的。</p> 235 <h5>2、创建文本节点</h5> 236 <p>var li01 = $('《li>text01《/li》')，就是创建含有文本内容的元素；与上同；</p> 237 <h5>3、创建属性节点</h5> 238 <p>var li01 = $('《li title="text01">text01《/li》'),即创建带有title属性为text01的节点。</p> 239 <h5>4、添加节点</h5> 240 <img src="img/001.png" alt="" /> 241 <img src="img/002.png" alt="" /> 242 <img src="img/003.png" alt="" /> 243 <img src="img/004.png" alt="" /> 244 <img src="img/005.png" alt="" /> 245 <h5>5、克隆节点</h5> 246 <p>$(this).clone(true).appendTo('.test_clone');带有true的clone()复制出来的节点也是可以复制的，如果不带true，复制出来的节点是不可以复制的。在clone()中传递一个参数true，它的含义是复制元素的同时，复制元素中所绑定的事件，即this有什么事件，复制出来的元素也带有这个事件。</p> 247 <ul class="test_clone"> 248 <li>CLICK ME</li> 249 </ul> 250 <h5>6、替换节点</h5> 251 <img src="img/009.png" alt=""> 252 <h5>7、包裹节点</h5> 253 <h5>3.2.8、属性操作</h5> 254 <h5>1、获取属性与修改属性</h5> 255 <p>$('p').attr('title'),获取attr的title属性，$('p').attr('title','这是p标签的title'),修改p标签的title属性；如果要修改或设置多个属性，可以用如下的格式去设置$('img').attr({'title':'这是title','alt':'text text','src':'url()'})</p> 256 <h5>2、删除属性</h5> 257 <p>$('p').removeAttr('title');删除p标签的attr属性</p> 258 <h5>3.2.9样式操作</h5> 259 <h5>1、获取样式与设置样式</h5> 260 <p>$('p').attr('class','name01'),这们就把p标签的class属性设置为name01，会把原来的类名删除。</p> 261 <h5>2、追加样式</h5> 262 <p>$('p').addClass('name01'),这样是在原来样式的基础上增添一个类名，不删除原来的样式</p> 263 <h5>3、移除样式</h5> 264 <p>$('p').removeClass('name01 name02'),同时移除name01 与 name02 这两个样式</p> 265 <p>$('p').removeClass('name03').removeClass('name04');同时移除name03 name04</p> 266 <p>$('p').removeClass();移除p标签的所有类名</p> 267 <h5>4、切换样式</h5> 268 <h5>1)toggle方法</h5> 269 <p>toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。当指定元素被点击时，在两个或多个函数之间轮流切换。如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。<span class='red'>$(selector).toggle(function1(),function2(),functionN(),...)</span></p> 270 <h5>2)toggleClass()</h5> 271 <p>$('p').toggleClass('name00'),如果p标签有类名name00则删除类名name00，如果p标签没有类名name00，则添加类名name00.</p> 272 <h5>5、判断是否含有某个样式</h5> 273 <p>$('p').hasClass('name01')</p> 274 <p>$('p').is('.name01'),注意这种方法的类名前要加上一个点‘.’，其实hasClass在jQ内部调用的也是is('.name01')这种方法,只不过可读性高。</p> 275 <h5>3.2.10获取与设置html、文本和值</h5> 276 <h5>1)html()方法，可用于html，xhtml，但不能用于xml</h5> 277 <p>$('p').html();获取p标签内部的html内容；$('p').html('tttteeeexxxxttttt');将p标签内的文本修改为tttteeeexxxxttttt；html()内部还可以插入标签。$('p').html('《span》text text 《/span》')</p> 278 <h5>2)text()方法，可用于html与xml</h5> 279 <p>用来获取与设置元素的文本内容。$('p').text('text will be written').JavaScript的innerHtml在fire fox下不能运行，但是text（）方法兼容所有浏览器。</p> 280 <h5>3)val()方法用来获取与设置元素的值。</h5> 281 <p>文本框、下拉列表、单选框都可以返回其值，如果元素是多选，则返回一个包含所有选项值的数组。如果是有多个选项，要用数组的形式去赋值，即使要赋一个值，也要用数组的形式。$(':checkbox').val(['bbb','ccc']);$(':radio').val(['yyy']);// 注意必须用数组的方式去命名 282 </p> 283 <h5>示例</h5> 284 <p>$('.select01').val('333333');</p> 285 <p>$('.select02').val(['555555','777777']);</p> 286 <p>$(':checkbox').val(['bbb','ccc']);</p> 287 <p>$(':radio').val(['yyy']);// 注意必须用数组的方式去命名</p> 288 <select class="select01" > 289 <option>111111</option> 290 <option>222222</option> 291 <option>333333</option> 292 <option>444444</option> 293 </select> 294 <select class="select02" multiple="multiple"> 295 <option>555555</option> 296 <option>666666</option> 297 <option>777777</option> 298 <option>888888</option> 299 </select> 300 <input type="checkbox" value="aaa">aaa 301 <input type="checkbox" value="bbb">bbb 302 <input type="checkbox" value="ccc">ccc 303 <input type="radio" value="xxx">xxx 304 <input type="radio" value="yyy">yyy 305 <input type="radio" value="zzz">zzz 306 <h5>3.2.11遍历节点</h5> 307 <h5>1)children()方法，只考虑子元素，而不考虑其它后代元素</h5> 308 <p>$('p').dhildren(),选中所有的子元素</p> 309 <h5>2)find()方法，匹配所有后代元素，可以添加类名、标签名等进行筛选。$('div').find('span');</h5> 310 <p>$('p').children('.name01'),选中p下所有的类名为name01的元素</p> 311 <h5>3)next()方法，用于匹配元素后面紧邻的同辈元素，$('p').next();</h5> 312 <h5>4)prev()方法，用于匹配元素前面紧邻的同辈元素，$('p').prev();</h5> 313 <h5>5)siblings()方法，用于匹配除了当前元素的所有同辈元素，$('p').siblings();可以添加类名用于筛选，$('p').siblings('.name01')</h5> 314 <h5>6)parent()方法，用于匹配直接父元素，不匹配其它祖先</h5> 315 <h5>7)parents（）方法，用于匹配多级祖先元素，不限于父元素。可以用类名、标签名进行筛选。$（'p').parents('.kkk'),只匹配类名为kkk的祖先元素。</h5> 316 <h5>8)$('div p').first()选择div下的第一个p元素</h5> 317 <h5>9)$('div p').last()选择div下的最后一个p元素</h5> 318 <h5>10)$('div p').not('.name01'),匹配div下类名不为name01的p元素</h5> 319 <h5>11)$('div p').eq(3),匹配div下第四个p元素。注意eq()的序数是从0开始的。</h5> 320 <h5>12)$('div p').filter('.name01'),匹配div下类名为name01的p元素</h5> 321 <h5>3.2.12、CSS-DOM操作</h5> 322 <p>$('p').css('color');获取p标签的color属性；</p> 323 <p>$('p').css('color','red');设置p标签的颜色。</p> 324 <p>$('p'),css({'color':'red','background':'#f5f5f5'}),设置多个属性</p> 325 <img src="img/11.png" alt=""> 326 <img src="img/12.png" alt=""> 327 <img src="img/13.png" alt=""> 328 329 330 331 332 333 </div> 334 <div class="chapterFour"> 335 <h3>四、jQuery动画与事件</h3> 336 <h4>1、jQuery入口函数简写方式</h4> 337 <p>$(fucntion(){jQuery代码}),$().ready(fucntion(){jQuery代码}),$(document).ready(function(){jQuery代码}),都是jQuery的入口函数，而且jQuery可以写多个入口函数，且多个入口函数会按照顺序依次执行。jS只能写一个入口函数，如果写多个，后写的会把先写的覆盖掉。</p> 338 <p>this是JavaScript中携带行为的DOM元素，要用$(this)让其变成jQ元素才能用jQuery的方法。</p> 339 <h4>2、事件冒泡：当父元素与子元素绑定了相同的事件时，会发生事件冒泡：当触发子元素的事件时，父元素的事件也会被触发。</h4> 340 <p class="red">处理方法是给function()一个参数，event或e(非必须,也可以任意命名)，然后用e.sotpPropagation();或return false;处理。</p> 341 <p>jQuery对事件监听函数,都会默认传递一个参数,一般命名为event或e(非必须,也可以任意命名)。这就是function(e)或function(e)的来源。与Flex类似,JavaScript中的事件也同样存在,捕获--触发--冒泡 三个节点.比较常见的情况是,在子DIV触发事件时,如果父DIV也监听同类事件,那么也会一起触发,并向上冒泡 342 jQuery对事件监听函数,都会默认传递一个参数,一般命名为event或e(非必须,也可以任意命名)e,event参数中支持下列属性:</p> 343 <p class="red">event.stopPropagation(); 停止事件冒泡的方法 </p> 344 <p class="red">event.preventDefault(); 阻止默认行为--如超链接的跳转更简单的方式:</p> 345 <p class="red">return false,停止冒泡并阻止默认行为。</p> 346 <p>event.type ---事件的类型,如click</p> 347 <p>event.target---事件的html元素对象 </p> 348 <p>event.relatedTarget() --如在mouseover事件触发时,相关的元素,如另外一个mouseout元素</p> 349 <p>event.pageX()/event.pageY() --相对于页面的x,y坐标</p> 350 <p>event.which() --获取与事件相关的键盘或鼠标的按键值</p> 351 <p> event.metaKey()--判断事件是否包含ctrl按键 </p> 352 <p>event.originalEvent()--指向原始的事件对象</p> 353 <p>JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation()方法; $("#div1").mousedown(function(event){event.stopPropagation();});</p> 354 <p>方式二：return false方法;$("#div1").mousedown(function(event){ 355 return false; 356 });</p> 357 <div class="propagation_div" style=" 500px; height: 300px; background: #f55;"> 358 <div class="propagation_div_2" style=" 300px; height:200px; background: #55f;"> 359 <div class="propagation_div_3" style=" 100px; height:100px; background: #5f5;"></div> 360 </div> 361 </div> 362 <p class="red">注意停止冒泡要写在每个要停止冒泡的函数内部。</p> 363 364 </div> 365 366 367 </div> 368 <script type="text/javascript"> 369 $(function(){ 370 //用DOM或jQuery去判断 371 var ckbx = document.getElementById('ckbx'); 372 var $ckbx = $('#ckbx'); 373 $ckbx.click(function() { 374 /*if(ckbx.checked){ 375 alert('DOM'); 376 }*/ 377 if($ckbx.is(":checked")){ 378 alert("jQuery"); 379 } 380 }); 381 382 //选择器测试 383 $('.test_next .name02').next().css('color','red'); 384 $('.test_next .name02').next('.name05').css('color','red'); 385 $('.test_next .name05').nextAll('li').css('color','green'); 386 $('.not_test li:not(.name005)').css('color','blue'); 387 $('.myLi:first').css('color','red'); 388 $('.test_has:has(.in_has) ').css('color','red'); 389 $('.nth_test li span:nth-child(2)').css('color','red'); 390 $('.nth_test_2 span:nth-child(3n)').css('color','red'); 391 $('.nth_test_2 span:nth-child(3n+1)').css('color','green'); 392 393 //text_clone() 394 $('.test_clone li').click(function() { 395 $(this).clone(true).appendTo('.test_clone'); 396 }); 397 398 //val() 399 $('.select01').val('333333'); 400 $('.select02').val(['555555','777777']); 401 $(':checkbox').val(['bbb','ccc']); 402 $(':radio').val(['yyy']);// 注意必须用数组的方式去命名 403 404 //冒泡事件 405 $('.propagation_div').click(function(e) { 406 alert('propagation_div'); 407 }); 408 $('.propagation_div_2').click(function(e) { 409 alert('propagation_div_2'); 410 e.stopPropagation();//停止冒泡 411 e.preventDefalt(); 412 }); 413 $('.propagation_div_3').click(function(e) { 414 alert('propagation_div_3'); 415 e.stopPropagation();// 416 }); 417 // 418 419 420 }) 421 </script> 422 </body> 423 </html>