jquery框架学习笔记.docxVIP

框架学习笔记Jquery框架学习:toggle(function(),function(),...)每次点击后依次调用函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。可以使用unbind(click)来删除。script$(img).toggle(function(){this.src=../image/b.jpg;},function(){this.src=../image/f.jpeg;});/script点击切换图片效果。bodyimg src=../image/f.jpeg id=imgIdimg src=../image/f.jpegimg src=../image/f.jpeg/bodyscript$(img).toggle(function(){this.src=../image/b.jpg;},function(){this.src=../image/f.jpeg;});/script当有多张图片时，会自动进行隐式遍历。底层已经写好。hover鼠标移入移出时进行切换。一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。$(td).hover( function () { $(this).addClass(hover); }, function () { $(this).removeClass(hover); });鼠标移入和移出时分别触发相应的事件。单击标题显示和隐藏内容。script$(h1).toggle(function(){$(this).next().hide();},function(){$(this).next().show();});/script4.next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。找到每个段落的后面紧邻的同辈元素中类名为selected的元素。pHello/pp class=selectedHello Again/pdivspanAnd Again/span/div$(p).next(.selected)hide()隐藏显示的元素。$(p).hide()隐藏所有段落。show()显示隐藏的匹配元素。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。p style=display: noneHello/p$(p).show()7.click()在每一个匹配元素的click事件中绑定一个处理函数。点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：mousedownmouseupclick$(p).click( function () { $(this).hide(); });将页面内所有段落点击后隐藏。parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。divpHello/ppHello/p/div$(“p”).parent();查找每个段落的父元素。divpHello/p/divdiv class=selectedpHello Again/p/div$(p).parent(.selected)查找段落的父元素中每个类名为selected的父元素。9.prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。pHello/pdivspanHello Again/span/divpAnd Again/p$(p).prev()找到每个段落紧邻的前一个同辈元素。divspanHello/span/divp class=selectedHello Again/ppAnd Again/p$(p).prev(.selected)找到每个段落紧邻的前一个同辈元素中类名为selected的元素。10.children()取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。pHello/pd