JQuery DOM 操作

最新推荐文章于 2019-12-26 15:24:37 发布
最新推荐文章于 2019-12-26 15:24:37 发布
阅读量229 收藏
点赞数
分类专栏： java学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44804494/article/details/100132861
版权

JQuery DOM 操作

这我们创建一个简单的html页面
<body>
	
	<p title="ppp">ppp</p>

<ul>
	<li>篮球</li>
	<li>足球</li>
</ul>

	</body>
01 查找节点元素
	var $li=$('ul li:eq(1)');   //获取ul里面的第二个li节点【注意：eq(num),num是从0开始的】
	alert($li.text())			//获取第二个li节点中的文本内容，同时打印出来
02 查找节点属性
	var $p=$('p:eq(0)');    //获取第一个p节点
	alert($p.attr("title"))// 获取节点属性title，并打印出来
03 创建节点元素
	var $li01=$("<li title='台球'>台球</li>");		//创建文本节点和属性
04 插入节点
方法描述示例
append( )在每个匹配的元素内部追加内容如段落p中添加标记：$(“p”).append(“hello”);
appendTo( )将所有的匹配元素追加到指定元素中$(“hello”).appendTo(“p”);
prepend( )向每个匹配的元素内部前置内容$(“p”).prepend(“hello”);
prependTo ( )将所有匹配的元素前置到指定的元素中$(“hello”).prependTo (“p”);
after( )在每个匹配的元素之后插入内容$(“p”).after(“hello”);
insertAfter( )将所有匹配的元素插入到指定元素后面$(“hello”).insertAfter(“p”);
before( )在每个匹配的元素之前插入内容$(“p”).before(“hello”);
insertBefore( )将所有匹配的元素插入到指定的元素的前面$(“hello”).insertBefore(“p”);

实例几方法

	$("ul").append($li01);
	$li01.appendTo("ul")
05 删除节点
1. remove()方法

作用：从DOM中删除所有匹配的元素，传入的参数用于根据JQuery表达式来筛选元素。
eg:

	$("ul li:eq(1)").remove();

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

eg:
	var $li=$("ul li:eq(1)").remove();
	$li.apppendTo("ul");

这里删除只是从网页中删除。在JQuery对象中，这个元素还是存在的，我们可以重新获取它。

2.  empty()方法

严格来说 empty()方法并不是删除节点，而是清空点节点，它能清空元素中的所有后代节点

eg:
	
	 //获取第二个li元素节点，清空此元素里的内容，注意是元素里
	$("ul li:eq(1)").empty();
05 复制节点

	$("ul li:eq(0)").clone().appendTo("ul");

在clone()方法中传递一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能

	$("ul li:eq(0)").clone(true).appendTo("ul");
06 替换节点

replaceWith()和replaceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素
eg:
<body>	
    <p title="选择你最喜欢的运动">你最喜欢的运动项目是？</p>
</body>
	
<script>
	$(function(){
	  	//replaceWith()方法
		$("P").replaceWith("<strong>你最喜BU欢的运动项目是？</strong>")
	   //replaceAll()方法	
		$("<strong>你最喜BU欢的运动项目是？</strong>").replaceAll("p");
	})
</script>
07 包裹节点
	<body>
  		 <strong>你最喜BU欢的运动项目是？</strong>
   		 <strong>你最喜BU欢的运动项目是？</strong>
	 </body> 
	 
1. wrap()方法 
	$("strong").wrap("<b></b>");	//用<b>标签把<strong>元素包裹起来

2. wrapAll()方法
	该方法会将所有的匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法 是将所有的元素进行单独的包裹。
	
使用wrap()方法[  $("strong").wrap("<b></b>");  ]结果为： 
	
	<body>
  		 <b> <strong>你最喜BU欢的运动项目是？</strong> </b>
 		 <b> <strong>你最喜BU欢的运动项目是？</strong> </b>
	</body> 

