jquery知識點

標籤：

引入jquery

<script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>

基礎選取器

id選取器

$("#my_id")

元素選取器---eg:div

$(“element”)

class選取器

$(“.class”)

全選---eg:$(“div *”)--選擇全部的div

$(“*”)

選擇多個

$(“sele1,sele2,seleN”)

父子選取器--子包括子孫

$("ance desc")

父子選取器-子僅僅包括兒子

$(“parent > child”)

相鄰的選取器--只擷取相鄰的下一個元素

$(“prev + next”)

相鄰的選取器--擷取相鄰的所有元素

$(“prev ~ siblings”)

eg:

$("p~span").css("border", "solid 1px red");
$("p~label").html("我們都是p先生的粉絲");

過濾選取器

first過濾選取器--選擇第一個li

$(“li:first”)

:eq(index)過濾選取器--從0開始計數

eg: $("li:eq(2)").css("background-color", "#60F");

常值內容尋找過濾選取器contains(text)

$("li:contains(‘你好‘)").css("background", "green");

:has(selector)過濾選取器

<li><p>我是P先生</p></li>

$("li:has(‘p‘)").css("background-color", "blue");

:hidden過濾選取器:visible過濾選取器[attribute=value]屬性選取器

 <li title="水果">西瓜</li>

eg: $("li[title=‘水果‘]").css("background-color", "green");

[attribute!=value]屬性選取器[attribute*=value]屬性選取器--包含

<li title="水果">西瓜</li>

eg: $("li[title*=‘水‘]").css("background-color", "green");

:first-child子項目過濾選取器--每個列表的第一個li

 $("li:first-child").css("background-color", "green");

:last-child子項目過濾選取器

表單選取器

:input表單選取器--冒號前有空格返回 全部的表單元素，不僅包括所有<input>標記的表單元素，而且還包括<textarea>、<select> 和 <button>標記的表單元素

 

<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />

</form>

 

eg:$("#frmTest :input").addClass("bg_blue");

 

:text表單文本選取器

 

 $("#frmTest :text").addClass("bg_blue");

 

:password表單密碼選取器

 <input type="password" id="Text2" value="密碼文本輸入框"/>

$("#frmTest :password").addClass("bg_red");

:radio選項按鈕選取器

<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input id="Radio1" type="radio" />
<label for="Radio1">
男</label>

</form>

$("#frmTest :radio").attr("disabled","true");

:checkbox複選框選取器

  $("#frmTest :checkbox").attr("disabled","true");

:submit提交按鈕選取器

通常情況下，一個表單中只允許有一個“type”屬性值為“submit”的提交按鈕

<input type="submit" value="點我就提交了" />

<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input type="submit" value="點我就提交了" /><br />
<button>
Button</button><br />
</form>

$("#frmTest input:submit").addClass("bg_red");-----如果沒有input的話，button也會添加上樣式。

:image映像域選取器

使用:image選取器只能擷取<input>映像域，而不能擷取<img>格式的映像元素。

<form id="frmTest" action="#">
<input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
<br />
<img src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
</form>

<script type="text/javascript">
$("#frmTest :image").addClass("bg_red");
</script>

:button表單按鈕選取器

:button選取器能擷取且只能擷取“type”屬性值為“button”的<input>和<button>這兩類普通按鈕元素。

$("#frmTest :button").addClass("bg_blue");

:checked選中狀態選取器

$("#frmTest :checked").attr("disabled", true);

<input id="Radio1" type="radio" checked="checked" />
<label id="Label1" for="Radio1">
蘋果</label>

:selected選中狀態選取器

與:checked選取器相比，:selected選取器只能擷取<select>下拉式清單方塊中全部處於選中狀態的<option>選項元素

<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="0">蘋果</option>
<option value="1" selected="selected">桔子</option>
<option value="2">荔枝</option>
<option value="3" selected="selected">葡萄</option>
<option value="4">香蕉</option>
</select><br /><br />
<div id="tip"></div>
</form>

<script type="text/javascript">
var $txtOpt = $("#frmTest :selected").text();
$("#tip").html("選中內容為:" + $txtOpt);
</script>

dom元素的操作

 

 

jquery知識點