JQ選擇器(標籤)學習
JQ選擇器
具有限定子節點選擇器:$("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){} //判斷是否已經打勾
相關文章
- jQuery基礎學習(1)(標籤選擇器,事件)jQuery事件
- K8S標籤與標籤選擇器K8S
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- css標籤選擇器的使用注意CSS
- Kubernetes – 標籤和選擇器
- jQuery選擇器 標籤選擇元素+css簡單新增移除操作jQueryCSS
- day42:HTML標籤和CSS選擇器HTMLCSS
- jq選擇子元素
- jq動態生成的元素(標籤)新增點選事件事件
- jQ基礎篇–jQuery選擇器總結jQuery
- Laravel + Vue 製作一款標籤選擇器LaravelVue
- 直播軟體搭建,LabelList標籤選擇器
- 【Flutter 專題】97 仿網易新聞標籤選擇器Flutter
- js選擇物件和jq選擇物件的區別JS物件
- less學習三—父選擇器
- jQuery 原始碼學習 (六) 選擇器jQuery原始碼
- CSS3學習----選擇器、字型CSSS3
- git學習——打標籤Git
- 容器編排系統之K8s資源標籤、標籤選擇器、資源註解K8S
- JSF選擇標籤分行顯示請教JS
- Laravel + Vue 製作一款標籤選擇器(詳細過程)LaravelVue
- css 選擇器效能的取捨。和大量標籤帶有都是classCSS
- FPGA 學習 00 二選一多路選擇器FPGA
- css樣式選擇器學習筆記CSS筆記
- 透過NandGame網站學習選擇器NaNGAM網站
- Flutter 基於ChoiceChip的標籤選擇控制元件Flutter控制元件
- 標籤印表機使用Argobar Pro無法選擇驅動?Go
- 12.8學習日報(背景簡寫、選擇器繼承性、選擇器的權重)繼承
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- 4月10日學習筆記——jQuery選擇器筆記jQuery
- MySQL學習之影響優化器選擇索引因素MySql優化索引
- CSS學習(二)選擇符CSS
- Mysql學習版本的選擇MySql
- jQuery選擇器——基本選擇器jQuery
- MyBatis學習——foreach標籤的使用MyBatis
- js如何對標籤有選擇性的禁用滑鼠右鍵JS
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- jQuery基礎學習(3)(獲取標籤屬性,動態新增標籤)jQuery