節(jié)點的選擇
first()
獲取當前結果集中的第一個對象 相當于eq(0)
last()
獲取當前結果集的最后一個對象
slice()
children()
獲得匹配元素集合中每個元素的子元素
$('ul.level-2').children()
$('ul.level-2').children('.selected');//可以進行篩選
find()
查找符合選擇器的后代元素
$('ul').find('li.current');
$('ul li.current');
$('ul').find('li.current');//盡量用這種方式，性能會更高一些
上面兩種方式選擇的元素是一樣的, 我們應該盡量使用find
節(jié)點的選擇(父節(jié)點)
parent()
獲得匹配元素集合中每個元素的父元素
$('li.item-a').parent()
closest()
從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素。
必須要接收一個參數(shù)
<div class="box">
<div class="box">cccc
<div>bbbb
<div id="div1">aaaa</div>
</div>
</div>
</div>
<script>
$('#div1').closest('div').css('background', 'red');//從元素本身開始
$('#div1').closest('.box').css('background', 'red');//返回最先匹配的祖先元素
</script>
例子 : 點擊查找指定節(jié)點
點擊span讓相應的li背景變紅
<ul>
<li>
<div><span>001</span></div>
</li>
<li>
<div><span>002</span></div>
</li>
<li>
<div><span>003</span></div>
</li>
<li>
<div><span>004</span></div>
</li>
<li>
<div><span>005</span></div>
</li>
</ul>
<script>
$('span').click(function(){
$(this).closest('li').css('background','red');
})
</script>
節(jié)點的操作
創(chuàng)建節(jié)點
//原生的方式
var oDiv = document.createElement('div');
//jq的方式
var $div = $('<div>')
注意: 要加<``>，不然就變成選擇
比原生JS更強大的創(chuàng)建方式
//原生的方式
var oDiv = document.createElement('div');
oDiv.innerHTML = 'hello';
oDiv.id = 'div1';
//jq的方式
var $div = $('<div id="div1">hello</div>')
插入子節(jié)點
append()
在每個匹配元素里面的末尾處插入?yún)?shù)內容。
它的參數(shù)可以是DOM 元素，DOM元素數(shù)組，HTML字符串，或者jQuery對象，用來插在每個匹配元素里面的末尾。
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<div class="box">box</div>
<script>
var oH2 = document.getElementsByTagName('h2')[0];
$('.inner').append(oH2);//DOM元素
$('.inner').append('<p>Test</p>');//HTML字符串
$('.inner').append($('.box'));//jquery對象
</script>
prepend()
將參數(shù)內容插入到每個匹配元素的前面（元素內部）。
參數(shù)DOM元素，元素數(shù)組，HTML字符串，或者jQuery對象，將被插入到匹配元素前的內容。
插入兄弟節(jié)點
before()
after()
- 例子 : 節(jié)點上移下移
節(jié)點的操作
- remove() 刪除節(jié)點
- clone() 克隆節(jié)點
- 默認不克隆事件
- 如何克隆事件 clone(true)
JQ中的索引
index()
第一種用法，兄弟中的排行
<body>
<div>001</div>
<div id="div1">002</div>
<div>003</div>
</body>
<script>
alert( $('#div1').index() ) ;//1
</script>
第二種用法，篩選后的排行
<div><span>001</span></div>
<div><span id="span1">002</span></div>
<div><span>003</span></div>
<script>
//錯誤寫法
$('#span1').index();//0
//#span1在span集合中的索引
$('#span1').index('span');//1
</script>
- 例子 : 選項卡
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
$('#div1').find('div').eq( $(this).index('input') ).css('display','block').siblings('div').css('display','none');
</script>
JQ中的遍歷
遍歷就是循環(huán)
我們知道在JQ中有很多的省略循環(huán)的方法比如說css click ...
但有時候我們也需要自定義循環(huán)操作
.each()
回調函數(shù)的兩個參數(shù)
- 第一個參數(shù)代表下標
- 第二個參數(shù)代表每個原生dom對象
$('span').each(funciton(i, elem){
alert(i);
elem.style.background = 'red';
})
each中this指向
this === elem
$('span').each(funciton(i, elem){
$(this).html(i);
})
退出循環(huán)
我們知道在for循環(huán)中我們是用break來退出整個循環(huán)
在.each() 中 我們用return false來退出整個循環(huán)
$('span').each(funciton(i, elem){
$(this).html(i);
if(i==0){
return false;
}
})
JQ轉原生JS
- get()
- 與eq的區(qū)別
- 為什么要轉，比如：
- 獲取內容的高度
- 元素之間的比較
get()
獲取原生都dom對象
$('div').get(0).innerHTML = 'sdfsdf';
與eq的區(qū)別
get方法得到的是原生dom對象， eq得到的是jquery對象
$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');
為什么要轉
獲取內容的高度
想要獲取textarea里內容的實際高度
<textarea id="t1" style="height:100px">
as
da
sd
asd
a
sd
asd
a
sd
s
s
s
s
s
s
s
s
</textarea>
<script>
$('textarea').height();//100
//height()是獲取元素的高度
// jquery中沒有提供獲取內容高度的方法
$('textarea').get(0).scrollHeight;//360
</script>
元素之間的比較
var oDiv = document.getElementById('div1');
$('#div1').get(0) === oDiv; //true;
練習
- 1左右切換數(shù)據(jù)
- 2評分效果
