一篇文章帶你入門和了解Jquery的基礎(chǔ)操作

更新時間：2021年11月15日 14:48:29 作者：歌九

這篇文章主要講述了一個JQuery入門基礎(chǔ)，實(shí)現(xiàn)的過程效果都很簡單，特別適合初學(xué)者來學(xué)習(xí)，感興趣的小伙伴們可以參考一下

1.Jquery的使用步驟:

(1)導(dǎo)入js庫

<script src="js/jquery-1.11.3.min.js"></script>
//js/jquery-1.11.3.min.js   壓縮版(推薦)
//js/jquery-1.11.3.js       完整版

(2)頁面載入事件

$(document).ready(function(){
    業(yè)務(wù)操作 ;
});
//優(yōu)化后:
$(function(){
    業(yè)務(wù)操作;
});

2.Jq對象和js對象的轉(zhuǎn)換

(1)js對象------>jq對象

var js對象 = document.getElementById("id屬性值");
var $jq對象 = $(js對象)

(2)jq對象------>js對象

var js對象 = $jq對象.get(index) ;

3.jq的基本選擇器

//(1)jq的id選擇器

$("#id屬性值").綁定事件方法(function(){
    業(yè)務(wù)操作 ;
});

//(2)jq的class選擇器

$("#.class屬性值").綁定事件方法(function(){
    業(yè)務(wù)操作 ;
});

//(3)表單選擇器

$("選中的input標(biāo)簽[帶指定屬性的標(biāo)簽]").綁定事件方法(function(){
    業(yè)務(wù)操作 ;
});

//(4)element選擇器

$("元素/標(biāo)簽").html("XXX") ;

4.jq的層級選擇器

//后代選擇器
$("父標(biāo)簽 子標(biāo)簽")

//子元素選擇器
$("父元素>子元素")

5.過濾選擇器

$("標(biāo)簽:first")               //匹配的是第一個標(biāo)簽
$("標(biāo)簽:even")                //匹配的是從0開始的偶數(shù)個標(biāo)簽(0,2,4...)
$("標(biāo)簽:odd")                 //匹配的是從1開始的奇數(shù)個元素(1,3,5...)

6.屬性選擇器

[attribute]                 //匹配的是當(dāng)前給定的屬性的元素
[attribute=value]           //匹配的是給定的屬性是某個特定值的元素
[attribute!=value]          //匹配所有不含有指定元素的屬性,或?qū)傩圆坏扔谔囟ㄖ档脑?
[attribute^=value]          //匹配的是以指定元素開始的特定的元素
[attribute$=value]          //匹配以指定元素結(jié)尾
[attribute*=value]          //匹配給定的屬性是以包含某些值的元素
[selector1][selector2]...[selectorN]
    //符合屬性選擇器.同時滿足多個屬性條件的元素

7.jq文檔處理

//追加
append(content)             //向每個匹配的元素內(nèi)部追加內(nèi)容(推薦)
jq對象.appendTo(comtent)      //把匹配的內(nèi)容追加到另一個指定元素集合中
//前置
prepend(content)            //把每個匹配的元素放到content前面去
prependTo(content)          //把所有匹配的元素前置到另一個指定的元素集合中
//插入
after(content|fn)           //在每個匹配的元素之后插入內(nèi)容
insertAfter(content)        //將匹配的元素插入到content后面去
before(content)             //將每個匹配的元素之前插入內(nèi)容
insetBefore(content)        //將每個匹配的元素插入到content之前