JQuery基礎(chǔ) 簡(jiǎn)介

一個(gè)JavaScript的框架，簡(jiǎn)化了JS的語法和操作，定義了HTML屬性操作、樣式操作、DOM操作等相關(guān)函數(shù)，實(shí)現(xiàn)了對(duì)ajax異步請(qǐng)求封裝。提供了很多預(yù)定義函數(shù)的JS文件。

作用

簡(jiǎn)化部分JavaScript開發(fā)

使用步驟

1.引入JQuery
2.編寫代碼

引入JQuery 方式1: 引入本地JQuery文件

1.下載JQuery文件
    地址1:http://code.jquery.com/jquery-3.6.0.js
    地址2:http://code.jquery.com/jquery-3.6.0.min.js
2.將JQuery文件存放在js文件夾下
3.在使用JQuery文件的html中使用script標(biāo)簽進(jìn)行引入

方式2: 通過script標(biāo)簽直接引入JQuery的網(wǎng)絡(luò)地址

核心函數(shù)

jQuery()函數(shù),選擇器函數(shù),用于獲取HTML文檔中的元素,簡(jiǎn)寫為$()

作用1: 尋找標(biāo)簽

語法: $("選擇器")
示例:span標(biāo)簽
p標(biāo)簽1
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺(tái)小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了盂縣免費(fèi)建站歡迎大家使用！
p標(biāo)簽2

作用2: 創(chuàng)建標(biāo)簽

語法: $("標(biāo)簽")
示例:
p標(biāo)簽

作用3: 入口函數(shù)

作用: 類似于window.onload = function(){}; 當(dāng)頁面加載完成后執(zhí)行
語法1: $(document).ready(function(){});
語法2: $(function(){});
示例:   
p標(biāo)簽

作用4: 將DOM對(duì)象轉(zhuǎn)換為JQuery對(duì)象

語法: $(DOM對(duì)象)
示例:   
p標(biāo)簽
注意: JQuery無法使用DOM對(duì)象提供的屬性與方法

選擇器 基本選擇器

id選擇器: #id
class選擇器: .class
標(biāo)簽選擇器: 標(biāo)簽名
通配選擇器: *

偽類選擇器

鼠標(biāo)懸浮
獲取焦點(diǎn)
...

復(fù)合選擇器

selector1 selector2: 后代選擇器,選擇所有selector1匹配的元素里面的匹配selector2的元素
selector1 >selector2: 子元素選擇器,選擇匹配selector1元素的子標(biāo)簽中匹配selector2的元素
selector1,selector2: 選擇所有匹配selector1和selector2的元素(并集)
selector1 + selector2: 匹配所有緊接在selector1元素后的selector2元素
selector1 ~ selector2: 匹配所有在selector1元素后的selector2元素

示例:
p1
p2
p3
p4
p1
p2
p3
p4
div外的p標(biāo)簽

屬性選擇器

語法: 
    選擇器[屬性名]
    選擇器[屬性名=屬性值]
示例:

JQuery選擇器篩選 語法

選擇器篩選語法	說明
$("selector: first ")	匹配selector選擇的元素集合中的第一個(gè)
$("selector: last ")	匹配selector選擇的元素集合中的最后一個(gè)
$("selector: odd ")	匹配selector選擇的元素集合中索引為奇數(shù)的元素(1,3,5,7,…)
$("selector: even ")	匹配selector選擇的元素集合中索引為偶數(shù)的元素(0,2,4,6,…)
$("selector: eq(index) ")	匹配selector選擇的元素集合中索引為index的元素
$("selector: lt(index) ")	匹配selector選擇的元素集合中索引小于index的元素
$("selector: gt(index) ")	匹配selector選擇的元素集合中索引大于index的元素
$("selector [attrName=attrValue] ")	匹配selector選擇的元素集合中attrName屬性值為attrValue的元素
$("selector [attrName!=attrValue] ")	匹配selector選擇的元素集合中attrName屬性值不為attrValue的元素

示例

   
p1
p2
p3
p4
p1
p2
p3
p4
div外的p標(biāo)簽

JQuery操作內(nèi)容

獲取內(nèi)容
    語法1: $("選擇器").text()
    語法2: $("選擇器").html()
修改內(nèi)容
    語法1: $("選擇器").text(修改后的內(nèi)容)
    語法2: $("選擇器").html(修改后的內(nèi)容)
    注意: 會(huì)替換標(biāo)簽中原內(nèi)容

示例:   
p標(biāo)簽

JQuery操作屬性

一般屬性
語法: attr()
示例: 
//1.獲取元素屬性值
var v1 = $("#img").attr("src");
var v2 = $("#img").attr("width");
//2.設(shè)置元素屬性
$("#img").attr("src","imgs/img01.png");
$("#img").attr("width","200px");

value屬性
語法: val()
示例: 
//1.獲取元素value屬性值
var v = $("#userName").val();
//2.設(shè)置元素的value屬性值
$("#userName").val("這是設(shè)置的值");

獲取單選按鈕選中的值   
1.選擇您的性別?
男
女
獲取多選按鈕選中的值   
1.選擇您的愛好?
籃球
足球
刪除屬性
語法: removeAttr(屬性名)
示例: 
$("#input").removeAttr("value");
$("#input").removeAttr("name")

class屬性
語法: 
addClass(): 添加
removeClass(): 刪除
toggleClass(): 原標(biāo)簽沒有就是添加,原標(biāo)簽有就是刪除
attr("class"): 獲取class的屬性值
示例:   測(cè)試

JQuery操作樣式

獲取css屬性值
語法: css("屬性名")
注意: 不限于內(nèi)聯(lián)樣式的屬性

修改css屬性值
語法: css("屬性名","屬性值");
注意: 不限于內(nèi)聯(lián)樣式的屬性

示例:   

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

網(wǎng)站名稱：Java學(xué)習(xí)筆記day42-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/dioijs.html