jQuery语法知识(DOM操作)

一、class 属性:

.addClass()、.hasClass().removeClass()、.toggleClass()

二、DOM 插入并包裹现有内容

1、.wrap( wrappingElement):

在每个配的元素外层包上一个html元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script><style>p{width: 100px;height: 50px;background-color: darkcyan;border-radius: 5px;text-align: center;line-height: 50px;  /* 垂直居中 */margin: 0 auto;  /* 居于浏览器中间 上下为0,左右自动*/color: #ffffff;font-size: 20px; /* 字体大小 */}.pbtn{background-color: red;}</style></head><body>		<p>按钮</p><p>按钮</p></body><script>
$(document).ready(function(){$("p").wrap("<div></div>");
})</script>
</html>

2、.unwrap():

将匹配元素集合的父级元素删除,保留自身(和弟元素,如果存在)在原来的位置

仅删除父级元素。

    $("p").unwrap();

3、.wrapAll( wrappingElement):

在所有匹配元素外面包一层HTM结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script><style>p{width: 100px;height: 50px;background-color: darkcyan;border-radius: 5px;text-align: center;line-height: 50px;  /* 垂直居中 */margin: 0 auto;  /* 居于浏览器中间 上下为0,左右自动*/color: #ffffff;font-size: 20px; /* 字体大小 */}.pbtn{background-color: red;}.container{border: 1px solid red;}</style></head><body>	<div class="d1"><div class="d2"><p>按钮</p><p>按钮</p>			</div></div></body><script>$(document).ready(function(){$("p").wrapAll("<div class='container'></div>");})</script>
</html>

4、.wrapInner(wrappingElement):

在匹配元素里的内容外包一层结构。

            $("p").wrapInner("<div class='Inner'></div>");

三、DOM 插入现有元素内

1、.append():

在每个配元素里面的末尾处插入参数内容。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script></head><body>	<div class="d1"><div class="d2"><p>haha</p><p>haha</p>			</div></div></body><script>$(document).ready(function(){$("p").append("<p>hehe</p>");})</script>
</html>

2、.appendTo():

将匹配的元素插入到目标元素的最后面(译者注:内部插入)

            $("<p>111</p>").appendTo("p");

 

3、.html():

获取集合中第一个匹配元素的HTML内容设置每一个匹配元素的html内容

获取第一个内容

            console.log($("p").html());

 

 设置每一个内容

            console.log($("p").html("hahaga"));

4、prepend():

将参数内容插入到每个匹配元素的前面(元素内部)。

            $("p").prepend("<p>111</p>");

5、.prependTo():

将所有元素插入到目标前面(元素内)。

            $("<p>111</p>").prependTo("p");

6、.text():

得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

console.log($("p").text());

四、DOM 移除

1、.detach():

从DOM中去掉所有匹配的元素。不论前面有多少父级元素,都可以被选中删除

不带参数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script></head><body>	<p >haha</p><p>haha</p>	<span>我是span</span></body><script>$(document).ready(function(){$("p").detach();// $("<span>11111</span>").insertBefore($("span"));})</script>
</html>

             $("p").detach();

 带参数

            $("p").detach(".p1");

2、.empty():

从DOM中移除集合中匹配元素的所有子节点,不接受任何参数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script><style>.container{border: 1px solid red;}</style></head><body>	<div class="container"><p class="p1" >haha</p><p>haha</p>	<p>haha</p>	<p>haha</p>	<span>我是span</span>		</div></body><script>$(document).ready(function(){$(".container").empty();// $("<span>11111</span>").insertBefore($("span"));})</script>
</html>

3、.remove():

将匹配元素集合从DOM中删除。(注:同时除元素上的事件及jQuery 数据。)

4、.unwrap():

将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置

五、DOM 替换

1、.replaceAll():

用集合的匹配元素替换每个目标元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script><style>.container{border: 1px solid red;}</style></head><body>	<div class="container"><p class="p1" >haha</p><p>haha</p>	<p>haha</p>	<p>haha</p>	<span>我是span</span>		</div></body><script>$(document).ready(function(){$("<span>11111</span>").replaceAll($("p"));})</script>
</html>


2、.replaceWith():

用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

六、通用属性操作:

.attr()、.prop()、.removeAttr()、.removeProp()、.val()

.attr()可以获取所有的属性值,包括我们后来添加的,removeAttr()为移除.attr()

.prop()只可以获取原本有的或者默认属性值,不包括我们后来添加的,.removeProp()为移除.prop()

.val()通常用来获取表单元素中的值,input、select、textarea中的值

七、CSS 属性

八、复制元素

.clone():创建一个匹配的元素集合的深度拷贝副本

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="jQuery.js"></script></head><body>	<div class="d1"><div class="d2"><p >haha</p><p>haha</p>	<span>我是span</span></div></div></body><script>$(document).ready(function(){$("span").clone().appendTo($("p"));})</script>
</html>

九、CDN

CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶领和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Interet网络拥挤的状况,提高用户访问网站的响应速度。

百度cdn静态资源库

十、DOM 插入现有元素外

1、after():

在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点

        $("span").after("<span>11111</span>");

2、before():

根据参数设定,在匹配元素的前面插入内容(译者注:外部插入

            $("p").before("<span>11111</span>");

 

3、insertAfter():

在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

            $("<span>11111</span>").insertAfter($("span"));

4、insertBefore():

在标元素前面插入集合中每个匹配的元素注:插入的元素作为目标元素的兄弟元素)

            $("<span>11111</span>").insertBefore($("span"));

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/641826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Buildroot显示kernel logo

buildroot开机时DSI屏幕变成跟uart一样输出log&#xff0c;现在想显示logo 1、failed to show loader logo [ 2.467479] mmcblk1: p1 p2 p3 p4 p5 p6 p7 p8 p9 [ 2.468827] rockchip-drm display-subsystem: cant not find any loader display [ 2.468859] rockc…

Windows Service 2008 r2的安装

创建虚拟机–&#xff08;操作非常简单&#xff0c;跟着图片的数据下一步即可&#xff09; 选择自己要安装的虚拟机版本 在这里可以更改虚拟机存放的位置 这里的40个G并不会马上占用&#xff0c;当虚拟机里的东西到40个G的大小就不会再存储东西了 选择和自己虚拟…

每日一练 | 华为认证真题练习Day169

1、使用手工链路聚合模式时&#xff0c;下列选项中关于加入成员接口的描述&#xff0c;错误的是: A. Eth-Trunk接口不能嵌套&#xff0c;即成员接口不能是Eth-Trunk。 B. 一个以太网接口只能加入到一个任th-Trunk接口&#xff0c;如果需要加入其他Eth-Trunk接口&#xff0c;必…

第二百八十一回

文章目录 1. 概念介绍2. 方法与细节2.1 实现方法2.2 具体细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容&#xff0c;本章回中将介绍如何通过相机获取图片文件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. …

内网环境pip使用代理服务器安装依赖库

目录 使用proxy参数配置pip代理 使用配置文件配置pip代理 其他 由于公司内部网络无法访问外网导致安装依赖库失败&#xff0c;现将安装方法如下记录。 使用proxy参数配置pip代理 如不使用离线安装方法&#xff0c;可利用pip的--proxy参数进行代理的配置&#xff0c;使用方法…

春运倒计时,AR 引领铁路运输安全新风向

根据中国交通新闻网发布最新消息&#xff0c;今年春运全国跨区域人员流动量预计达 90 亿人次。 随着春运期间旅客数量不断创下新高&#xff0c;铁路运输面临着空前的挑战与压力。 图源&#xff1a;pixabay 聚焦铁路运输效率与旅客安全保障问题&#xff0c;本期行业趋势将探讨 …

Android 基于Fragment的权限封装

文章目录 Android 基于Fragment的权限封装原理代码PermissionUtils.javaPermissionsFragment.javaPermissionHelper.javaSettingsFragment.javaActivity中使用Fragment中使用 源码 Android 基于Fragment的权限封装 原理 业内普遍比较认可使用另外一种小技巧来进行实现。是什么…

51-16 FusionAD 用于自动驾驶预测与规划任务的多模态融合论文精读

今天要分享的是基于BEV的多模态、多任务、端到端自动驾驶模型FusionAD&#xff0c;其专注于自动驾驶预测和规划任务。这项工作首次发表于2023年8月2日&#xff0c;性能超越了2023 CVPR最佳论文UniAD模型。论文题目是FusionAD: Multi-modality Fusion for Prediction and Planni…

记录一些随机约束的控制方法

文章目录 前言一、内嵌约束控制二、控制rand变量是否随机三、选择随机控制的变量四、控制约束块是否随机五、约束的嵌套控制总结 前言 在运用UVM验证过程中&#xff0c;经常会用到大量的随机&#xff0c;这个时候我们需要控制随机约束的打开或者关闭&#xff0c;来实现不同模式…

linux显示系统内存使用情况--free命令

free 命令是Linux系统中用于显示系统内存使用情况的一个常用工具。通过该命令&#xff0c;用户可以轻松了解系统的内存分配、使用情况以及性能状况。本文将深入介绍free命令的各个方面&#xff0c;并提供详细的示例。 安装与基本用法 通常来说&#xff0c;free命令已经预装在大…

汽车数据解决方案:通过更好的数据提高速度

无论您是负责数字化转型的 CIO 或 IT 团队&#xff0c;还是实施 IoT 和 AI 洞察的工厂经理&#xff0c;或者是管理复杂数据管道的 ADAS 和无人驾驶团队&#xff0c;我们都可以帮您在数据发展曲线上保持领先。 全球数字化浪潮下&#xff0c;传统汽车行业生产模式、制造模式、服…

基于Python实现人脸识别相似度对比

目录 引言背景介绍目的和意义 人脸识别的原理人脸图像获取人脸检测与定位人脸特征提取相似度计算 基于Python的人脸相似度对比实现数据集准备人脸图像预处理特征提取相似度计算 引言 背景介绍 人脸识别技术是一种通过计算机对人脸图像进行分析和处理&#xff0c;从而实现自动识…

2023.1.17 关于 Redis 持久化 AOF 策略详解

目录 引言 AOF 策略 实例演示一 缓冲区 重写机制 手动触发 自动触发 AOF 重写流程 实例演示二 引言 Redis 实现持久化的两大策略 RDB ——> Redis DataBase&#xff08;定期备份&#xff09;AOF ——> Append Only File&#xff08;实时备份&#xff09; 注意&…

JavaEE:多线程(2):线程状态,线程安全

目录 线程状态 线程安全 线程不安全 加锁 互斥性 可重入 死锁 死锁的解决方法 Java标准库中线程安全类 内存可见性引起的线程安全问题 等待和通知机制 线程饿死 wait notify 线程状态 就绪&#xff1a;线程随时可以去CPU上执行&#xff0c;也包含在CPU上执行的…

漏洞补丁修复之openssl版本从1.1.1q升级到1.1.1t以及python版本默认2.7.5升级到2.7.18新版本和Nginx版本升级到1.24.0

​ 一、Openssl升级 1、查看Openssl安装的版本 openssl version 2、查看Openssl路径 which openssl 3、上传openssl安装包到服务器:openssl-1.1.1t.tar.gz,并且解压,安装: mv /usr/local/openssl /usr/local/backup_openssl_1.1.1q_20240120 mkdir /usr/local/openssl tar…

强化学习:MuJoCo机器人强化学习仿真入门

声明&#xff1a;我们跳过mujoco环境的搭建&#xff0c;搭建环境不难&#xff0c;可自行百度 下面开始进入正题&#xff08;需要有一定的python基础与xml基础&#xff09;&#xff1a; 下面进入到建立机器人模型的部分&#xff1a; 需要先介绍URDF模型文件和导出MJCF格式 介绍完…

K8S--安装Nginx

原文网址&#xff1a;K8S--安装Nginx-CSDN博客 简介 本文介绍K8S安装Nginx的方法。 1.创建Nginx目录及配置文件 mkdir -p /work/devops/k8s/app/nginx/{config,html} 在config目录下创建nginx.conf配置文件&#xff0c;内容如下&#xff1a; # events必须要有 events {wo…

PALWORLD linux centos7开服教程

开放端口8211 iptables -A INPUT -p udp -p tcp --dport 8211 -j ACCEPT iptables -A INPUT -p udp -p udp --dport 8211 -j ACCEPT yum -y install glibc.i686 libstdc.i686 screen libcurl.i686 yum install glibc-devel.i686 yum install libstdc-devel.i686 yum -y ins…

C#设计模式教程(18):中介者模式

中介者模式的定义 中介者模式(Mediator Pattern)是一种行为设计模式,它允许一组对象相互通信,而不需要知道彼此的内部结构。这样做可以降低多个对象和类之间的通信复杂性,将多对多的通信转变为一对多的通信,使得对象之间的耦合松散,并且可以更容易地独立地改变和复用这…

逆序对数量(归并排序做法)

先给出上一篇文章归并排序模板-CSDN博客里的归并排序模板&#xff1a; #include<iostream> using namespace std;const int N 100010;int n; int q[N], temp[N];void merge_sort(int q[], int l, int r) {if(l > r) return;int mid (lr) >> 1;merge_sort(q, …