一篇文章帶你入門和了解Jquery的基礎(chǔ)操作
更新時(shí)間:2021年11月15日 14:48:29 作者:歌九
這篇文章主要講述了一個(gè)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對(duì)象和js對(duì)象的轉(zhuǎn)換
(1)js對(duì)象------>jq對(duì)象
var js對(duì)象 = document.getElementById("id屬性值"); var $jq對(duì)象 = $(js對(duì)象)
(2)jq對(duì)象------>js對(duì)象
var js對(duì)象 = $jq對(duì)象.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的層級(jí)選擇器
//后代選擇器 $("父標(biāo)簽 子標(biāo)簽") //子元素選擇器 $("父元素>子元素")
5.過濾選擇器
$("標(biāo)簽:first") //匹配的是第一個(gè)標(biāo)簽 $("標(biāo)簽:even") //匹配的是從0開始的偶數(shù)個(gè)標(biāo)簽(0,2,4...) $("標(biāo)簽:odd") //匹配的是從1開始的奇數(shù)個(gè)元素(1,3,5...)
6.屬性選擇器
[attribute] //匹配的是當(dāng)前給定的屬性的元素 [attribute=value] //匹配的是給定的屬性是某個(gè)特定值的元素 [attribute!=value] //匹配所有不含有指定元素的屬性,或?qū)傩圆坏扔谔囟ㄖ档脑? [attribute^=value] //匹配的是以指定元素開始的特定的元素 [attribute$=value] //匹配以指定元素結(jié)尾 [attribute*=value] //匹配給定的屬性是以包含某些值的元素 [selector1][selector2]...[selectorN] //符合屬性選擇器.同時(shí)滿足多個(gè)屬性條件的元素
7.jq文檔處理
//追加 append(content) //向每個(gè)匹配的元素內(nèi)部追加內(nèi)容(推薦) jq對(duì)象.appendTo(comtent) //把匹配的內(nèi)容追加到另一個(gè)指定元素集合中 //前置 prepend(content) //把每個(gè)匹配的元素放到content前面去 prependTo(content) //把所有匹配的元素前置到另一個(gè)指定的元素集合中 //插入 after(content|fn) //在每個(gè)匹配的元素之后插入內(nèi)容 insertAfter(content) //將匹配的元素插入到content后面去 before(content) //將每個(gè)匹配的元素之前插入內(nèi)容 insetBefore(content) //將每個(gè)匹配的元素插入到content之前
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
jquery實(shí)現(xiàn)廣告上下滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)廣告上下滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法
下面小編就為大家?guī)硪黄猠asyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07基于jquery.page.js實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了基于jquery.page.js實(shí)現(xiàn)的分頁效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01jquery 綁定回車動(dòng)作撲捉回車鍵觸發(fā)的事件
這篇文章主要介紹了jquery如何撲捉回車鍵觸發(fā)的事件,需要的朋友可以參考下2014-03-03基于jquery實(shí)現(xiàn)一個(gè)滾動(dòng)的分步注冊(cè)向?qū)?附源碼
使用jQuery實(shí)現(xiàn)很多很有意思的應(yīng)用效果。我們?cè)诤芏嗑W(wǎng)站注冊(cè)會(huì)員時(shí),需要填寫注冊(cè)表單,包括登錄信息、個(gè)人聯(lián)系信息等,本文將帶您一起體驗(yàn)jQuery實(shí)現(xiàn)的一個(gè)可以滾動(dòng)的十分友好的分步注冊(cè)向?qū)?,需要的朋友可以參考?/div> 2015-08-08jQuery 快速結(jié)束當(dāng)前正在執(zhí)行的動(dòng)畫
要快速結(jié)束一個(gè)當(dāng)前正在執(zhí)行的jquery 動(dòng)畫時(shí)可以在執(zhí)行當(dāng)前動(dòng)畫的對(duì)象上執(zhí)行 stop(true)方法,下面有個(gè)不錯(cuò)的示例感興趣的朋友不要錯(cuò)過2013-11-11最新評(píng)論