jQuery之dom操作(查询、创建、插入、删除、复制节点)_简述一下jquery中插入节点修改节点删除节点复制节点的方法-程序员宅基地

技术标签: jQuery  

jQuery之dom操作(查询、创建、插入、删除、复制节点)


1.查询

    利用选择器找到要操作的节点之后,获得节点的值、属性值、文本以及html内容。

    a,html()  --  html内容

    b,text()  --  文本

    c,val()  --  节点的值

    d,attr()  --  属性值

    此外,这几个方法也可以用来修改节点的内容、值、文本、属性值,只需加上相应的参数即可。

    示例代码:/jQuery01/WebRoot/dom/d1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom操作之查询</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	function f1(){
        	//==innerHTML属性
			//alert($('#d1').html());

        	//==innerText属性(存在浏览器兼容问题)
			//alert($('#d1').text());

        	//获得value值
			//alert($(':text').val());

			//获得属性值
			alert($('#d1').attr('id'));
        }
        function f2(){
			//$('#d1').html('hello java');

			//$('#username').val('tom');

			$('#d1').attr('style','color:red;font-size:60px;')
        }
    </script>
  </head>
  <body>
  	<div id="d1"><span>hello jQuery</span></div>
  	username:<input id="username"><br/>
  	<input type="button" value="dom操作之查询"
  		οnclick="f1();">
  	<input type="button" value="dom操作之修改"
  		οnclick="f2();">
  </body>
</html>


2.创建

    $(html);


3.插入节点

    append()   -- 向每个匹配的元素内部追加内容

    prepend() -- 向每个匹配的元素内部前置内容

    after()   -- 向每个匹配的元素之后插入内容

    before()  -- 向每个匹配的元素之前插入内容

    示例代码:/jQuery01/WebRoot/dom/d2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom操作之创建和插入</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	function f1(){
        	//创建一个div节点
			var $obj = $('<div>岳飞是一个抗金的名族英雄</div>');
			
			//将$obj追加到body节点内部
			//$('body').append($obj);

			//prepend() -- 向每个匹配的元素内部前置内容
			//$('body').prepend($obj);

			//也可以简化
			$('body').append('<div>岳飞是一个抗金的名族英雄</div>');
        }
        function f2(){
			//after()   -- 向每个匹配的元素之后插入内容
			//$('ul').after('<p>hello</p>');

			//before()  -- 向每个匹配的元素之前插入内容
        	$('ul').before('<p>hello</p>');
        }
    </script>
  </head>
  <body style="font-size:30px;">
  	<a href="javascrpit:;" οnclick="f1();">岳飞是谁?</a><br/>
  	<input type="button" οnclick="f2();" value="插入节点">
  	<ul>
  		<li>item1</li>
  		<li>item2</li>
  		<li>item3</li>
  	</ul>
  </body>
</html>


4.删除节点

    remove()   -- 删除节点

    remove(selector)  -- 删除满足选择器的节点

    empty()  -- 清空节点,节点还存在

    示例代码:/jQuery01/WebRoot/dom/d3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom操作之删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	function f1(){
        	//remove()  -- 删除节点
        	//$('ul li:eq(1)').remove();
        	
        	//empty()  -- 清空节点,节点还存在
    		//$('ul li:eq(1)').empty();

        	//remove(selector)  -- 删除满足选择器的节点
    		$('ul li').remove('#l2');
        }
    </script>
  </head>
  <body style="font-size:30px;">
  	<ul>
  		<li>item1</li>
  		<li id="l2">item2</li>
  		<li>item3</li>
  	</ul>
  	<a href="javascrpit:;" οnclick="f1();">删除节点</a><br/>
  </body>
</html>


5.复制节点

    clone()

    clone(true)  -- 使复制的节点也具有行为(将事件处理代码也一块复制)

    示例代码:/jQuery01/WebRoot/dom/d5.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom操作之复制节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	$(function(){
        	//给ul中的第三个li绑定一个点击事件
        	$('ul li:eq(2)').click(function(){
				$(this).css('font-size','60px');
            });
            //clone()
			$('#b1').click(function(){
				var $obj = $('ul li:eq(2)').clone();
				$('ul').append($obj);
			});
			//clone(true)
			//使复制的节点也具有行为(将事件处理代码也一块复制)
			$('#b2').click(function(){
				$('ul').append($('ul li:eq(2)').clone(true));
			});
        });
    </script>
  </head>
  <body style="font-size:30px;">
  	<ul>
  		<li>item1</li>
  		<li>item2</li>
  		<li>item3</li>
  	</ul>
  	<input id="b1" type="button" value="dom操作之复制"><br/>
  	<input id="b2" type="button" value="dom操作之完全复制">
  </body>
</html>












版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u011637069/article/details/50186901

智能推荐

MMDeploy详解-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏6次。MMDeploy理解_mmdeploy

最流行的android组件大全_android热门组件-程序员宅基地

