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(){}