现在的位置: 首页 > 综合 > 正文

22、jQuery操作DOM

2018年02月05日 ⁄ 综合 ⁄ 共 11153字 ⁄ 字号 小 中 大 ⁄ 评论关闭

HTML DOM常见操作

    - 查找节点
    - 插入节点
    - 删除节点
    - 复制节点
    - 替换节点
    - 包裹节点

1、使用DOM向页面添加元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

 var addItems = function()
 {
	document.getElementById("div1").innerHTML="";
	var value = parseInt(document.getElementById('itemsNumber').value);
	for(var i = 0; i < value ; i++)
	{
	
		var input = document.createElement("input");
		input.setAttribute("type","text");

		var br = document.createElement("br");
		document.getElementById("div1").appendChild(input);
		document.getElementById("div1").appendChild(br);
	}
 }
 </script>
 </head>

 <body>
  <input type="text" id="itemsNumber">
  <input type="button" id="btn" value="click" onclick="addItems();">
  <div id="div1"></div>
 </body>
</html>

2、jQuery插入节点的方法：

append（），向每个匹配的元素内部追加内容
appendTo（），将所有匹配的元素追加到指定的元素中
prepend（），向每个匹配的元素之后
prependTo（），
after（），
insertAfter（），
before（）
insertBefore（），

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >
$(function()
{
	$("ul").append("<li title='abc'>hello</li>");
	$("ul").append("<li title='xyz'>hello</li>");

	$("ul").append("<li title='abc'>hello</li>")
		   .append("<li title='xyz'>hello</li>");
	$("<li title='abc'>hello11111</li>").appendTo($("ul"));
});
 </script>
 </head>

 <body>
 <p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

3、多文件上传，使用DOM方式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >
function addMore()
{
var div = document.getElementById("div1");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");

input.setAttribute("type","file");
button.setAttribute("type","button");
button.setAttribute("value","remove");
button.onclick = function()
{
	div.removeChild(br);
	div.removeChild(input);
	div.removeChild(button);
}

div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}
 </script>
 </head>

 <body>
  <input type="file">
  <input type="button" value="more..." onclick="addMore();">
  <div id="div1"></div>

 </body>
</html>

多文件上传，使用jQuery方式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

$(function()
{
	$("input[type=button]").click(function()
	{
		var br = $("<br>");
		var input = $("<input type='file'>");
		var button = $("<input type='button' value='remove'>");

		$("#div1").append(br).append(input).append(button);
		button.click(function()
		{
			br.remove();
			input.remove();
			button.remove();
		});

	});
});
 </script>


 </head>

 <body>
   <input type="file">
  <input type="button" value="more..." >
  <div id="div1"></div>

 </body>
</html>

 

 <script type="text/javascript" >
$(function()
{
	/*
	$("ul").append("<li title='abc'>hello</li>");
	$("ul").append("<li title='xyz'>hello</li>");

	$("ul").append("<li title='abc'>hello</li>")
		   .append("<li title='xyz'>hello</li>");
	$("<li title='abc'>hello11111</li>").appendTo($("ul"));
*/
//	$("ul li:eq(2)").insertAfter("ul li:eq(4)");  //节点移动

	var removeLi = $("ul li:eq(3)").remove();  //删除节点，remove（）返回被删除节点对象
	removeLi.appendTo($("ul"));

	$("ul li").remove("li[title!=2]");

	$("ul li:eq(3)").empty();  //清空元素中的内容
});
 </script>

4、节点复制，替换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

 $(function()
 {
	$("ul li").click(function()
	{
		$(this).clone(true).appendTo("ul");  //clone()方法克隆自身，如果带true参数，则克隆的对象也可以再克隆
	});

	// $("p").replaceWith("<a href='http://www.baidu.com'>baidu</a>");//元素替换，后面的替换前面的
	$("<a href='http://www.baidu.com'>baidu</a>").replaceAll("p"); //前面的替换后面的
 });

 </script>

 </head>

 <body>
<p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

5、元素的包裹

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

 $(function()
 {
	// $("p").wrap("<a href='www.baidu.com'></a>");
	$("p").wrap("<a href='www.baidu.com'><b></b></a>");//包裹整个元素

	$("p").wrapInner("<a href='www.baidu.com'><b></b></a>");//包裹里面的内容
 });

 </script>

 </head>

 <body>
