遍历节点

遍历节点


1.children方法


用于去的匹配的子元素集合。
children()方法只考虑子元素而不考虑后代元素。
$lis = $('ul').children();
lg($lis);
var len = $lis.length;
for(var i=0;i<len;i++){
lg($lis[i].innerHTML);
}
2.next()方法


用于取得匹配元素后面紧邻的同辈元素。
        var $p1 = $('p').next();
        lg($p1);
3.prev()方法


用于取得匹配元素前面紧邻的元素。
var $li = $('li').prev();
lg($li);
4.siblings()方法


用于取得所有同辈元素。
var $ul = $('p').siblings();
lg($ul);
5.closet()方法


该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，匹配直接返回元素本身。否则逐级向上查找。
var $ul = $('li').closest('ul');
lg($ul);
parent()和parents()
parent()方法获得集合中每个元素的父级元素。
parents()方法集合中每个匹配元素的祖先元素。
var $ul = $('a').parents();
lg($ul);
CSS操作


可以直接利用css()方法获取和设置元素的样式属性。
$('p').css('color');
$('p').css('color','red');
如果值是数字，将会被自动转化为像素值。
在css()方法中，如果属性带有‘-’符号，如font-size，如果设置这些属性的时候不带引号，那么需要使用驼峰命名法。
事件绑定
1.bing()方法


结构：bind(事件类型，回调函数)；
<input type="button" value="点我">
$('input[type=button]').bind('click',function(){
lg('hello world');
});
2.on()方法


on()方法结构和使用与bind()没有任何区别。
新版本的jQuery里面都是使用on()方法，bind()方法已经不再使用了。
<input type="button" value="点我">
$('input[type=button]').bind('click',function(){
lg('hello world');
});
3.阻止冒泡


使用事件对象 event 的方法stopPropagation();
$('input[type=button],div,body,html').on('click',function(event){
lg('click');
event.stopPropagation();
});
4.绑定多个事件


on()方法中可以使用类似JSON结构进行处理。
$('input[type=button]').on({
hover:function(){
$(this).css('color','red');
},
mouseout:function(){
$(this).css('color','#fff');
},
click:function(){
alert('aaa');
}
});
5.事件解绑


使用unbind()方法解绑事件
$('input[type=button]').on('click',function(){
lg('click');
$(this).unbind('click');
});
jQuery动画


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


调用hide()方法会将元素的display样式改为' none '。
show()方法将元素的display样式设置为先前的显示状态。
show()方法和hide()方法的参数可以指定毫秒值，缓慢的隐藏和展示。
$('p').toggle(function(){
$(this).hide(2000);
},function(){
$(this).show(2000);
}) 
2.fadeIn()和fadeOut()方法


fadeIn()和fadeOut()方法只改变元素的不透明度。
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）。
$('p').toggle(function(){
$(this).fadeOut();
},function(){
$(this).fadeIn();
}) 
3.slideUp()方法和slideDown()方法


slideUp()方法和slideDown()方法只会改变元素的高度。
如果一个元素的 display 属性值为'none',调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。
$('p').toggle(function(){
$(this).slideUp();
},function(){
$(this).slideDown();
}) 
jQuery中任何动画效果，都可以指定3种速度参数。slow,normal和fast，使用时记得加上引号。