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();

})

})