jQuery

李帅啊發表於2024-10-31
jQuery

1.jQuery介紹

1.1jQuery是什麼

jQuery是一個快速、簡介的JavaScript框架，是prototype之後一個優秀的JavaScript程式碼庫（或者JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，指倡導更少的程式碼，做更多的事情，他封裝JavaScript常用的功能程式碼，提供一種簡介的JavaScript設計模式，最佳化HTML文件操作、時間處理、動畫設計和ajax互動。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對css選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器。

1.2 jQuery的版本

目前市場上 1.x 2.x 3.x 

功能的完善在 1.x

2.x的時候屬於刪除舊程式碼，去除對於舊的瀏覽器相容程式碼

3.x的時候增加es的新特性以及調整核心程式碼的結構。

1.3 jQuery的引入

根本上jQuery就是一個寫好的js檔案，所以想要使用jQuery的語法必須先引入到本地

常用源地址：
https://www.bootcdn.cn/


1.本地引入
<script src="jQuery.js"></script>

2.遠端引入
<script scr="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

jQuery選擇器

1.直接查詢

1.1 基本選擇器
1.2 組合選擇器
1.3 屬性選擇器
1.4 表單選擇器
1.5 篩選器

/*
//基本選擇器
#id # id選擇符
element # 元素選擇符
.class # class選擇符
selector1, selector2, selectorN # 同時獲取多個元素的選擇符

//組合選擇器
ancestor descendant // 包含選擇符
parent > child // 父子選擇符
prev + next // 下一個兄弟選擇符
prev ~ siblings // 兄弟選擇符


//屬性選擇器
[attribute=value] // 獲取擁有指定資料attribute,並且置為value的元素
$('[type="checked"]')
$('[class*="xxx"]')



//表單選擇器
$("[type='text']")----->$(":text") 注意只適用於input標籤 :
$("input:checked")
同樣適用表單的以下屬性
:enabled
:disabled
:checked
:selected


//篩選器
:first // 從已經獲取的元素集合中提取第一個元素
:even // 從已經獲取的元素集合中提取下標為偶數的元素
:odd // 從已經獲取的元素集合中提取下標為奇數的元素
:eq(index) // 從已經獲取的元素集合中提取指定下標index對應的元素
:gt(index) // 從已經獲取的元素集合中提取下標大於index對應的元素
:last // 從已經獲取的元素集合中提取最後一個元素
:lt(index) // 從已經獲取的元素集合中提取下標小於index對應的元素
:first-child // 從已經獲取的所有元素中提取他們的第一個子元素
:last-child // 從已經獲取的所有元素中提取他們的最後一個子元素
:nth-child // 從已經獲取的所有元素中提取他們的指定下標的子元素
// 篩選器方法
$().first() // 從已經獲取的元素集合中提取第一個元素
$().last() // 從已經獲取的元素集合中提取最後一個元素
$().eq() // 從已經獲取的元素集合中提取指定下標index對應的元素

*/

1.1 基本選擇器

#id # id選擇符
element # 元素選擇符
.class # class選擇符
selector1, selector2, selectorN # 同時獲取多個元素的選擇符

$("#id")
$(".class")
$("element")
$(".class,p,div")

<script>
    $("#i1").css("color","red");    //id選擇符
    $("p").css("color","red");      //屬性選擇符
    $(".c3").css("color","blue")  ;     //class選擇符
    $("div.c1#q1").css("color","red");  //同時滿足多個元素
    $("p,div").css("color","yellow")    //同時選中多個標籤，滿足其中一個則執行該程式碼
</script>

1.2 組合選擇器

A B 	//包含選擇符
parent > child		//父子選擇符
prev + next		//下一個兄弟選擇符
prev ~ siblings		//下面兄弟選擇符

$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")

<script>
    $("div div").css("color","red")     //包含選擇符
    $("div > div").css("color","red")       //父子選擇符
    $("#l1 + div").css("color","red")   //下一個兄弟選擇符
    $("#l1 ~ div").css("color","red")      //下面所有兄弟選擇符
</script>

1.3 屬性選擇器

[attribute=value] //獲取擁有指定資料attribute，並且置為value的元素

$('[type="checked"]')
$('[class*="xxx"]')

$("[type='text']").css("border","1px solid red")
$("[class*='c']").css("color","yellow")

1.4表單選擇器

$("[type='text']")----->$(":text") 注意只適用於input標籤 :
$("input:checked")
同樣適用表單的以下屬性
:enabled
:disabled
:checked
:selected

$("[type='text']").css("border","1px solid red")
$(":password").css("border","2px solid red")

1.5篩選器

/*
    $("ul li").css("color","red")   //所有ul下的li標籤都獲取到
    $("ul li:first").css("color","red"); //查詢ul下的第一個li標籤
    $("ul li:last").css("color","red"); //查詢ul下的最後一個li標籤
    $("ul li:even").css("color","red") ;    //查詢ul下為奇數的li標籤
    $("ul li:odd").css("color","red");  //查詢ul下為偶數的li標籤
    $("ul li:eq(2)").css("color","yellow");    //查詢ul下索引等於3的li標籤
    $("ul li:gt(2)").css("color","red");    //查詢ul下索引大於2的li標籤
    $("ul li:lt(2)").css("color","green")   //查詢ul下索引小於2的li的標籤

    $("li:first-child").css("color","red"); //查詢父級元素中的第一個li標籤
*/

1.6篩選器方法

/*
    var index =3;
    $(".outer li").eq(index).css("color","red");
    $(".outer li").last().css("color","red");
    $(".outer li").first().css("color","red");
	*/

2.導航查詢

  //查詢子代
  $(".c2").children("ul").css("color","red")   //查詢為ul的子代
  $(".outer").children().css("color","red") //查詢所有子代
  //查詢後代
  $(".outer").find("ul").css("color","blue")  //查詢後代

  //向下查詢兄弟標籤
  $(".c4 .c5").next().css("color","red")  //向下查詢一個兄弟標籤
  $(".c4 .c5").nextAll().css("color","red") //向下查詢所有兄弟標籤
  $(".c4 .c5").nextUntil(".c6").css("color","red")  //向下查詢所有兄弟標籤到那個兄弟標籤結束

  //向上查詢兄弟標籤
  $(".c4 .c5").prev().css("color","red"); //向上查詢一個兄弟標籤
  $(".c4 .c5").prevAll().css("color","red");  //向上查詢所有兄弟標籤
  $(".c4 .c6").prevUntil(".c5").css("color","red") //向上查詢兄弟標籤到那個兄弟標籤結束

  //查詢所有兄弟標籤
、  // $(".c4 .c5").siblings().css("color","blue");  //查詢所有兄弟標籤

  //查詢父標籤
  $(".c4 .c5").parent() //查詢父親
  $(".c4 .c5").parent().parent()  //查詢父親的父親
  $(".c4 .c5").parents()  //查詢所有的父親
  $(".c4 .c5").parentsUntil() //查詢到那一層父親結束

jQuery和DOM物件轉化

/*// jquery物件 = [dom1,dom2,...]
var $ele = $(".c3 li")
$ele.css("color","red")
// jquery物件轉換dom物件 jquery物件[索引]
$ele[1].style.color="green"

// 將dom物件轉換成jq物件:    $(dom)      []
dom = document.getElementById("i1")
$(dom).css("color","red")*/

相關文章