收藏
天蓬老師批改狀態(tài)：合格
老師批語：querySelector()/querySelectorAll(), 不論是在哪調(diào)用, 都是在整個document范圍內(nèi)搜索, 請始終在document上調(diào)用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JQery基礎知識</title><script src="js/jquery-3.5.1.js"></script><link rel="stylesheet" href="index.css" /></head><body><ul><li>item1-1</li><li>item1-2</li><li>item1-3</li><li>item1-4</li><li>item1-5</li><li>item1-6</li></ul><ul><li>item2-1</li><li>item2-2</li><li>item2-3</li><li>item2-4</li><li>item2-5</li><li>item2-6</li></ul></body><script>// 1.通過$()工廠函數(shù)選擇標簽元素$("ul:first-of-type>li:last-of-type").css("color", "red");//2.通過$(js對象)可以把一個js對象包裝成一個jquery對象，進而使用jquery中的方法和屬性var li = document.querySelector("ul:first-of-type>li:first-of-type");$(li).css("color", "green");//3.可以把一段html代碼包裝為一個jquery對象，進而使用jquery中的方法和屬性$("<h2>jquery基礎知識</h2>").insertBefore("ul:first-of-type");//4.$(回調(diào)函數(shù)) 當html文檔加載完畢后，就會調(diào)用這個回調(diào)函數(shù)$(function () {$("ul:last-of-type>li:first-of-type").css({"background-color": "lightblue","font-size": "26px",});});// ----------------------------------------------------------//jquery處理查詢結(jié)果;var lis = $("ul:last-of-type>li:nth-last-of-type(-n+2)");//1.可以用toArray()方法把一個jquery對象轉(zhuǎn)換為一個普通數(shù)組,然后進行操作lis.toArray().forEach(function (li, index) {li.innerText = "更改item的值";});//2.可以用each()方法直接遍歷jquery對象lis.each(function (index, li) {//但是遍歷出來的數(shù)據(jù)是一個原生的js對象li.style.color = "lightgreen";});lis = $("ul:first-of-type>li");//3.用map()方法遍歷jquery對象,返回值也是一個jquery對象lisJs = lis.map(function (index, li) {//遍歷出來的數(shù)據(jù)是js對象li.style.backgroundColor = "lightblue";if (index % 2) return li; //把索引值是奇數(shù)的li返回});console.log(lisJs);lisJs.css("background-color", "lightgreen");//4.index()方法返回jquery對象的索引值lis.click(function () {console.log("當前點擊的是第" + ($(this).index() + 1) + "個li");});</script></html>
天蓬老師
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
