jQuery-操作DOM

使用jQuery操作DOM

dom : 文檔對象模型 ? ?就是HTML元素 ?

$() ? 函數的2個用法:

用法1:放入一個字符串(選擇器)表示獲取元素 ? 例如

$("p") $("#abc") ?$(".del")?

用法2:放入一個函數,表示文檔就緒函數 ? 例如

?$(function(){代碼...})

用法3:如下所示

jquery創建節點的方法如下:

1.創建節點 語法如下:

$("xxxxx");

xxx表示你要創建的dom元素 ? 例如 ?$("<p>我是p標簽<p>");

此時僅僅是創建了節點.理解為是孤兒節點. ?需要將其插入到某個節點中.

在任意位置創建新的節點

插入方法1:

append() 表示插入到指定元素內部的尾端.

語法:

$("aa").append("bb") ?

表示將bb插入到aa內部的尾端

插入方法2:prepend() 表示插入到指定元素內部的首端.

語法:

$("aa").prepend("bb") 

?表示將bb插入到aa內部的首端

插入方法3:after() 表示插入到指定元素的后面. 兄弟關系

語法:

$("aa").after("bb") ?

表示將bb插入到aa的后面

插入方法4:before() 表示插入到指定元素的前面. 兄弟關系

語法:

$("aa").before("bb")

?表示將bb插入到aa的前面

刪除任意位置的節點

方法1: ?remove()

語法如下: ?

$("xx").remove();

?將xx元素徹底刪除 ?不僅刪除了值 而且刪除了標簽 ?

//方法2: ?empty() ?清空

語法如下: ?

$("xx").empty(); 

?將xx元素刪除值 但是不刪除標簽 ?

克隆節點

語法: ?

$("xxx").clone(); 

?將xxx元素復制一份

注意事項:上一步僅僅只是復制 ? 此時理解為孤兒節點. 任然需要通過append ?prepend ?after ?before進行粘貼

一些方法

隱藏XX元素

$("xx").hide();

顯示XX元素

$("xx").show();

來回切換:顯示或隱藏XX元素?

$("xx").toggle();

給元素添加類名為a

$("xx").addClass("a");

給元素移除類名為a

