引號的問題
$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');
上面的代碼加不加引號都是正確的
什么時候必須加引號呢？
<div class="box box1"></div>
<script>
$('div[class=box box1]').css('background', 'red');
//當(dāng)屬性的值有空格的 會報錯
</script>
這個時候我們就必須加上引號
#JQ的鏈?zhǔn)讲僮?/h1>
一步一步的操作：
鏈?zhǔn)讲僮?:
$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});
注意: JQ中的可以鏈?zhǔn)讲僮鞯氖轻槍υO(shè)置的操作， 取值的操作不能進行鏈?zhǔn)讲僮?/p>
命名的規(guī)范
$div $span
JQ的容錯性
在原生js種， 如果沒有找到相應(yīng)的DOM元素， 執(zhí)行后續(xù)操作會報錯
在JQ中沒有找到也不會報錯， 最多是不執(zhí)行任何的操作
這就是JQ的容錯性
它是把雙刃劍:
- 優(yōu)點： 不報錯， 不影響后續(xù)代碼的執(zhí)行
- 缺點： 不好調(diào)試
集合的長度
$()獲取到的都是一個集合
集合中只有一個元素，它也是一個集合 $('#id');
它的結(jié)構(gòu)很像數(shù)組，有下標(biāo)， 有l(wèi)ength
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');//增加多個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');//刪除多個class, 用空格隔開
</script>
顯示隱藏
- show()/hide()
show()和hide() 可以智能的判斷display
next()
選擇下一個兄弟節(jié)點
prev()
選擇上一個兄弟節(jié)點
nextAll()
選擇下面所有的兄弟節(jié)點
prevAll()
選擇上面所有的兄弟節(jié)點
siblings()
選擇所有的兄弟節(jié)點
參數(shù)的篩選功能
上述方法都可以傳入一個選擇器字符串作為參數(shù)，用于對結(jié)果進行篩選
下標(biāo)
- eq()
節(jié)點的選擇
first()
獲取當(dāng)前結(jié)果集中的第一個對象 相當(dāng)于eq(0)
last()
獲取當(dāng)前結(jié)果集的最后一個對象
slice()
children()
獲得匹配元素集合中每個元素的子元素
find()
查找符合選擇器的后代元素
節(jié)點的選擇(父節(jié)點)
parent()
獲得匹配元素集合中每個元素的父元素
從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素。
必須要接收一個參數(shù)
節(jié)點的操作
創(chuàng)建節(jié)點
//原生的方式
var oDiv = document.createElement('div');
//jq的方式
var $div = $('<div>')
注意: 要加<``>，不然就變成選擇
插入子節(jié)點
append()
在每個匹配元素里面的末尾處插入?yún)?shù)內(nèi)容。
它的參數(shù)可以是DOM 元素，DOM元素數(shù)組，HTML字符串，或者jQuery對象，用來插在每個匹配元素里面的末尾。
prepend()
將參數(shù)內(nèi)容插入到每個匹配元素的前面（元素內(nèi)部）。
參數(shù)DOM元素，元素數(shù)組，HTML字符串，或者jQuery對象，將被插入到匹配元素前的內(nèi)容。
插入兄弟節(jié)點
before()
after()
節(jié)點的操作
- remove() 刪除節(jié)點
- clone() 克隆節(jié)點
- 默認(rèn)不克隆事件
- 如何克隆事件 clone(true)
JQ中的索引
index()
第一種用法，兄弟中的排行
JQ中的遍歷
遍歷就是循環(huán)
我們知道在JQ中有很多的省略循環(huán)的方法比如說css click ...
但有時候我們也需要自定義循環(huán)操作
.each()
回調(diào)函數(shù)的兩個參數(shù)
- 第一個參數(shù)代表下標(biāo)
- 第二個參數(shù)代表每個原生dom對象
退出循環(huán)
我們知道在for循環(huán)中我們是用break來退出整個循環(huán)
在.each() 中 我們用return false來退出整個循環(huán)
JQ轉(zhuǎn)原生JS
- get()
- 與eq的區(qū)別
- 為什么要轉(zhuǎn)，比如：
- 獲取內(nèi)容的高度
- 元素之間的比較
get()
獲取原生都dom對象
$('div').get(0).innerHTML = 'sdfsdf';
與eq的區(qū)別
get方法得到的是原生dom對象， eq得到的是jquery對象
$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');
為什么要轉(zhuǎn)
獲取內(nèi)容的高度
想要獲取textarea里內(nèi)容的實際高度
