002_jQuery语法
生活随笔
收集整理的這篇文章主要介紹了
002_jQuery语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. jQuery語法
1.1. jQuery語法是為html元素的選取編制的, 可以對元素執行某些操作。
1.2. 基礎語法是: $(selector).action()
1.2.1. 美元符號定義jQuery。
1.2.2. 選擇符(selector)"查詢"和"查找"html元素。
1.2.3. jQuery的action()執行對元素的操作。
1.3. 示例
$(this).hide() // 隱藏當前元素 $("p").hide() // 隱藏所有段落 $(".test").hide() // 隱藏所有class="test"的所有元素 $("#test").hide() // 隱藏所有id="test"的元素2. 文檔就緒函數
2.1. jQuery函數位于一個document ready函數中:
$(document).ready(function(){--- jQuery functions go here ----});2.2. 這是為了防止文檔在完全加載(就緒)之前運行jQuery代碼。
2.3. 如果在文檔沒有完全加載之前就運行函數, 操作可能失敗。下面是兩個具體的例子:
2.3.1. 試圖隱藏一個不存在的元素。
2.3.2. 獲得未完全加載的圖像的大小。
3. jQuery選擇器
3.1. 選擇器允許您對元素組或單個元素進行操作。
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表達式來選擇帶有給定屬性的元素。
5.1.1.?$("[href]")選取所有帶有href屬性的元素。
5.1.2.?$("[href='#']")選取所有帶有href值等于"#"的元素。
5.1.3.?$("[href!='#']")選取所有帶有href值不等于"#"的元素。
5.1.4.?$("[href$='.jpg']")選取所有href值以".jpg"結尾的元素。
6. jQuery CSS選擇器
6.1. jQuery CSS選擇器可用于改變html元素的CSS屬性。
6.2. 下面的例子把所有p元素的背景顏色更改為紅色:
$("p").css("background-color","red");7. jQuery事件
7.1. jQuery是為事件處理特別設計的。
7.2. jQuery事件
8. jQuery事件函數
8.1. 事件處理程序指的是當html中發生某些事件時所調用的方法。術語由事件"觸發"(或"激發")經常會被使用。
8.2. jQuery事件處理方法是jQuery中的核心函數。
8.3. jQuery事件方法會觸發匹配元素的事件, 或將函數綁定到所有匹配元素的某個事件。
9. jQuery名稱沖突
9.1. jQuery使用$符號作為jQuery的簡介方式。
9.2. 某些其他JavaScript庫中的函數(比如: Prototype)同樣使用$符號。
9.3. jQuery使用名為noConflict()的方法來解決該問題。
var jq = jQuery.noConflict(); // 幫助您使用自己的名稱jq來代替$符號。10. 總結
10.1. 由于jQuery是為處理html事件而特別設計的, 那么當您遵循以下原則時, 您的代碼會更恰當且更易維護:
- 把所有jQuery代碼置于事件處理函數中
- 把所有事件處理函數置于文檔就緒事件處理器中
- 把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');// 下標從0開始, tr:eq(3)下標為3的tr, tr:gt(3)下標大于3的tr, tr:lt(3)下標小于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');// 標題偽類選擇器$(':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關鍵字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>標題1</h1><h2>標題2</h2><h3>標題3</h3><h4>標題4</h4><h5>標題5</h5><h6>標題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. 效果圖
總結
以上是生活随笔為你收集整理的002_jQuery语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 001_jQuery简介
- 下一篇： 003_隐藏和显示效果