JQ選擇器(標籤)學習

樂哉樂哉發表於2012-12-08

JQ選擇器

JQUERY找無規律元素文字的辦法

具有限定子節點選擇器:$("mix1[mix2]"):返回包含mix2的mix1節點.如:$("div[a]"):包含a標籤的div. 
這個和$("div a")不相同.後者表示div中的a標籤,返回的是a標籤物件,前者返回的是div標籤物件 
冒號限定結點選擇器:$("mix:condition"):mix標籤,並且滿足限定條件. 
E:root:型別為E,並且是文件的根元素 
E:nth-child(n):是其父元素的第n個型別為E的子元素 ,基數從1開始 
E:first-child:是其父元素的第1個型別為E的子元素 
E:last-child:是其父元素的最後一個型別為E的子元素 
E:only-child:且是其父元素的唯一一個型別為E的子元素 
E:empty:沒有子元素(包括text節點)的型別為E的元素 
E:enabled 
E:disabled:型別為E,允許或被禁止的使用者介面元素 
E:checked:型別為E,處於選中狀態的使用者介面元素(例如單選按鈕或核取方塊) 
E:visible:選擇所有可見元素(display值為block或visible,visibility值為visible元素,不包括hide域) 
E:hidden:選擇所有隱藏元素(非Hide域,且display值為block或visible,visibility值為visible的元素) 
E:not(s):型別為E,不匹配選擇器s 
E:eq(n),E:gt(n),E:lt(n):元素限定 
E:first:相當於E:eq(0) 
E:last:最後一個匹配的元素 
E:even:從匹配的元素集中取序數為偶數的元素 
E:odd:從匹配的元素集中取序數為奇數的元素 
E:parent:選擇包含子元素(包含text節點)的所有元素 
E:contains('test'):選擇所有含有指定文字的元素 
表單選擇器: 
E:input:選擇表單元素(input,select,textarea,button) 
E:text:選擇所有文字域(type="text") 
E:password:選擇所有密碼域(type="password") 
E:radio:選擇所有單選按鈕(type="radio") 
E:checkbox:選擇所有核取方塊(type="checkbox") 
E:submit:選擇所有提交按鈕(type="submit") 
E:image:選擇所有影像域 (type="image") 
E:reset:選擇所有清除域(type="reset") 
E:button:選擇所有按鈕(type="button") 
當然包括E:hidden

8.xPath路徑查詢:

先介紹下xPath的語法: 
/:選取根節點 
//:選取文件中所有符合條件的節點,不管該節點位於何處 
.:選取當前節點 
..:選取單前節點的父節點 
@:選取屬性,這個在之前說過了(屬性選擇器) 
nodename:選取節點下的所有節點 
jQuery中的應用: 
根節點是很少用到的,常用的如下面的例子: 
$("div/p")相當於$("div>p") 
$("div//p")相當於$("div p") 
$("//div/../p"):所有div節點的父節點下的p標籤 
還有相對路徑的寫法以及支援的Axis選擇器,還不是會應用,不介紹了...已經一大堆了

$的其他用法:

$(html節點):根據提供的原始HTML標記字串,動態建立由jQuery物件包裝的DOM元素.如: 
$("Hello").appendTo("#body");//把Hello新增到body元素中 
$(document):網頁文件物件 
$(document.body):網頁body物件,和$("body")是一樣的 
$(函式):DOM載入後就執行該函式.所以$(document).ready()可以寫做$() 
$(選擇器部分,選擇器來源):這個舉例說明 
$("input:radio",document.forms[0]):在文件的第一個表單中,搜尋所有單選按鈕 
$("div",xml.responseXML):查詢指定XML文件中的所有div元素 
選擇器來源可以是:作為上下文的DOM元素,文件或jQuery物件 
還有兩個:$.extend(prop)和$.noConflict()是和外掛以及和其他庫相容的使用,以後再寫

下拉框,單選框,多選框整理 

 1,下拉框:
var cc1  = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉選單的選中項的文字(注意中間有空格)
var cc2 = $('.formc select[@name="country"]').val();  //得到下拉選單的選中項的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉選單的選中項的ID屬性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("1111").appendTo("#select")//新增下拉框的option
稍微解釋一下:
1.select[@name='country'] option[@selected] 表示具有name 屬性,
並且該屬性值為'country' 的select元素 裡面的具有selected 屬性的option 元素;
可以看出有@開頭的就表示後面跟的是屬性。

2,單選框:
$("input[@type=radio][@checked]").val();  //得到單選框的選中項的值(注意中間沒有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //設定單選框value=2的為選中狀態.(注意中間沒有空格)

3,核取方塊:
$("input[@type=checkbox][@checked]").val(); //得到核取方塊的選中的第一項的值
$("input[@type=checkbox][@checked]").each(function(){ //由於核取方塊一般選中的是多個,所以可以迴圈輸出
  alert($(this).val());
  });

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判斷是否已經打勾

相關文章