笔记15

遍历节点 
1.children方法 
用于去的匹配的子元素集合。

children()方法只考虑子元素而不考虑后代元素。

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

2.next()方法 
用于取得匹配元素后面紧邻的同辈元素。

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

3.prev()方法 
用于取得匹配元素前面紧邻的元素。

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

4.siblings()方法 
用于取得所有同辈元素。

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

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

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

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

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

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

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

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

事件绑定 
1.bing()方法 
结构：bind(事件类型，回调函数)；

<input type="button" value="点我">

$('input[type=button]').bind('click',function(){
            lg('hello world');
        });
 
 
1
2
3
4
5

2.on()方法 
on()方法结构和使用与bind()没有任何区别。

新版本的jQuery里面都是使用on()方法，bind()方法已经不再使用了。

<input type="button" value="点我">

$('input[type=button]').bind('click',function(){
            lg('hello world');
        });
 
 
1
2
3
4
5

3.阻止冒泡 
使用事件对象 event 的方法stopPropagation();

$('input[type=button],div,body,html').on('click',function(event){
            lg('click');
            event.stopPropagation();
        });
 
 
1
2
3
4

4.绑定多个事件 
on()方法中可以使用类似JSON结构进行处理。

$('input[type=button]').on({
            hover:function(){
                $(this).css('color','red');
            },
            mouseout:function(){
                $(this).css('color','#fff');
            },
            click:function(){
                alert('aaa');
            }
        });
 
 
1
2
3
4
5
6
7
8
9
10
11

5.事件解绑 
使用unbind()方法解绑事件

    $('input[type=button]').on('click',function(){
            lg('click');
            $(this).unbind('click');
        });