2017.11.22笔记

遍历节点

1.children方法

用于去的匹配的子元素集合。
children()方法只考虑子元素而不考虑后代元素。

[html] view plain copy

1. $lis = $('ul').children();  
2.     lg($lis);  
3.     var len = $lis.length;  
4.     for(var i=0;i<len;i++){  
5.         lg($lis[i].innerHTML);  
6.     }  

2.next()方法

用于取得匹配元素后面紧邻的同辈元素。

[html] view plain copy

1. var $p1 = $('p').next();  
2. lg($p1);  

3.prev()方法

用于取得匹配元素前面紧邻的元素。

[html] view plain copy

1. var $li = $('li').prev();  
2.  lg($li);  

4.siblings()方法

用于取得所有同辈元素。

[html] view plain copy

1. var $ul = $('p').siblings();  
2.     lg($ul);  

5.closet()方法

该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，匹配直接返回元素本身。否则逐级向上查找。

[html] view plain copy

1. var $ul = $('li').closest('ul');  
2.     lg($ul);  

parent()和parents()
parent()方法获得集合中每个元素的父级元素。
parents()方法集合中每个匹配元素的祖先元素。

[html] view plain copy

1. var $ul = $('a').parents();  
2.     lg($ul);  

CSS操作

可以直接利用css()方法获取和设置元素的样式属性。

[html] view plain copy

1. $('p').css('color');  
2.     $('p').css('color','red');  

如果值是数字，将会被自动转化为像素值。
在css()方法中，如果属性带有‘-’符号，如font-size，如果设置这些属性的时候不带引号，那么需要使用驼峰命名法。
事件绑定

1.bing()方法

结构：bind(事件类型，回调函数)；

[html] view plain copy

1. <input type="button" value="点我">  
2. $('input[type=button]').bind('click',function(){  
3.             lg('hello world');  
4.         });  

2.on()方法

on()方法结构和使用与bind()没有任何区别。
新版本的jQuery里面都是使用on()方法，bind()方法已经不再使用了。

[html] view plain copy

1. <input type="button" value="点我">  
2. $('input[type=button]').bind('click',function(){  
3.             lg('hello world');  
4.         });  

3.阻止冒泡

使用事件对象 event 的方法stopPropagation();

[html] view plain copy

1. <span style="font-size:18px;">$('input[type=button],div,body,html').on('click',function(event){  
2.             lg('click');  
3.             event.stopPropagation();  
4.         });</span>  

4.绑定多个事件

on()方法中可以使用类似JSON结构进行处理。

[html] view plain copy

1. <span style="font-size:18px;">$('input[type=button]').on({  
2.             hover:function(){  
3.                 $(this).css('color','red');  
4.             },  
5.             mouseout:function(){  
6.                 $(this).css('color','#fff');  
7.             },  
8.             click:function(){  
9.                 alert('aaa');  
10.             }  
11.         });</span>  

5.事件解绑

使用unbind()方法解绑事件

[html] view plain copy

1. <span style="font-size:18px;">  $('input[type=button]').on('click',function(){  
2.             lg('click');  
3.             $(this).unbind('click');  
4.         });</span>  

jQuery动画

1. show() 方法和 hide() 方法

调用hide()方法会将元素的display样式改为' none '。
show()方法将元素的display样式设置为先前的显示状态。
show()方法和hide()方法的参数可以指定毫秒值，缓慢的隐藏和展示。

[html] view plain copy

1. <span style="font-size:18px;">      $('p').toggle(function(){  
2.             $(this).hide(2000);  
3.         },function(){  
4.             $(this).show(2000);  
5.         }) </span>  

2.fadeIn()和fadeOut()方法

fadeIn()和fadeOut()方法只改变元素的不透明度。
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）。

[html] view plain copy

1. <span style="font-size:18px;">      $('p').toggle(function(){  
2.             $(this).fadeOut();  
3.         },function(){  
4.             $(this).fadeIn();  
5.         }) </span>  

3.slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。
如果一个元素的 display 属性值为'none',调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。

[html] view plain copy

1. <span style="font-size:18px;">      $('p').toggle(function(){  
2.             $(this).slideUp();  
3.         },function(){  
4.             $(this).slideDown();  
5.         }) </span>  

jQuery中任何动画效果，都可以指定3种速度参数。slow,normal和fast，使用时记得加上引号。