<p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

6、属性操作

attr（）方法 ： 获取与设置属性

removeAttr（）方法 ： 移除元素属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

 $(function()
 {
	$("input:eq(0)").click(function()
	{
		//$("p").attr("title","abcd");  //设置属性方法1
		$("p").attr({"title":"abcd","hello":"world"});  //设置属性方法2
	});
	
	$("input:eq(1)").click(function()
	{
		alert($('p').attr("title"));   //获取属性
	});

	$("input:eq(2)").click(function()
	{
		$("p").removeAttr("title");  //删除属性
	});

 });

 </script>

 </head>

 <body>
 <input type="button" value="button1">
 <input type="button" value="button2">
  <input type="button" value="button3"><br>
<p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

7、样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<style type="text/css">
.high {
font-weight:bold;
color:red
}

.another{

font-weight:italic;
color:green
}
 </style>
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

 $(function()
 {
	$("input:eq(0)").click(function()
	{
		alert($("p").attr("class"));
	});

	$("input:eq(1)").click(function()
	{
		$('p').attr("class","high");
	});
	
	$("input:eq(2)").click(function()
	{
		$('p').addClass("another");
	});

	$("input:eq(3)").click(function()
	{
		$('p').removeClass("high");
		});

	$("input:eq(4)").click(function()
	{		
		$('p').removeClass();
	});

	$("input:eq(5)").click(function()
	{		
		$('p').toggleClass("another"); //有就删除，没有就添加，相当于开关
	});
	
	$("input:eq(6)").click(function()
	{		
		alert($('p').hasClass('another'));
		alert($('p').is('.another'));
	});
 });

 </script>

 </head>

 <body>
 <input type="button" value="button1">
 <input type="button" value="button2">
 <input type="button" value="button3">
 <input type="button" value="button4">
 <input type="button" value="button5">
 <input type="button" value="button6">
 <input type="button" value="button7">
 <br>
<p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

addClass（）方法与attr（）方法的区别

 8、获取子元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">

$(function()
{
	var v1 = $("body").children();//body下的子元素个数，不包括子元素的子元素
	var v2 = $("p").children();
	var v3 = $("ul").children();

	alert(v1.length + ":" + v2.length + ":" + v3.length);


});
</script>

 </head>

 <body>
 <p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">

$(function()
{
	var v1 = $("p").next(); //获得p的下一个同级元素
	// alert(v1.html());
	var v2 = $("p").prev();//获得p的上一个同级元素
	alert(v2.html());
	var v3 = $("p").siblings();//获得p的所有兄弟元素
	alert(v3.length);

});
</script>

 </head>

 <body>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>

<ul>
<li title="1">wwww好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>

 <p title="hello world">你认为培训好吗？</p>
<ul>
<li title="1">qqqq好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>

<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
 </body>
</html>

9、事件：Event

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">


	var method1 = function()
	{
		alert("div clicked");
	}

	var method2 = function()
	{
		alert("span clicked");
	}
	var method3 = function()
	{
		alert("body clicked");
	}

</script>

 </head>

 <body onclick="method3();">
<div id="content" onclick="method1();" border="1">
外层div元素
	<span onclick="method2();" background="#ff0000">内层span元素</span>
外层div元素
</div>

<div id="msg"></div>

uuuu
等等等等

 </body>
</html>

这个程序，点击span，div和body的alert也出现，这是事件的冒泡处理方法

在jQuery中，可以使用event.stopPropagation();来阻止事件的冒泡的处理，

jQuery的bind（）方法，

加载时机：window.onload，dom结构加载完毕，并且如果有外部链接，外部链接也要下载完毕

            jQuery的ready（）：dom结构加载完毕

toggle（）、event.preventDefault()与return false、stopPropagation（）

移除事件：unbind（）

  one（）——只执行一次

模拟操作：trigger（）——可以用来做自动运行（如自动登录），等同于.click()

自定义事件：bind("myClick",function(){})；

动画：

fadeOut()、fadeIn()，渐变效果

slideUp（）、slideDown（），向上向下收缩展开

animate（），自定义动画

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