使用wrapAll()方法[  $("strong").wrapAll("<b></b>");  ]结果为：
	
	<body>
  		 <b>
  		    <strong>你最喜BU欢的运动项目是？</strong> 
 		    <strong>你最喜BU欢的运动项目是？</strong>
 		 </b>
	</body> 
3. wrapInner()方法
	该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。
	eg:
	 $("strong").wrapInner("<b></b>");
	结果为：
	  <strong><b>你最喜BU欢的运动项目是？</b></strong>
08 属性操作
===>1. 获得属性和设置属性

	如果要获得<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称
eg:
	var $para=$("p");
	var p_txt=$para.attr("title");
	如果要设置<p>元素的属性title的值，也可以使用用一个方法，不同的是，需要传递两个参数及属性名称和对应的值
eg:
	$("p").attr("title","标题名");
	如果需要一次性为同一个元素设置多个属性。则:
eg:
    $("p").attr({"title":"标题名","name":"张三"});

===> 注意：<===
	JQuery中的很多方法都是同一个函数实现获得（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获得元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。


===>2. 删除属性

	removeAttr()方法：
eg:
	$("p").removeAttr("title")   //删除<p>元素的属性'title'
09 样式操作
===>1.获得样式和设置样式

 eg：
 HTML代码如下：
 	<p class="myClass" title="选择喜欢的运动">你最喜欢的运动是？</p>

  在上面的代码中，class也是<P>元素的属性，因此获得class和设置class都可以使用attr()方法来完成。
  eg:
  
  var p_class=$("p").attr("class");    //获得<P>元素的class
  
  $("p").attr("class","high");   	   //设置<P>元素的class为"high

So:在大多数时候，它是将原来的class替换成新的class，而不是在原来的基础上追加新的class

===>2.追加样式

   addClass()方法：
eg:
   $("p").addClass("追加的class类")

实例：
 	<style>
 	.newClss{
 		color:red;
 		fon
      }
 	</style>
