jquery基础

什么是JQ？
一个优秀的JS库，大型开发必备

JQ的好处？
简化JS的复杂操作
不再需要关心兼容性
提供大量实用方法

如何学习JQ？
www.jquery.com JQ只是辅助工具，要正确面对 需要分阶段学习

JQ设计思想？

选择网页元素
模拟CSS选择元素
独有表达式选择
多种筛选方法

JQ写法
方法函数化
链式操作
取值赋值合体

JQ与JS关系
可以共存，不能混用

JQ库的引用

jQuery 1.X版本支持IE6-8

jQuery 2.X以上版本不支持IE6-8(移动端可以选择2.0版本以上)

选择网页元素 

<div id="div1" class="box">div</div>

原生js：

document.getElementById('div1');                选择id
document.getElementsByTagName('div');     选择标签元素
getByClass(document,'box');                        选择class

JQ选择元素

$('#div1')    选择id
$('div')         选择标签元素
$('.box')      选择class

<div id="div1" class="box">div</div>
<span class="box">span</span>

加样式
$('.box').css('background','red');

获取的是一组元素，比原生的JS省略了循环步骤

筛选方法

<ul>
<li class="box">11</li>
<li title="第二">11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
$(function () {
//$('li').css('background','red');
//$('li:first').css('background','red');
//$('li:last').css('background','red');
//$('li:eq(2)').css('background','red');
//$('li').filter('.box').css('background','blue')；
//$('li').filter('[title="第二"]').css('background','gray');
//$('li:even').css('background','gray'); //序号为偶数的元素
//$('li:odd').css('background','gray'); //序号为奇数的元素
//$('li:lt(3)').css('background','gray'); //序号小于n的元素
$('li:gt(3)').css('background','gray'); //序号大于n的元素
})
</script>

 方法函数化 

js写法 和jquery的写法

window.onload=function(){

}

$(function(){

})

$除了选取元素还可以模拟window.onload函数

 innerHTML=123；

html(123);

function html(){}

onclick = function(){};

click(function(){})

function click(){}