$("xx").removeClass("aa);

返回當前元素在兄弟中下標

$("xx").index();

獲取當前的元素

$(this);

jquery對象的特點: ?

調用任意方法的返回值 依然是它本身

$("p").addClass("a").addClass("b").addClass("c").click(function(){alert(123);}).mouseover(function(){alert(567)}).removeClass("c");

each方法的語法:

$("xx").each(   function(){  代碼體   }   );

作用:遍歷xx元素.每遍歷一次 ?就執行一次代碼體.

客串知識點

parent()方法的作用:

<div><p><font>aaa</font></p>
</div><script src="js/jquery.js"></script><script>//需求:刪除font標簽的父親$("p").parent().remove();</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/213880.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/213880.shtml
英文地址,請注明出處:http://en.pswp.cn/news/213880.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

TikTok挑戰榜單:全球用戶如何共襄盛舉

TikTok作為全球最受歡迎的短視頻應用之一&#xff0c;在這個平臺上&#xff0c;用戶們通過參與各種挑戰&#xff0c;創造了無數令人驚嘆的短視頻。 本文將深入探討TikTok挑戰榜單的現象&#xff0c;探究全球用戶如何共襄盛舉&#xff0c;以及這種創意激發和社交互動如何成為Ti…

go-zero開發入門-API網關鑒權開發示例

本文是go-zero開發入門-API網關開發示例一文的延伸&#xff0c;繼續之前請先閱讀此文。 在項目根目錄下創建子目錄 middleware&#xff0c;在此目錄下創建文件 auth.go&#xff0c;內容如下&#xff1a; // 鑒權中間件 package middlewareimport ("context""e…

前端開發常用的Vscode插件整理(持續更新)

本文記錄用vscode進行前端開發時&#xff0c;常用到的有用的vscode插件&#xff0c;將不定時更新&#xff5e; 1、Chinese (Simplified) 將編輯器變成簡體中文 2、vscode-icon 讓 vscode 資源樹目錄加上圖標&#xff0c;官方出品的圖標庫 3、Import Cost 引入包大小計算,對于…

Springboot Redis Lua 分布式限流器

pom文件中添加如下依賴包&#xff0c;比較關鍵的就是 spring-boot-starter-data-redis 和 spring-boot-starter-aop。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></d…

基于ssm實驗室開放管理系統論文

摘 要 現代經濟快節奏發展以及不斷完善升級的信息化技術&#xff0c;讓傳統數據信息的管理升級為軟件存儲&#xff0c;歸納&#xff0c;集中處理數據信息的管理方式。本實驗室開放管理系統就是在這樣的大環境下誕生&#xff0c;其可以幫助管理者在短時間內處理完畢龐大的數據信…

高效純化樹脂A-2313 CPR

在化工、制藥等行業中&#xff0c;對colorful chemicals的純化一直是挑戰。本文將為您介紹一款具有卓越性能的強堿性陰離子交換樹脂——Tulsion A-2313 CPR。通過分析其特性和應用&#xff0c;展示其在colorful chemicals純化領域的優勢。 一、Tulsion A-2313 CPR離子交換樹脂的…

代碼隨想錄二刷 |二叉樹 |94.二叉樹的中序遍歷

代碼隨想錄二刷 &#xff5c;二叉樹 &#xff5c;二叉樹的中序遍歷 題目描述解題思路代碼實現迭代法遞歸法 題目描述 94.二叉樹的中序遍歷 給定一個二叉樹的根節點 root &#xff0c;返回 它的 中序 遍歷 。 示例 1&#xff1a; 輸入&#xff1a;root [1,null,2,3] 輸出&a…

漏洞復現-浙江宇視 isc LogReport.php 遠程命令執行漏洞(附漏洞檢測腳本)

免責聲明 文章中涉及的漏洞均已修復&#xff0c;敏感信息均已做打碼處理&#xff0c;文章僅做經驗分享用途&#xff0c;切勿當真&#xff0c;未授權的攻擊屬于非法行為&#xff01;文章中敏感信息均已做多層打馬處理。傳播、利用本文章所提供的信息而造成的任何直接或者間接的…

C++臨時對象生命周期

引言 朋友問了我一段代碼&#xff1a; const string & foo(const string & a, const string & b) {return a.empty() ? b : a; } int main () {auto & s foo("", "foo"); // auto is const stringcout << s << \n;return …

第二百回 如何獲取App自身的信息

文章目錄 1. 概念介紹2. 使用方法2.1 ClipOval2.2 ClipRRect 3. 示例代碼 我們在上一章回中介紹了AspectRatio Widget相關的內容&#xff0c;本章回中將介紹剪裁類組件(Clip).閑話休提&#xff0c;讓我們一起Talk Flutter吧。 1. 概念介紹 我們在這里說的剪裁類組件主要是指對…

dockerfile---創建鏡像

dockerfile創建鏡像&#xff1a;創建自定義鏡像。 包擴配置文件的創建&#xff0c;掛載點&#xff0c;對外暴露的端口。設置環境變量。 docker鏡像的方式: 1、基于官方源進行創建 根據官方提供的鏡像源&#xff0c;創建鏡像&#xff0c;然后拉起容器。是一個白板&#xff0c…

初識人工智能,一文讀懂強化學習的知識文集(5)

&#x1f3c6;作者簡介&#xff0c;普修羅雙戰士&#xff0c;一直追求不斷學習和成長&#xff0c;在技術的道路上持續探索和實踐。 &#x1f3c6;多年互聯網行業從業經驗&#xff0c;歷任核心研發工程師&#xff0c;項目技術負責人。 &#x1f389;歡迎 &#x1f44d;點贊?評論…

2023年運營級網賺網盤平臺搭建指南(包含源碼和教程)

源碼介紹 為什么要考慮自己搭建網盤呢&#xff1f;現如今&#xff0c;許多大型網盤平臺都對文件添加了各種限制&#xff0c;導致很多文件容易被刪除。而且&#xff0c;大部分網盤還會限制下載速度&#xff0c;如果沒有開通VIP會員&#xff0c;使用起來非常不便。 本指南提供了…

免費節假日api接口使用教程-聚合數據

免費節假日api接口使用教程-聚合數據 文章目錄 &#x1f4d6;訪問官網&#x1f330;例子完整代碼&#x1f58a;?最后總結 &#x1f4d6;訪問官網 聚合數據 官網地址 https://dashboard.juhe.cn/home 點擊api 接口文檔 &#x1f330;例子 get方式 curl -k -i -d “key您申請…

解決Git提交錯誤分支

如果 Git 提交到錯誤的分支&#xff0c;可以通過以下步驟將其轉移到正確的分支上&#xff1a; 1.檢查當前所在的分支&#xff0c;可以通過 git branch 命令查看。 git branch2.切換到正確的分支&#xff0c;可以通過 git checkout <正確的分支名> 命令進行切換。 git …

vue使用echarts顯示中國地圖

項目引入echarts以后&#xff0c;在頁面創建canvas標簽 引入一個公共js文件&#xff08;下面這段代碼就是china.js文件&#xff09; (function (root, factory) {if (typeof define function && define.amd) {// AMD. Register as an anonymous module.define([ex…

【EXCEL】折線圖添加垂直x軸的豎線|畫圖

相關鏈接&#xff1a;excel 添加垂直豎向直線 如何在Excel中添加水平和垂直線&#xff1f; 因為加輔助列有點不習慣&#xff0c;已經有分位數橫坐標了&#xff0c;想著試下用散點圖的誤差線畫 效果圖&#xff1a; 步驟&#xff1a; s1&#xff1a;隨便框選兩列數據–>插入(…

大創項目推薦 卷積神經網絡手寫字符識別 - 深度學習

文章目錄 0 前言1 簡介2 LeNet-5 模型的介紹2.1 結構解析2.2 C1層2.3 S2層S2層和C3層連接 2.4 F6與C5層 3 寫數字識別算法模型的構建3.1 輸入層設計3.2 激活函數的選取3.3 卷積層設計3.4 降采樣層3.5 輸出層設計 4 網絡模型的總體結構5 部分實現代碼6 在線手寫識別7 最后 0 前言…

深入理解JavaScript異步編程與Promise

異步編程的背景 在Web開發中&#xff0c;異步編程是為了解決JavaScript的單線程執行模型導致的阻塞問題。異步編程允許程序在等待某些操作完成的同時&#xff0c;繼續執行其他任務&#xff0c;提高了程序的效率和響應速度。 回調地獄與Promise的誕生 回調地獄是異步編程中一…

Unity中實現ShaderToy卡通火(一)

文章目錄 前言一、準備好我們的后處理基礎腳本1、C#&#xff1a;2、Shader&#xff1a; 二、開始逐語句對ShaderToy進行轉化1、首先&#xff0c;找到我們的主函數 mainImage2、其余的方法全部都是在 mainImage 函數中調用的方法3、替換后的代碼(已經沒報錯了&#xff0c;都是效…