1. Jquery简介

一个优秀的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).innerHTML
this.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') )
});