什么是JQ？
一個(gè)優(yōu)秀的JS庫 寫越少的代碼，做越多的事情
JQ的好處嫁乘？
- 簡化JS的復(fù)雜操作
- 不再需要關(guān)心兼容性
- 提供大量實(shí)用方法
JQ官網(wǎng)
jquery的版本
jQuery 分 2 個(gè)系列版本 1.x 與 2.x，主要的區(qū)別 在于 2.x 不再兼容 IE6、7沛慢、8 為移動(dòng)端而優(yōu)化，由于減少了一些代碼达布，使得該版本比 jQuery 1.x 更小且更快团甲。
壓縮版(compressed) 與 開發(fā)版(development)，我們在開發(fā)過程中使用開發(fā)版（開發(fā)版本便于代碼修改及調(diào)試）黍聂，項(xiàng)目上線發(fā)布使用壓縮版（因?yàn)閴嚎s版本體積更小躺苦，效率更快）。
如何使用JQ
- 官網(wǎng)下載jquery.js文件
- 導(dǎo)入jquery文件
<script src="jquery.js"></script>
選擇元素
- $()
- css()
<div id="div1" class="div1"></div>
<script>
document.getElementById('div1').style.background = 'red';
document.getElementsByClass('div1')[0].style.background = 'red';
document.getElementsByTagName('div')[0].style.background = 'red';
//jq選擇元素的風(fēng)格是跟CSS風(fēng)格特別類似
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
</script>
- 省略原生的循環(huán)操作
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
for(){
aLi[i].style
}
$('li').css('background','red');//當(dāng)選中的是個(gè)集合产还，那么css內(nèi)部執(zhí)行的一個(gè)循環(huán)操作匹厘，來修改里面集合的css樣式。jquery內(nèi)部舊執(zhí)行了個(gè)循環(huán)操作
</script>
-
$ 和 jQuery
- $ === jQuery
- $是jQuery的別名
- 為了簡便, 我們通常使用$
jQuery('#div1').css('background', 'red');
綁定事件
通過調(diào)用的jquery對象上的click方法來
$("div").click(function(){});
- this指向
指向觸發(fā)事件的原生dom對象
$("div").click(function(){
alert(this.innerHTML)
})
html()
作用和innerHTML類似脐区，只是該方法可以給多個(gè)元素進(jìn)行操作懦胞。
傳遞字符串參數(shù)表示賦值兆衅，返回jquery對象医舆。
不傳參數(shù)脑蠕，就表示取值。
var $div = $('#div1');
$div.click(function(){
alert( $div.html() );
});
JS與JQ關(guān)系
- jq也是js
- js原生dom對象與jq對象不能混用
alert( $div.html() ); //純JQ寫法
alert( document.getElementById('div1').innerHTML ); //純JS寫法
alert( $div.innerHTML ); //錯(cuò)誤的
alert( document.getElementById('div1').html() ); //錯(cuò)誤的
- 例子 : 選擇顏色填充方塊
取值與賦值的關(guān)系
我們知道原生js中取值與賦值是通過直接操作對象屬性來實(shí)現(xiàn)的
比如說innerHTML 屬性
oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//賦值
在jquery中,實(shí)現(xiàn)相同的操作
$div.html();//取值
$div.html('text');//賦值
可以看到是否取值或賦值是通過傳入?yún)?shù)的個(gè)數(shù)決定的
具有相同特征的還有
- css()
- attr() 屬性
- val() 值
等方法
<div id="div1" class="div1" data-index="1"></div>
<input type="text" value="123">
$('#div1').css('color','red');
alert( $('#div1').css('color') ); //red
$('#div1').attr('title','hello');
alert( $('#div1').attr('title') );//獲取title屬性
alert( $('#div1').attr('class') );//獲取class
alert( $('#div1').attr('data-index') ); //獲取自定義屬性
$('input').val('456');//設(shè)置value值
alert( $('input').val() );//獲取value值
多元素取值
jq中查找到多個(gè)元素, 取值取第一個(gè)元素的值
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<script>
alert($('ul li').html() );//001
</script>
屬性選擇器
css選擇器中大多的語法都可以在jquery中使用
包括屬性選擇器
<input type="text" value="123">
<input type="text" value="456">
<input type="text" >
<script>
$('input[value]').css('background', 'red');//有value屬性的會(huì)被選中
$('input[value=123]').css('background', 'red');//value值等于123的會(huì)被選中
</script>
<input type="text" value="123_555">
<input type="text" value="123_666">
<input type="text" value="333_888">
<script>
$('input[value^=123]').css('background', 'red');//選中以123開頭的
$('input[value$=555]').css('background', 'red');//選中以555結(jié)尾的
$('input[value*=3]').css('background', 'red');//選中包含3的
</script>
引號(hào)的問題
$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');
上面的代碼加不加引號(hào)都是正確的
什么時(shí)候必須加引號(hào)呢倔叼？
<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//當(dāng)屬性的值有空格的 會(huì)報(bào)錯(cuò)
</script>
這個(gè)時(shí)候我們就必須加上引號(hào)
$('div[class="box box1"]').css('background', 'red');
JQ的鏈?zhǔn)讲僮?/h1>
一步一步的操作：
var $div = $('div');
$div.html('bbbb');
$div.css('background', 'red');
$div.click(function(){
alert('111');
})
鏈?zhǔn)讲僮?:
$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});
注意: JQ中的可以鏈?zhǔn)讲僮鞯氖轻槍υO(shè)置的操作汗唱， 取值的操作不能進(jìn)行鏈?zhǔn)讲僮?/p>
JQ實(shí)戰(zhàn)小技巧
命名的規(guī)范
$div $span
JQ的容錯(cuò)性
<div id="div1"></div>
<script>
var oDiv = document.getElementById('div2');
oDiv.innerHTML = 'bbb';//會(huì)報(bào)錯(cuò)
</script>
在原生js種， 如果沒有找到相應(yīng)的DOM元素丈攒， 執(zhí)行后續(xù)操作會(huì)報(bào)錯(cuò)
<div id="div1"></div>
<script>
$("#div2").html('bbbb');
</script>
在JQ中沒有找到也不會(huì)報(bào)錯(cuò)哩罪， 最多是不執(zhí)行任何的操作
這就是JQ的容錯(cuò)性
它是把雙刃劍:
- 優(yōu)點(diǎn)： 不報(bào)錯(cuò)授霸， 不影響后續(xù)代碼的執(zhí)行
- 缺點(diǎn)： 不好調(diào)試
集合的長度
$()獲取到的都是一個(gè)集合
集合中只有一個(gè)元素，它也是一個(gè)集合 $('#id');
它的結(jié)構(gòu)很像數(shù)組际插，有下標(biāo)碘耳， 有l(wèi)ength
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<script>
var $li = $('ul li');
alert($li[0].innerHTML);
alert($li.length);
</script>
JQ實(shí)戰(zhàn)小技巧
利用length判斷元素是否存在
var $span = $('#span1');
console.log( $span.length );
$span.html('bbbb');
class的操作
- addClass()
- removeClass()
- toggleClass()
<div id="div1" class="box1 box2">aaaaa</div>
<script>
var $div = $('#div1');
$div.addClass('box3');//增加class
$div.addClass('box1');//增加class, 如果存在, 不執(zhí)行任何操作
$div.addClass('box4 box5');//增加多個(gè)class, 用空格隔開
</script>
<div id="div1" class="box1 box2">aaaaa</div>
<script>
var $div = $('#div1');
$div.removeClass('box1');//刪除class
$div.removeClass('box3');//刪除class, 如果存在, 不執(zhí)行任何操作
$div.removeClass('box4 box5');//刪除多個(gè)class, 用空格隔開
</script>
<div id="div1" class="box1 box2">aaaaa</div>
<script>
$('#div1').toggleClass('box3');
</script>
顯示隱藏
- show()/hide()
