jquery基礎及選擇器

2022-08-12 08:03:15 字數 2982 閱讀 2477

jquery庫檔案

分為開發版和發布版

在頁面中引用jquery

使用jquery彈出提示框

jquery語法規則

工廠函式¥():將dom物件轉化為jquery物件

jquery操作頁面元素

使用addclass( )方法為元素新增樣式

使用css( )方法設定元素樣式

使用show( )、hide( ) 方法設定元素的顯示和隱藏

addclass()方法 --為元素新增樣式

語法:jquery 物件.addclass([樣式名]);

示例:$("tr:odd").addclass("odd");

css()方法  --設定元素樣式

語法:css() ;

示例:$(this).css();

設定元素的顯示和隱藏

語法:$(selector).show( );

$(selector).hide( );

示例:$(this).children("div").show();

$(this).children("div").hide();

jquery**分割

$等同於jquery

$(document).ready()等同於jquery(document).ready()

$(function(){})等同於jquery(function()})

鏈式操作   --對乙個物件進行多重操作,並將操作結果返回給該物件

示例:$("h2").css("background-color","#ccffff").next().css("display","block");

隱式操作

示例:$(document).ready(function() );

jquery選擇器分類

基本選擇器

示例:$("h1").css("color", "blue");   //標籤選擇器

$(".price").css();  //類選擇器

$("#author").css("clor", " #083499");  //id選擇器

$(".intro,dt,dd").css("color", " #ff0000");  //並集選擇器

$("*").css("font-weight", "bold");  //全域性選擇器

層次選擇器

示例:$(".textright p").css("color","red");  //後代選擇器

$(".textright>p").css("color", "red");  //子選擇器

$("h1+p").css("text-decoration", "underline");  //相鄰元素選擇器

$("h1~p").css("text-decoration", "underline");   //同輩元素選擇器

屬性選擇器

示例:$("#news a[class]").css("background","#c9cbcb");//a標籤帶有class屬性

$("#news a[class='hot']").css("background", "#c9cbcb"); // class為hot

$("#news a[class!='hot']").css("background", "#c9cbcb");// class不為hot

$("#news a[href^='www']").css("background","#c9cbcb");//以www開頭

$("#news a[href$='html']").css("background", "#c9cbcb");//以html結尾

$("#news a[href*='k2']").css("background","#c9cbcb"); //包含"k2"的元素

基本過濾選擇器

語法描述

示例:eq(index)

選取索引等於index的元素(index從0開始)

$("li:eq(1)" )選取索引等於1的元素

:gt(index)

選取索引大於index的元素(index從0開始)

$("li:gt(1)" )選取索引大於1的元素(注:大於1,不包括1)

:lt(index)

選取索引小於index的元素(index從0開始)

$("li:lt(1) " )選取索引小於1的元素(注:小於1,不包括1)

:header

選取所有標題元素,如h1~h6

$(":header" )選取網頁中所有標題元素

:focus

選取當前獲取焦點的元素

$(":focus" )選取當前獲取焦點的元素

:animated

選擇所有動畫

$(":animated" )選取當前所有動畫元素

示例:// 標題元素

$(".contain :header").css();

// 第乙個、最後乙個元素

$(".contain li:first").css();

$(".contain li:last").css("border","none");

// 偶數、奇數元素

$(".contain li:even").css("background","#f0f0f0");

$(".contain li:odd").css("background","#cccccc");

// 小於、大於某個索引值

$(".contain li:lt(2)").css();

$(".contain li:gt(3)").css();

可見性過濾選擇器

語法描述

示例:visible

選取所有可見的元素

$(":visible")選取所有可見的元素

:hidden

選取所有隱藏的元素

$(":hidden") 選取所有隱藏的元素

示例:$("p:hidden").show();

$("p:visible").hide();

Jquery 基礎 選擇器。

jquery選擇器繼承了css與path語言的部分語法,允許通過標籤,屬性名或者內容對dom元素進行快速,準確的選擇,而不必擔心瀏覽器的相容性。通過 selector 得到的物件,因為無論是對事件的處理 遍歷dom ajax,本質上都是對物件的操作。一 jquery選擇器優勢 1.簡潔寫法 2.支援...

jQuery基礎 選擇器

1 id 返回值單個元素的組成的集合 myid 說明 就是選擇html中的id myid 2 element 返回值集合元素 div 說明 可以返回例如 div input a 等中的值 3 class 返回值 集合元素 myclass 說明 就是選擇html中的iclass myclass 4 所...

jQuery基礎 選擇器

選擇器 功能返回值 idid選擇器 單個元素 element 元素選擇器 元素集合 class 類選擇器 元素集合 匹配所有元素 元素集合 selector1,selector2 將每乙個選擇器匹配到的元素合併後一起返回 元素集合 選擇器功能 返回值ancestor descendant 根據祖先元...