jQuery框架選擇器

2021-10-06 08:52:33 字數 3123 閱讀 3312

/* 基本選擇器 /

/ id選擇器 #id /

/ class選擇器 .class /

/ 標籤選擇器 標籤名 /

/ 並集選擇器 #id,.class,標籤名 /

/ 萬用字元 * */

/* 層級選擇器 /

/ $(".box")獲採樣式為box的標籤 /

/ $(".box div") 獲取class為box的標籤(所有子孫節點)中的div標籤 */

// $(".box div").css(「background」, 「red」);

/*  獲取指定標籤子節點中所有對應的標籤 */

// $(".box > div").css("background", "red");

/* 獲取指定標籤後面的第乙個兄弟節點 */

// $("#testid + div").css("background", "#195");

/* 獲取指定標籤後面的所有的兄弟節點 */

$("#testid ~ div").css("background", "#195");

/* 父子選擇器 */

/*獲取父標籤相關的方法 /

/ [1] parent() 獲取父標籤 /

// $("#testid").parent().css(「border」, 「2px solid #000」);

/ [2] parents() 獲取所有的祖先節點 */

// $("#testid").parents().css(「border」, 「2px solid #000」);

// $("#testid").parents(「div」).css(「border」, 「2px solid #000」);

/* [3]parentsuntil() 獲取 所有的祖先節點(直到某個節點為止) 不包含*/

// $("#testid").parentsuntil("html").css("border", "2px solid #000");

/*獲取子節點相關的方法 */

/* [1] children() 獲取當前標籤所有的子標籤*/

// $(".box").children("span").css("color", "red");

/* [2] siblings() 獲取當前標籤所有的兄弟標籤 */

// $("#testid").siblings().css("color", "red");

/* [3] next() 獲取當前標籤下乙個兄弟節點 */

// $("#testid").next().css("color", "red");

/* [4] prev() 獲取當前標籤上乙個兄弟節點 */

// $("#testid").prev().css("color", "red");

// $("testid").nextall(); //獲取當前標籤後面所有兄弟節點

// $("testid").nextuntil();//獲取當前標籤後面所有兄弟節點(直到...為止)

// $("testid").prevall();

/* 篩選選擇器 /

/ 001-獲取第乙個li標籤 */

// $(「li」).eq(0).css(「background」, 「red」);

// $(「li:eq(0)」).css(「background」, 「red」);

// $(「li:first」).css(「background」, 「#195」);

/* 002-獲取最後乙個li標籤 */

// $("li:last").css("background", "#195");

/* 003-獲取指定索引的li標籤 */

// $("li:eq(3)").css("background", "#195");

/* 004-獲取索引為奇數的所有li標籤 */

/* 004-獲取索引為偶數的所有li標籤 */

// $("li:odd").css("background", "#195");

// $("li:even").css("background", "#f08");

/* 005-獲取索引小於3的索引li標籤 */

/* 005-獲取索引大於5的索引li標籤 */

// $("li:lt(3)").css("background", "#195");

// $("li:gt(5)").css("background", "#195");

/* 006-獲取所有的li標籤除了索引為3的標籤之外 */

$("li:not(:eq(3))").css("background", "#195");

/* first 第乙個 */

/* last 最後乙個 */

/* eq 等於 */

/* not 除了 */

/* lt 小於 */

/* gt 大於 */

/* 屬性選擇器 /

/ 001-根據屬性名來選擇標籤,要選擇擁有href屬性的a標籤 */

// $(「a[href]」).css(「background」, 「red」);

/* 002-根據屬性值來選擇標籤 */

/* [1] 鏈結位址等於 */

// $("a[href='']").css("background", "red");

/* [2] 鏈結位址不等於 */

// $("a[href!='']").css("background", "red");

/* [3] 鏈結位址以https開頭 */

/* [4] 鏈結位址以.cn結尾 */

// $("a[href$='.cn']").css("background", "red");

/* [5] 屬性值包含特定值 */

$("a[href*='baidu'][title='標題']").css("background", "red");

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...