instanceof.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作DOM
weixin_52841956的博客
02-23 619
我们先来看一下JavaScript怎么操作DOM元素 1.根据元素的id document.getElementById("id值"); 2.根据元素的类名className document.getElementsByClassName(className); 3.标签名 tagName document.getElementsByTagName(tagName); 4.获取dom元素属性、样式... dom元
《锋利的jQuery》读书笔记第三章(DOM操作)
牛爷爷的博客
12-11 287
jQuery中的DOM操作查找节点1.查找元素节点获取元素点并打印出它的文本内容。 html代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom</title> </head> <body> <p title="选择喜欢的。">你最喜欢的水果是？</p> <ul>
jQuery第三章
weixin_34254823的博客
01-27 182
一、jQuery中的DOM操作 一般来说，DOM操作分为3个方面，即DOM Core核心、HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById()、getElemntByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的核心，例如： （1）使...
JQuery效果
qq_44804494的博客
08-27 140
JQuery动态图几个例子 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" &g...
jQuery DOM操作小结与实例
10-29
在jQuery中，DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**： - DOM Core是DOM的基础部分，它定义了一套通用的标准，用于处理任何基于标记语言的文档，如XML...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jQuery DOM操作实例
01-19
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
jQuery DOM操作 基于命令改变页面
10-29
jQuery 是一个非常流行的 JavaScript 库，它极大地简化了 JavaScript 编程，特别是对文档对象模型（DOM）的操作。DOM 操作是 JavaScript 中一项基本而重要的技能，通过它可以实现对网页内容、结构和样式的动态控制。...
Js判断是否为非数字
qq_44804494的博客
12-23 4961
Js判断是否为非数字 1.使用isNaN()函数 isNaN()的缺点就在于 null、空格以及空串会被按照0来处理 function isRealNum(val){ // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除， 　　if(val === "" || val ==null){ return false; 　　} if(!i...
List集合遍历三种方法
qq_44804494的博客
12-23 2989
List集合遍历三种方法 第一种、最基础的遍历方式：for循环，指定下标长度，使用List集合的size()方法，进行for循环遍历 import java.util.ArrayList; public class Demo01 { 　　public static void main(String[] args) { 　　　ArrayList<News> list = new ...
实现字符串小写字母在前面，大写字母在后面，前后顺序不变
qq_44804494的博客
12-26 1681
实现字符串小写字母在前面，大写字母在后面，前后顺序不变
java逻辑思维练习
qq_44804494的博客
08-01 1497
java 学习-----逻辑思维练习java学习编程逻辑思维练习 java学习编程逻辑思维练习 public class Task_01 { /* 1.定义数组输入 10个数字，排序 输出 从大到小 从小到大.... */ public static void MaxAndMin() { Scanner sc = new Scanner(System.in); int[] arra...
连接池的作用
qq_44804494的博客
11-15 1250
连接池的作用 连接池的作用就是为了提高性能。 连接池的作用：连接池是将已经创建好的连接保存在池中，当有请求来时，直接使用已经创建好的连接对数据库进行访问。这样省略了创建连接和销毁连接的过程。这样性能上得到了提高。 基本原理是这样的： （1）建立数据库连接池对象（服务器启动）。 （2）按照事先指定的参数创建初始数量的数据库连接（即：空闲连接数）。 （3）对于一个数据库访问请求，直接从连接池中得到一个...
map集合
qq_44804494的博客
12-24 754
map集合 Map 是一种键-值对（key-value）集合，Map 集合中的每一个元素都包含一个键对象和一个值对象。 其中，键对象不允许重复，而值对象可以重复，并且值对象还可以是 Map 类型的，就像数组中的元素还可以是数组一样。 Map 接口主要有两个实现类：HashMap 类和 TreeMap 类。 其中，HashMap 类按哈希算法来存取键对象，而 TreeMap 类可以对键对象进行排序。...
ArrayList 类
qq_44804494的博客
08-22 712
ArrayList 类 ArrayList 是list最常见的实现类，内部是通过数组实现的，它允许对元素的快速随机访问，当从arraylist 的中间位置插入或者删除元素时，需要对数组进行复制，移动，代价比较高。因此它适合随机查找和遍历，不适合插入和删除。 ArrayList的实质就是一个会自动增长的数组。它是利用封装的数组来实现的list接口，底层用数组来实现。随着向ArrayList中不断添加...
java 方法修饰符
qq_44804494的博客
08-01 668
java 方法修饰符 常用修饰符主要分4种：与继承有关的修饰符 abstract ,static和final;与可见性有关的修饰符： public ,protected,private 和缺省修饰符；与多线程有关的修饰符：synchronized和volatile;与序列有关的修饰符：transinet。除此之外还有native修饰符。 static 修饰符 static修饰符可以修饰类的...
给定的字符串中，计算子串出现的次数（忽略大小写）
qq_44804494的博客
11-28 484
给定的字符串中，计算子串出现的次数（忽略大小写）。 方法一： public int strWay(String maxStr,String minStr){ int num=0; for (int i = 0; i < maxStr.length()-minStr.length()+1; i++) { StringBuffer neSr=new StringBuffer(); ...
字符串 + 字符串数组实现脏数据过滤
qq_44804494的博客
12-17 364
/** * 字符串 + 字符串数组实现脏数据过滤： eg: 这个商品MMP 就是 垃圾 NND 。。 */ public class Task_05 { public static void main(String[] args) { String str[] = {"垃圾", "mmp", "nnp", "独裁" }; String st = "那个啥Mmp,能及时撒地pMH方垃...
jQuery DOM操作详解：属性与方法
"jQuery使用手册之二 DOM操作" jQuery是一个强大的JavaScript库，主要目的是简化HTML文档遍历、事件处理、动画制作以及Ajax交互。本部分主要关注DOM（Document Object Model）操作，即如何通过jQuery对HTML元素进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值