程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> jQ選擇器學習片段(JavaScript 部分對應),jq選擇器

jQ選擇器學習片段(JavaScript 部分對應),jq選擇器

編輯:關於.NET

jQ選擇器學習片段(JavaScript 部分對應),jq選擇器


$()函數在大多的JavaScript類庫中都被作為一個選擇器函數來使用,在jQuery中就是。

  $(“#id”)通過id來獲取元素,用來代替document.getElementById()函數。紅色函數(JavaScript)

  $(“tagName”)通過標簽名來獲取元素,用來代替document.getElementsByTagName()函數。

  jQuery的基本語法是:$(selector).action(), selector即選擇器。

jQuery選擇器的分類

  jQuery的選擇器基本可以分為四大類:

  基本選擇器(basic)

  層次選擇器(level)

  過濾選擇器(filter)

  表單選擇器(form)

一、基本選擇器(basic)

  * 匹配所有元素.示例:$(“*")選取所有元素。

  #id根據給定的id匹配元素(最多只返回一個元素).示例: $("#IdName”)選取id="IdName"的元素。

  .class根據給定的類名匹配元素.示例:$(".ClassName”)選取所有class=“ClassName"的元素。

  element根據給定的元素名匹配元素.示例: $(“p")選取所有<p>元素。

  .class.class 示例: $(".ClassName.MyClass”)選取所有且class="MyClass”的元素.(交集)。

  selector1, selector2, …, selectorN, 將每一個選擇器匹配到的元素合並後一起返回.(並集)。

  除了#id選擇器返回單個元素外,其他選擇器返回的都是元素集合。

  這是因為HTML規范裡面id應該是唯一的,所以重復id的元素沒有被考慮。

  如果多個元素的id相同,取這個id也只能獲取第一個元素.即獲取的jQuery對象的length屬性是1。

  如果要匹配的元素不存在,則都返回一個空的jQuery對象。

    基本選擇器之間可以組合,用逗號分隔,結果取所有條件的結果的並集。

  當沒有用逗號分隔時,應該是所有條件都滿足的交集。

二、層次選擇器(level)

  $(“div span”) 選取dia元素裡的所有span後代元素,包括直接子元素和更深嵌套的後代元素。(即在div 即可,無論是否多層嵌套)

  例:$(“div span”)選取<div>裡的所有的<span>元素。

  注意:選擇器都是全頁面掃描,返回一個集合,所有符合選擇條件的元素都會被包括進去。所以多個<div>下面的<span>都會被選擇。

  $(“parent>child”)選取parent元素下的child子元素,即只有直接子元素被選取.其他後代元素不包括.

  例:$(“div>span”)選取<div>元素下元素名是<span>的子元素.

  $(“prev+next”)選取緊接在prev元素後的next元素(同一層級)。

  例:$(“.one+div”)選取class為one的下一個div元素。

  $(“prev+siblings”)選取prev元素之後的所有siblings元素(同一層級)。

  例:$(“#two~div”)選取id為two的元素後面的所有<div>兄弟元素。

  等價方法:

  $(“prev+next”)等價於方法$(“prev”).next(“next”);選取prev元素之後緊接著的一個next元素。

  $(“prev~sublings”)等價於方法$(“prev”).nextAll(“sublings”),選取prev元素之後的所有同級的sublings元素。

  而$(“prev”).sublings(“next”)方法選取與prev同輩的所有next元素,與前後位置無關。

三、部分過濾選擇器

基本過濾選擇器規則:

基本過濾選擇器

 

選 擇 器 描 述 返 回 示 例 :first 選取第1個元素 單個元素 $("div:first")選取所有 <div>元素
中第一個<div>元素 :last 選取最後1個元素 單個元素 $("div:last")選取所有 <div>元素
中最後一個<div>元素 :not(selector) 去除所有與給定選擇器
匹配的元素 集合元素 $("input:not(.myClass)")選取class不是
myClass的<input>元素 :even 選取索引(從0開始)是偶數
的所有元素 集合元素 $("input:even")選取索引是偶數的
<input>元素 :odd 選取索引(從0開始)是奇數
的所有元素 集合元素 $("input:odd")選取索引是奇數的
<input>元素 :eq(index) 選取索引(從0開始)等於
index的元素 單個元素 $("input:eq(1)")選取索引等於1的
<input>元素 :gt(index) 選取索引(從0開始)大於
index的元素 集合元素 $("input:gt(1)")選取索引大於1的
<input>元素 :lt(index) 選取索引(從0開始)小於
index的元素 集合元素 $("input:lt(1)")選取索引小於1的
<input>元素 :header 選取所有的標題元素,即
<h1>到<h6> 集合元素 $(":header")選取頁面中所有的標題元素 :animated 選取當前正在執行動畫的
所有元素 集合元素 $("div:animated")選取當前正在執行動畫
的<div>元素

 

 

目前先寫到這裡!會陸續更新~~

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved