當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

002_jQuery语法

發(fā)布時間：2025/4/17 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 002_jQuery语法小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. jQuery語法

1.1. jQuery語法是為html元素的選取編制的, 可以對元素執(zhí)行某些操作。

1.2. 基礎(chǔ)語法是: $(selector).action()

1.2.1. 美元符號定義jQuery。

1.2.2. 選擇符(selector)"查詢"和"查找"html元素。

1.2.3. jQuery的action()執(zhí)行對元素的操作。

1.3. 示例

$(this).hide() // 隱藏當(dāng)前元素 $("p").hide() // 隱藏所有段落 $(".test").hide() // 隱藏所有class="test"的所有元素 $("#test").hide() // 隱藏所有id="test"的元素

2. 文檔就緒函數(shù)

2.1. jQuery函數(shù)位于一個document ready函數(shù)中:

$(document).ready(function(){--- jQuery functions go here ----});

2.2. 這是為了防止文檔在完全加載(就緒)之前運行jQuery代碼。

2.3. 如果在文檔沒有完全加載之前就運行函數(shù), 操作可能失敗。下面是兩個具體的例子:

2.3.1. 試圖隱藏一個不存在的元素。

2.3.2. 獲得未完全加載的圖像的大小。

3. jQuery選擇器

3.1. 選擇器允許您對元素組或單個元素進(jìn)行操作。

3.2. jQuery選擇器

4. jQuery元素選擇器

4.1. jQuery使用CSS選擇器來選取html元素。

4.1.1.?$("p")選取<p>元素。

4.1.2.?$("p.intro")選取所有class="intro"的<p>元素。

4.1.3.?$("p#demo")選取id="demo"的<p>元素。

5. jQuery屬性選擇器

5.1. jQuery使用XPath表達(dá)式來選擇帶有給定屬性的元素。

5.1.1.?$("[href]")選取所有帶有href屬性的元素。

5.1.2.?$("[href='#']")選取所有帶有href值等于"#"的元素。

5.1.3.?$("[href!='#']")選取所有帶有href值不等于"#"的元素。

5.1.4.?$("[href$='.jpg']")選取所有href值以".jpg"結(jié)尾的元素。

6. jQuery CSS選擇器

6.1. jQuery CSS選擇器可用于改變html元素的CSS屬性。

6.2. 下面的例子把所有p元素的背景顏色更改為紅色:

$("p").css("background-color","red");

7. jQuery事件

7.1. jQuery是為事件處理特別設(shè)計的。

7.2. jQuery事件

8. jQuery事件函數(shù)

8.1. 事件處理程序指的是當(dāng)html中發(fā)生某些事件時所調(diào)用的方法。術(shù)語由事件"觸發(fā)"(或"激發(fā)")經(jīng)常會被使用。

8.2. jQuery事件處理方法是jQuery中的核心函數(shù)。

8.3. jQuery事件方法會觸發(fā)匹配元素的事件, 或?qū)⒑瘮?shù)綁定到所有匹配元素的某個事件。

9. jQuery名稱沖突

9.1. jQuery使用$符號作為jQuery的簡介方式。

9.2. 某些其他JavaScript庫中的函數(shù)(比如: Prototype)同樣使用$符號。

9.3. jQuery使用名為noConflict()的方法來解決該問題。

var jq = jQuery.noConflict(); // 幫助您使用自己的名稱jq來代替$符號。

10. 總結(jié)

10.1. 由于jQuery是為處理html事件而特別設(shè)計的, 那么當(dāng)您遵循以下原則時, 您的代碼會更恰當(dāng)且更易維護(hù):

把所有jQuery代碼置于事件處理函數(shù)中
把所有事件處理函數(shù)置于文檔就緒事件處理器中
把jQuery代碼置于單獨的.js文件中
如果存在名稱沖突, 則重命名jQuery庫

11. 例子