文章浏览阅读1.3k次。原文链接:http://blog.csdn.net/smallnest/article/details/38658593/Android 是目前最流行的移动操作系统之一。 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了一大批的优秀的组件。本文试图将目前流行的组件收集起来以供参考, 如果你发现本文还没有列出的组件,欢迎在评论中贴出来,我会定_android热门组件

python小练习5:如何判断一个数能否被3整除_用python编写一个小程序,用来判断任意一个数是否能被3整除-程序员宅基地

文章浏览阅读7.7w次,点赞6次,收藏28次。题:如何判断一个数能否被3整除?(或者被其他任意一个数整除)方法一:取余 x = input(&amp;amp;quot;input an number:&amp;amp;quot;) if x % 3 == 0: print &amp;amp;quot;%d 能被3整除&amp;amp;quot; %(x) else: print &amp;amp;quot;%d 不能被3整除&amp;amp;quot;_用python编写一个小程序,用来判断任意一个数是否能被3整除

网桥_网桥下设备广播-程序员宅基地

文章浏览阅读925次。先装好网卡,连上网线,然后开始!设置linux让网桥运行 配置网桥我们需要让linux知道网桥,首先告诉它,我们想要一个虚拟的以太网桥接口:(这将在主机bridge上执行,不清楚的看看测试场景)root@bridge:~> brctl addbr br0其次,我们不需要STP(生成树协议)等。因为我们只有一个路由器,是绝对不可能形成一个环的。我们可以关闭这个功能。(这_网桥下设备广播

linux|tgz解压出错_linux tgz解压 失败-程序员宅基地

文章浏览阅读1.1k次。[stu01@localhost pointer]$ tar -xzvf cnn-stories.tgztar (child): cnn-stories.tgz: Cannot open: No such file or directorytar (child): Error is not recoverable: exiting nowtar: Child returned statu_linux tgz解压 失败

小小君的C语言第五课_创建一个字符串数组(内容是你周围一圈人的姓名),输出最长字符串的长度。-程序员宅基地

文章浏览阅读596次。二维数组、字符串数组、多维数组 //声明一个二维数组 // 数据类型 + 数组名[第一维长度][第二维长度] = {值1,值2, ...}; //一般第一维 叫行 第二维叫列 //需求_创建一个字符串数组(内容是你周围一圈人的姓名),输出最长字符串的长度。

随便推点

Kubernetes业务日志收集与监控-程序员宅基地

文章浏览阅读732次。随着容器技术以及容器编排技术的成熟,越来越多的中小型企业也在将服务迁移到Kubernetes中,更智能,更便捷的管理服务,降低运维成本,而在迁移过程中,业务日志的收集以及业务服务的监控,..._kubemate日志监控

前端面试题—2021年web前端开发面试题_2021年前端开发面试题-程序员宅基地

文章浏览阅读796次。【前端面试】前端面试题—2021年web前端开发面试题本文章作为2021届应届毕业生在实习面试期间所接受的前端面试的面试题。2021年最新面试题CSS盒子模型的要素 ,https://www.cnblogs.com/clearsky/p/5696286.html;CSS中常用伪元素选择符;Position属性四个值:static、fixed、absolute和relative的区别和用法 ;解释CSS样式中display中inline、block、inline-block的区别 ;var和l_2021年前端开发面试题

用函数实现两个数的加法_7)编写一个函数,参数包括两个运算数x,y以及进位,通过调用全加器计算x,y的求和结果-程序员宅基地

文章浏览阅读4.5k次,点赞6次,收藏3次。1,加法#define _CRT_SECURE_NO_WARNINGS#include &lt;stdio.h&gt;int add(int x, int y){int z = x + y;return z;}int main(){int num1 = 0;int num2 = 0;int sum = 0;printf(“请输入两个操作数\n”);scanf("%d %..._7)编写一个函数,参数包括两个运算数x,y以及进位,通过调用全加器计算x,y的求和结果

对tableView的contentOffset的理解_tableview.contentoffset-程序员宅基地

文章浏览阅读4.1k次。tableView往上滚动, contentOffset.y为正,此时对于tableView内部控件而言,原点在哪里?如图所示:未开始滚动时,可以把contentOffset.y == 0看成一条分割线,随着向上滚动的进行,对于tableView内部控件而言原点已经滚动到原来contentOffset.y == 0这条分割线的上方了,而此时这个位置的分割线变成contentOffset.y ==_tableview.contentoffset

关于MyBatis读取Mapper文件的一个坑_mybatis读取resources下的mapper文件-程序员宅基地

文章浏览阅读1.9k次。最近在Idea上开发MyBatis,准备随便先写一点东西,结果一写就出了问题。Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.lang.IllegalArgumentException: Mapped S..._mybatis读取resources下的mapper文件

数据比你更懂用户:Tensorflow2 情感分析实战-程序员宅基地

文章浏览阅读496次。楔子达尔文曾说过,情感在人类的进化过程中起到了非常重要的作用。但他一定没有想到,有一天,机器也能读懂人类的情感了。把情感引入计算机学科,把 “主观的情感” 变得可计算,最早可追溯到上世纪..._tensorflow 分析用户收藏

推荐文章

热门文章

相关标签