一 JQ设计思想

选择网页元素

1. 模拟css选择元素
   $("#id") $('.class') $('tagName')
2. 具有表达式选择
   $('li:eq(nth)) $('li:first')
3. 多种筛选方法
   $('li').filter('.box')筛选出还有类.box的元素
   $('li').filter('[title=hello]')筛选出属性为title=hello的元素

JQ写法

1. 方法函数化

//js
window.onload = function () {};
//jq
$(function () {});

//js
innerHTML = 123;
//jq
html(123);

//demo

//js
window.onload = function () {
  var oDiv = document.getElementById('div1');
  oDiv.onclick = function () {
    alert( this.innerHTML );
  };
};
//jq
$(function () {
  var oDiv = $('#div1');
  oDiv.click(function () {
    alert( $(this).html() );
  });
});

2. 链式操作

...
$('#div1').html('hello').css('background', 'red').click(function () {...});
...

3. 取值赋值合体

//原生js
oDiv.innerHTML = 'hello';//赋值
alert( oDiv.innerHTML );//取值

//jq
oDiv.html('hello');//赋值，有参数
alert( oDiv.html() );//取值，无参数

• 一组元素的时候，取值是一组中的第一个（可以采用循环取所有值）
• 一组元素的时候，赋值是一组中的所有元素（省略了一个循环）

JQ与JS关系

jq和js可以共存，但不要混着用

$('#div1').click(function () {
  alert( $(this).html() );//这是jquery写法
  alert( this.innerHTML );//这是原生js写法，因为`this``innerHTML`都是原生写法
});