Jquery设计思想

一、选择器
$('#div1')  选择id
$('.box') 选择class
$(''div'') 选择标签
$('li:first').css('background','red') 选择第一个元素
$('ul li:last-child').css('background','green')选择最后一个元素

二、设置样式.box样式
$('.box').css('background','red')

三、函数方法化
window.onload ==  $()
window.onload = function(){} 与 $(function(){ })   //相等

innterHTML == html()
onclick == click()

例子：
     $(function() {
          $('#div1').click(function(){
               alert($(this).html());
          });
     });

四、过滤器：
     $('div').has('p')
     $('div').not('myClass')
     $('div').filter('myClass')

五、相邻元素查找

     $('div').next('p')选择div元素后面第一个p元素
     $('div').parent();选择div父集
     $('div').children();选择div下所有子集

六、链式操作
     $('div').find(h3).eq(2).html('hello');
     找到div元素，选择其中h3元素，选择第三个h3元素给他的内容改成hello

七、工具函数操作
each方法：循环  
   $('li').each(function(index,element){   //第一个参数：索引；第二个参数：所有获取的元素
$(elements).html(index)
}

去处括号：

window.onload = function() {

var oDiv = document.getElementById('div1');

alert('('+$.trim(oDiv.className)+')'));

}

八、事件操作

1.独立事件: click(),mouseover()

$(function(){

$(div).click(function(

alert(123);

))

})

2.通用事件:bing(),one(),unbind(),e:event对象,pageX等

3.通用事件：toggle();循环点击事件

例：

$(function(){

$('input').toggle(function(){

alert(1);

},function(){

alert(1);

},function(){

alert(1);

});

});

八：运动效果：

常见效果：

fadeIn()  //淡入

fadeOut() //淡出

slideDown()  向下展开

slideUp()  向上卷起

复杂效果：

.animate() //自定义动画

stop() //停止动画效果

例：

$(function(){

$('input').toggle(function(){

$('div').fadeOut();

},function(){

$('div').fadeInt();

})

})