一个优秀的JS库，大型开发必备。

   简化JS的复杂操作;不在需要关心兼容性;提供大量实用方法

JQ设计思想

 选择页面元素

   1.模拟CSS选择元素 2.独有表达式选择 3.多种筛选方法

 JQ写法

　 1.方法函数化 2.链式操作 3.取值赋值合体

 JQ与JS关系

   可以共存，不能混用

类似CSS选择--会选中所有符合要求的元素因此表现形式类似数组

$('#div')$('div')$('.box')

独有表达式选择

//一组元素中的第几个$('li:eq(0)')$('li').eq(0) //以0为起始$('li:even') 偶数行$('li:odd') 奇数行

多种筛选方法--过滤

$('li').filter('.box') //选中类属性为box的li元素$('li').filter('[title=hello]') //选中自定义title属性为hello的li元素

方法函数化--将所有后续内容以传参的形式执行,且JS的属性都是以方法的形式调用!

'//'表示原生写法 中间是JQ写法 ':'表示类似的JQ源码 // window.onload = function(){}$(function(){});:function $(){}; //innerHTML = 123;html();:function html(){}; //onclick = function(){}click(function(){}):function click(){} //简单的小实例： $(function(){
      $('#div1').click(function(){
        alert( $(this).html() );   })： })

JS和JQ不能混用

// 错误写法$(this).innerHTMLthis.html()

链式写法

$(function(){  $('#div1').html('hello');  $('#div1').css('background','red');  $('#div1').click(function(){    alert(123);  });});//链式写法:$(function(){  $('#div1').html('hello').css('background','red').click(function(){    alert(123);  });})

取值赋值合体

$(function(){  //原生JS  oDiv.innerHTML = 'hello';  //赋值  alert(oDiv.innerHTML); //取值  //JQ代码库  alert( $('#div1').html(argument) ) //赋值与取值由是否传参argument决定})$(function(){ //赋值 $('#div1')css('width','200px'); //赋值  alert( $('#div1').css('width') );})

:一组元素的取值与赋值

$(function(){  //当对一组元素进行取值时,只会取一组元素中的第一个  alert( $('li').html() );  //当对一组元素进行赋值时,是一组元素的所有元素  alert( $('li').html('hello') )});