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

最新推荐文章于 2024-05-16 04:04:41 发布

龙腾四海365

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量1.4k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011637069/article/details/50186901

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>

龙腾四海365

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery之dom操作(查询、创建、插入、删除、复制节点)

jQuery之dom操作(查询、创建、插入、删除节点)1.查询利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及html内容。 a,html() -- html内容 b,text() -- 文本 c,val() -- 节点的值 d,attr() -- 属性值此外，这几个方法也可以用来修改节点的内
复制链接

扫一扫

专栏目录