国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 5.jQuery 快速網(wǎng)頁(yè)交互開(kāi)發(fā)-jQ基礎(chǔ)

5.jQuery 快速網(wǎng)頁(yè)交互開(kāi)發(fā)-jQ基礎(chǔ)

時(shí)間：2023-06-06 12:54:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-06 12:54:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

5.jQuery 快速網(wǎng)頁(yè)交互開(kāi)發(fā)-jQ基礎(chǔ)：

本章主要內(nèi)容：jQuery版本兼容、jQuery認(rèn)識(shí)、$() 方法、jQuery 對(duì)象、CSS選擇器、篩選選擇器和篩選方法、表格隔行變色案例。

1.jQuery版本兼容

1.X：兼容 IE6/7/8，是工作中最常使用的，學(xué)習(xí) 1.12 版本。

2.X：不兼容 IE6/7/8，多用于 jQuery 官方調(diào)整 bug 使用。工作中不使用。

3.X：不兼容 IE6/7/8，只能在高版本瀏覽器中使用，是現(xiàn)在 jQuery 官方主要的維護(hù)升級(jí)的版本。

實(shí)極大的簡(jiǎn)化了 DOM 操作

2.jQuery認(rèn)識(shí)

引入jQurey文件：

<script src="js/jquery-1.12.4.min.js"></script>設(shè)置樣式：

<style> * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; background-color: pink; } </style></head><body> <div class="box" id="box"></div>原生JS獲取元素：

var box = document.getElementById("#box") var box = document.getElementsByTagName("div")[0]JQ獲取元素：

$(".box") $("#box")JQ獲取 css 樣式，并設(shè)置:

console.log($("#box").css("width")) // 100px $(".box").css("width",200)事件簡(jiǎn)化:

$(".box").click(function () { $(this).css("background-color","skyblue") })運(yùn)動(dòng)方法

$(".box").animate({"width": 500},1000)

3.$() 方法

<body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> <p>段落6</p> <p>段落7</p> <p>段落8</p> <script src="js/jquery-1.12.4.min.js"></script> <script> // 獲取元素 $("p").css("background-color","red") jQuery("p").css("background-color","red") </script>

4.jQuery 對(duì)象

$() 方法獲取到的內(nèi)容叫做 jQuery 對(duì)象，對(duì)象里會(huì)自己封裝屬于jQ的方法，例如.css()，.html()，.animate()

<head> <style> * { margin: 0; padding: 0; } p { width: 50px; height: 50px; margin-bottom: 10px; } </style> <script src="js/jquery-1.12.4.min.js"></script></head><body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p></body>$("p").css("background-color","pink") $("p").html("你好") $("p").animate({"width": 300},1000)console.log($("p").innerHTML) // undefined $("p").style.backgroundColor = "red" // 報(bào)錯(cuò)var ps = document.getElementsByTagName("p"); ps[0].html("haha") // 報(bào)錯(cuò)輸出的是類(lèi)數(shù)組，里面存儲(chǔ)的是獲取的四個(gè)P標(biāo)簽的原生JS對(duì)象，對(duì)他們進(jìn)行封裝，展開(kāi)每一項(xiàng)，里面會(huì)有原生JS對(duì)象的屬性和方法

console.log($("p"))$().length和$().size()

console.log($("p").length) console.log($("p").size())

互相轉(zhuǎn)換

var $ps = $("p") $ps[0].innerHTML = "你好"var op = document.getElementsByTagName("p")[0] $(op).css("background-color","skyblue")

5.CSS選擇器

可以在jQuery API中文文檔網(wǎng)站進(jìn)行查看

參數(shù)：必須是字符串格式的選擇器。

// 基礎(chǔ)選擇器 $("*") $("p") $(".box") $("#demo") // 高級(jí)選擇器 $(".box p").html("你好")<input type="button" value="按鈕1"> <input type="button" value="按鈕2" disabled="disabled"> <input type="button" value="按鈕3"> <textarea name="" id="" cols="30" rows="10"></textarea>input:disabled：被禁用的按鈕

input:enabled：沒(méi)有被禁用的按鈕

:input：匹配所有 input, textarea, select 和 button 元素

// 所有按鈕都編程粉色 $("input").css("backgroundColor","pink") // 只有被禁用的按鈕變藍(lán)色 $("input:disabled").css("background","blue")// 只有沒(méi)被禁用的按鈕變綠色 $("input:enabled").css("backgroundColor","green") // 所有相關(guān)的表單元素 $(":input").css("backgroundColor","yellow")最后效果圖：

6.篩選選擇器和篩選方法

篩選選擇器

也叫過(guò)濾選擇器，jQuery 中新增的自己的選擇器。

在基礎(chǔ)選擇器后面增加一些篩選的單詞，篩選出前面選擇器的選中內(nèi)容中一部分。或者可以作 為高級(jí)選擇器的一部分。

$(":last")最后一個(gè)
$(":eq(index)")下標(biāo)為 index 的項(xiàng)，從0開(kāi)始
$(":gt(index)")大于下標(biāo)為 index 的項(xiàng)，從0開(kāi)始
$(":lt(index)")小于下標(biāo)為 index 的項(xiàng)，從0開(kāi)始
$(":odd")下標(biāo)為奇數(shù)的項(xiàng)，從0開(kāi)始
下標(biāo)為偶數(shù)的項(xiàng)，從0開(kāi)始
$(":not(selector)")去除所有與給定選擇器匹配的元素
$("p:first").css("background-color","pink") $("p:last").css("background-color","skyblue") $("p:eq(5)").css("background-color","skyblue") $("p:gt(5)").css("background-color","skyblue") $("p:lt(5)").css("background-color","skyblue") $("p:odd").css("background-color","skyblue") $("p:even").css("background-color","skyblue") $("p:not(:eq(6))").css("background-color","skyblue") $("p:not(.para)").css("background-color","skyblue")

篩選方法

也叫過(guò)濾方法，jQuery 中除了用選擇器選擇元素，jQuery 對(duì)象內(nèi)還封裝了一些對(duì)應(yīng)的篩 選方法。

$("p").first()
$("p").last()
$("p").eq(3)
$("p").first().css("background-color","skyblue") $("p").last().css("background-color","skyblue") $("p").eq(4).css("background-color","skyblue")

7.表格隔行變色案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } p { width: 50px; height: 50px; margin-bottom: 10px; } table { border-collapse: collapse; } td { width: 100px; height: 50px; } </style></head><body> <table border="1"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script src="js/jquery-1.12.4.min.js"></script> <script> // 原生方法 // var trs = document.getElementsByTagName("tr"); // // 遍歷 // for (var i = 0 ; i < trs.length ; i+=2) { // trs[i].style.backgroundColor = "skyblue" // } // jQuery的方法 $("tr:even").css("background-color","blue") </script></body></html>

關(guān)鍵詞：基礎(chǔ),交互

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