屬性、表單過(guò)濾器
屬性過(guò)濾選擇器：
$("div[id]")選取有id屬性的<div>
$("div[title=test]")選取title屬性為“test”的<div>，jQuery中沒(méi)有對(duì)getElementsByName進(jìn)行封裝，用$("input[name=abc]")
$("div[title!=test]")選取title屬性不為“test”的<div>
還可以選擇開頭【name^=值】、結(jié)束【 name$=值】、包含【 name*=值】等，條件還可以復(fù)合。【[屬性1=a][屬性2=b]…】（*）
表單對(duì)象屬性選擇器（過(guò)濾器）：
$("#form1 :enabled")選取id為form1的表單內(nèi)所有啟用的元素
$("#form1 :disabled")選取id為form1的表單內(nèi)所有禁用的元素
$(“input:checked”)選取所有選中的元素（Radio、CheckBox）,這個(gè)中間不能加空格.
$("select :selected")選取所有選中的選項(xiàng)元素（下拉列表）
===================================================================
//$("#form1:enabled"); //不加空格表示的是,所有啟用的表單,這樣就變成過(guò)濾器了
//$("#form1 :enabled"); //加空格表示的是先選取這個(gè)表單,表單下所有啟用的元素
===================================================================
元素的each
$(function () {
$('#dv input[type=checkbox]').click(function () {
var checks = $('#dv :checked');
var len = checks.length;
var arr = [];
checks.each(function (k, v) {
arr[arr.length] = $(v).val();
});
$('#msgNames').text('共選中了' + len + '內(nèi)容為' + arr.toString());
});
});
表單選擇器
$(":input")選取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一樣， $("input")只獲得<input>
:input比input級(jí)別高,包含input texarea select button
$(":text")選取所有單行文本框，等價(jià)于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
$(“:password”)選取所有密碼框。
同理還有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
代替了$(‘input[type=***]’);
其他過(guò)濾器(*)
內(nèi)容過(guò)濾器：
:contains(text),過(guò)濾出包含給定文本的元素。(innerText中包含。)
:empty,過(guò)濾出所有不包含子元素或者文本的空元素。
:has(selector),過(guò)濾出元素中包含（即子元素中）selector選擇器能選擇到的元素。
:parent,過(guò)濾出可以當(dāng)做父元素的元素（即該元素有子元素或者元素中包含文本。）
========================================================================
//$('div:contains(x)').css('backgroundColor', 'blue'); //包含字母x的背景色為藍(lán)色
//$('div:empty').css('backgroundColor', 'blue'); //div中沒(méi)有任何元素(文本)背景為藍(lán)色
//$('div:has(a)').css('backgroundColor', 'blue');//所有div中包含a標(biāo)簽的div背景為藍(lán)色
//$('div:parent').css('backgroundColor', 'blue');//有子元素為父元素的背景為藍(lán)色
子元素過(guò)濾器(*)
:first-child,與:fisrt的區(qū)別,:first只能選取個(gè)，而:first-child，則能選取每個(gè)子元素的個(gè)元素。
$(‘ul li:first’);只返回一個(gè)li元素。
$(‘ul li:first-child’);//為每個(gè)父元素（ul）都返回一個(gè)li。
:last-child
:only-child,匹配當(dāng)前父元素中只有一個(gè)子元素的元素。
:nth-child,對(duì)比eq()來(lái)理解，eq()值匹配一個(gè)，nth-child()為每個(gè)父元素都要匹配一個(gè)子元素。
:nth-child(index),index從1開始。
:nth-child(even)
:nth-child(odd)
:nth-child(3n),選取3的倍數(shù)的元素
:nth-child(3n+1),滿足3的倍數(shù)+1的元素。
.children()方法,只考慮子元素，不考慮后代元素。
===========================================================================
//$('ul li:first').css('backgroundColor', 'red'); //表示的是獲取所有的li中的個(gè)
//$('ul li:first-child').css('backgroundColor', 'red');//表示的是所有ul中個(gè)li
//$('ul li:nth-child(2)').css('backgroundColor', 'red');//表示的是所有ul中第二個(gè)li
jQuery的Dom操作
1、使用html()方法讀取或者設(shè)置元素的innerHTML：
alert($("a:first").html());//innerHTML
$("a:first").html("hello");
2、使用text()方法讀取或者設(shè)置元素的innerText：
alert($("a:first").text());
$("a:first").text("hello");
3、使用attr()方法讀取或者設(shè)置元素的屬性，對(duì)于jQuery沒(méi)有封裝的屬性（所有瀏覽器沒(méi)有差異的屬性）用attr進(jìn)行操作。
alert($("a:first").attr("href"));
$("a:first").attr("href", "http://www.rupeng.com");
attr({‘key’:’value’,’k’:’v’});
4、使用removeAttr刪除屬性。刪除的屬性在源代碼中看不到，這是和清空屬性的區(qū)別。attr(‘name’,’’)
========================================================================
$('#chk').attr('checked', 'true');//jq中讓checkbox選中
$('#chk').attr('class', 'cls'); //jq中為checkbox添加類樣式
$('#chk').attr('class', ''); //這么寫屬性還有
$('#chk').removeAttr('class');//這么寫屬性是真的移除了
動(dòng)態(tài)創(chuàng)建Dom節(jié)點(diǎn)
使用$(html字符串)來(lái)創(chuàng)建Dom節(jié)點(diǎn)，并且返回一個(gè)jQuery對(duì)象，然后調(diào)用append等方法將新創(chuàng)建的節(jié)點(diǎn)添加到Dom中：
var link = $("<a );
$("div:first").append(link);
$()創(chuàng)建的就是一個(gè)jQuery對(duì)象，可以完全進(jìn)行操作
var link = $("<a );
link.text(“百度");
$(“div:first”).append(link);。
創(chuàng)建radio，使用$(‘<input name=“”/>’);，而不要在創(chuàng)建好后通過(guò)attr(‘name’,’gender’).//通過(guò)attr()設(shè)置name,在IE6下有問(wèn)題。
append方法用來(lái)在元素的末尾追加元素（后一個(gè)子節(jié)點(diǎn)）。增加元素末尾(兒子)
prepend，在元素的開始添加元素（個(gè)子節(jié)點(diǎn)）。增加元素開始(兒子)
after，在元素之后添加元素（添加兄弟）增加元素后面(兄弟)
before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟)
其他追加方法(將自己追加到某元素)
子元素.appendTo(父元素);//主動(dòng)巴結(jié)!到后一個(gè)
子元素.prependTo(父元素);//主動(dòng)巴結(jié)到個(gè)。
(*)A.insertBefore(B);將A加到到B的前面，等同于B.before(A);
(*)X.insertAfter(Y);將X加到到Y(jié)的后面，等同于Y.after(X);效果都一樣
刪除節(jié)點(diǎn)
empty();
清空某元素下的所有子節(jié)點(diǎn)
內(nèi)部實(shí)現(xiàn)：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一樣。
remove(selector)
刪除當(dāng)前元素，返回值為被刪除的元素。還可以繼續(xù)使用被刪除的節(jié)點(diǎn)。比如重新添加到其他節(jié)點(diǎn)下：
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis);
參數(shù)expr,是一個(gè)選擇器，如果沒(méi)有選擇器，表示把選中的元素刪掉，如果有選擇器則表示在選中的元素中，再過(guò)濾出expr匹配的元素刪除掉。
案例：清空ul中的項(xiàng)，代碼見(jiàn)備注。$("ul li.testitem").remove(); 刪除ul下li中有testitem樣式的元素。
權(quán)限選擇：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1 option:selected”).appendTo($(“#select2”))；//在jQuery1.4.1下不太一樣。
=====================================================案例=============================================
$(function () {
$('#btn1').click(function () {
$(‘div’).empty();//div里面內(nèi)容沒(méi)了
});
$('#btn2').click(function () {
//$(‘div’).remove();//div沒(méi)了
$(‘div’).remove(‘.cls’);//應(yīng)用這個(gè)類樣式的div刪了
});
});
================================empty和remove=================================
$('#toRight').click(function () {
$('#se1 option:selected').appendTo('#se2');
});
$('#toLeft').click(function () {
$('#se2 option:selected').appendTo('#se1');
});
$('#toAllLeft').click(function () {
$('#se1 option').appendTo('#se2');
});
$('#toAllRight').click(function () {
$('#se2 option').appendTo('#se1');
});
=====================================權(quán)限選擇============================
<div style=" margin-left:400px; margin-top:10px;">
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
<option>添加</option>
<option>刪除</option>
<option>修改</option>
<option>查詢</option>
<option>打印</option>
</select>
<div style="width: 50px; float: left; ">
<input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
<input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
<input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
<input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
</div>
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
</select>
</div>
======================================================================
補(bǔ)充
寫代碼的好習(xí)慣，{、(寫完開始就寫結(jié)束，省得忘了。，在jQuery中這樣寫就不容易寫錯(cuò)了。
如果報(bào)錯(cuò)“例外被拋出”等，很可能是選擇器表達(dá)式有問(wèn)題，比如單詞拼寫錯(cuò)誤、加了不必要的空格等。val是方法不是屬性。jQuery是完全按照JavaScript的語(yǔ)法寫出來(lái)的JavaScript函數(shù)庫(kù)，沒(méi)有任何的魔法，任何看似怪異的寫法都是很合法的JavaScript語(yǔ)法。jQuery就是一堆寫好的JavaScript函數(shù)庫(kù)而已，沒(méi)有什么特殊的，你也可以寫出來(lái)，因此完全可以和普通JS代碼混著用。好不要dom、jQuery方式混著用。
注意不同jQuery版本的區(qū)別。
節(jié)點(diǎn)操作
替換節(jié)點(diǎn)：
$("br").replaceWith("<hr/>");
用<hr/>替換br
$(‘<br/>’).replaceAll(‘hr’); //調(diào)用者也得是選擇器選擇到的元素。
用<br/>元素替換所有的hr
紅色為選擇器；藍(lán)色為要替換的內(nèi)容（動(dòng)態(tài)創(chuàng)建的元素）。
包裹節(jié)點(diǎn)：
wrap()方法用來(lái)將所有元素逐個(gè)用指定標(biāo)簽包裹：【wrapAll()】
$(“p”).wrap(“<font color=‘red’></font>”) 將所有粗體字紅色顯示
結(jié)果：<font color=‘red’><p></p></font>
wrapInner()//在內(nèi)部圍繞
樣式操作
獲取樣式 attr("class")，設(shè)置樣式attr("class","myclass")，追加樣式addClass("myclass")(不影響其他樣式)，移除樣式removeClass("myclass")，切換樣式（如果存在樣式則去掉樣式，如果沒(méi)有樣式則添加樣式）toggleClass("myclass")，判斷是否存在樣式：hasClass("myclass")
練習(xí)：網(wǎng)頁(yè)開關(guān)燈的效果
<style type="text/css">
.dark
{
background-color:Black;
}
</style>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("body").toggleClass("dark");
});
});
</script>
本站文章版權(quán)歸原作者及原出處所有 。內(nèi)容為作者個(gè)人觀點(diǎn)， 并不代表本站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)，本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。本站是一個(gè)個(gè)人學(xué)習(xí)交流的平臺(tái)，網(wǎng)站上部分文章為轉(zhuǎn)載，并不用于任何商業(yè)目的，我們已經(jīng)盡可能的對(duì)作者和來(lái)源進(jìn)行了通告，但是能力有限或疏忽，造成漏登，請(qǐng)及時(shí)聯(lián)系我們，我們將根據(jù)著作權(quán)人的要求，立即更正或者刪除有關(guān)內(nèi)容。本站擁有對(duì)此聲明的最終解釋權(quán)。