11.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jQuery選擇器</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){// 元素選擇器$('th').css('width', '200px');$('td').css('width', '200px');// 分組選擇器$('table, td, th').css('border', '1px solid black');// first和last偽類選擇器$('tr:first').css('color', 'red');$('tr:last').css('color', 'pink');// 奇偶偽類選擇器, jQuery奇偶是從0開始的$('tr:odd').css('background-color', 'green');$('tr:even').css('background-color', 'yellow');// 下標(biāo)從0開始, tr:eq(3)下標(biāo)為3的tr, tr:gt(3)下標(biāo)大于3的tr, tr:lt(3)下標(biāo)小于3的tr$('tr:eq(3)').css('height', '100px');$('tr:gt(3)').css('height', '60px');$('tr:lt(3)').css('height', '40px');// not和empty偽類選擇器$('td:not(:empty)').css('font-size', '24px');// 標(biāo)題偽類選擇器$(':header').css('text-decoration', 'line-through');// 屬性選擇器, [attribute!=value]看起來有問題$('[href]').css('text-decoration', 'none');$('[href="https://www.baidu.com"]').css('color', 'red');// $('[href!="https://www.baidu.com"]').css('color', 'green');$('[href$="cn"]').css('font-size', '24px');// input偽類選擇器var inputArr = $(':input').toArray();// jQuery里面不能使用let關(guān)鍵字for(var item in inputArr){// id選擇器$("#formP").append(inputArr[item].name + " ");}// text偽類選擇器var textArr = $(':text').toArray();for(var item in textArr){// class選擇器$(".inputText").append(textArr[item].name + " ");}// password偽類選擇器var passwordArr = $(':password').toArray();for(var item in passwordArr){$(".input.password").append(passwordArr[item].name + " ");}// radio偽類選擇器var radioArr = $(':radio').toArray();for(var item in radioArr){$("#formRadio").append(radioArr[item].value + " ");}// checkbox偽類選擇器var checkboxArr = $(':checkbox').toArray();for(var item in checkboxArr){$("#formCheckbox").append(checkboxArr[item].value + " ");}// submit偽類選擇器var submitArr = $(':submit').toArray();for(var item in submitArr){$("#formSubmit").append(submitArr[item].name + " ");}// reset偽類選擇器var resetArr = $(':reset').toArray();for(var item in resetArr){$("#formReset").append(resetArr[item].name + " ");}// button偽類選擇器var buttonArr = $(':button').toArray();for(var item in buttonArr){$("#formButton").append(buttonArr[item].name + " ");}// image偽類選擇器var imageArr = $(':image').toArray();for(var item in imageArr){$("#formImage").append(imageArr[item].name + " ");}// file偽類選擇器var fileArr = $(':file').toArray();for(var item in fileArr){$("#formFile").append(fileArr[item].name + " ");}// enabled偽類選擇器var enabledArr = $(':enabled').toArray();for(var item in enabledArr){var obj = enabledArr[item];var nodeName = obj.nodeName.toLowerCase();nodeName === "option" ? $("#formEnabled").append(obj.value + " ") : $("#formEnabled").append(obj.name + " ");}// disabled偽類選擇器var disabledArr = $(':disabled').toArray();for(var item in disabledArr){$("#formDisabled").append(disabledArr[item].name + " ");}// selected偽類選擇器var selectedArr = $(':selected').toArray();for(var item in selectedArr){$("#formSelected").append(selectedArr[item].value + " ");}// checked偽類選擇器var checkedArr = $(':checked').toArray();for(var item in checkedArr){$("#formChecked").append(checkedArr[item].value + " ");}// hidden偽類選擇器, 不顯示的元素display: none;var hiddenArr = $('p:hidden').toArray();for(var item in hiddenArr){$("#hiddenP").append(hiddenArr[item].id + " ");}// visible偽類選擇器, 顯示的元素display不為none;var visibleArr = $('p:visible').toArray();for(var item in visibleArr){var obj = visibleArr[item];obj.id === "" ? $("#visibleP").append(obj.className + " ") : $("#visibleP").append(obj.id + " ");}});</script></head><body><div style="float: left;"><table><tr><th>頭部1</th><th>頭部2</th></tr><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td></tr><tr><td>9</td><td></td></tr></table></div><div style="float: left; margin-left: 100px;"><h1>標(biāo)題1</h1><h2>標(biāo)題2</h2><h3>標(biāo)題3</h3><h4>標(biāo)題4</h4><h5>標(biāo)題5</h5><h6>標(biāo)題6</h6></div><div style="clear: left;"><a href="https://www.baidu.com">百度</a><a href="https://blog.csdn.net">csdn</a><a href="https://www.w3school.com.cn">w3school</a></div><p id="formP"></p><p class="inputText"></p><p class="input password"></p><p id="formRadio"></p><p id="formCheckbox"></p><p id="formSubmit"></p><p id="formReset"></p><p id="formButton"></p><p id="formImage"></p><p id="formFile"></p><p id="formEnabled"></p><p id="formDisabled"></p><p id="formSelected"></p><p id="formChecked"></p><p id="hiddenP"></p><p id="displayNone" style="display: none;">我是一個隱藏的P</p><p id="visibleP"></p><form><input type="hidden" name="id" value="1001" /><input type="text" name="userName" value="zhangsan" disabled="disabled" /><input type="password" name="pwd" value="123456" /><input type="file" name="picture" /><br /><br />男<input type="radio" name="sex" value="男" checked="checked" /> 女<input type="radio" name="sex" value="女" />旅游<input type="checkbox" name="hobby" value="旅游" checked="checked" /> 聽歌<input type="checkbox" name="hobby" value="聽歌" />游泳<input type="checkbox" name="hobby" value="游泳" /><select name="address"><option value="洛陽">洛陽</option><option value="濮陽">濮陽</option><option value="南陽">南陽</option><option value="信陽">信陽</option><option value="安陽">安陽</option><option value="鄭州" selected="selected">鄭州</option></select><br /><br /><input type="image" name="imageButton" src="submit.png" alt="submit" /> <button name="onlyButton" type="button">我就是一個按鈕</button><input type="reset" name="resetButton" value="重置" /> <input name="submitButton" type="submit" value="提交" /></form></body> </html>

11.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的002_jQuery语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。