Jquery--DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布

飞飞翼

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量163

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_36935391/article/details/78721292

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<body  >
<h1>哈哈</h1>

<ul>
</ul>
<input type="button" value="添加"/>
</body>

4.1.1.创建节点并输入文本

  $("body").append($("<h1>嘻嘻哈哈</h1>"));//创建节点，并将h1添加到body中去

和上面结果一样

var $div=$("<h1>嘻嘻哈哈</h1>")              //$()这是Jquery函数

$("body").append($div);

注意

参数字符串必须符合严谨性XHTML结构的要求，标记应该包含其实标签和结束标签，如果没有结束标签，则应该添加闭合标签（就是斜线）

4.1.3.设置属性

方法1 append

 $("body").append($("<h1 title='都是浪费'>嘻嘻哈哈</h1>"));   //就直接和写html网页一样设置就好了

4.2插入内容

方法一append

 $("ul").append($("<li>我是一号</li>"));//向每个匹配的元素内部追加内容，追加到ul标签的末尾

方法2 appendTo

	$("ul").appendTo($("h1"));//讲ul里面的内容添加到h1标签里面

注意：append与appendTo方法功能相同，语法不同。 append方法选择表达式在前面，参数是将要插入的内容，而appendTo方法刚好相反，内容在方法前面，他将被放在蚕食里元素的末尾
方法三

 $("ul").prepend($("<li>我是二号</li>"));   //讲内容插入到ul标签的顶部（第一个），作为ul的第一个子元素

4.2..2外部插入

after(); 在每个匹配元素之后插入内容

before() 在每个匹配元素之前插入内容

insertAfter() 把所有匹配的元素插入到另一个指定的元素集合的后面

insertBefore() 把所有匹配的元素插入到另一个指定的元素集合的前面

4.3删除内容

4.3.1 remove() 删除内容

能够将匹配元素从DOM数中删除

 $("h1").remove();//删除匹配的h1节点，并且返回这个要删除的元素

//移动h1到body

$("h1").remove().insertAfter("body");

4.3.2 empty 清空

 $("h1").empty();//删除所有的h1元素

注意

empty不是删除节点，而是清空节点中所有的内容
4.3.3detach() 分离

能够将匹配元素从DOM分离出来

$("h1").detach();
注意

detach()方法能保存所有Jquery数据，与被移走的元素相关联，所有绑定在元素上得事件，附加的数据等都会保留下来

4.4克隆内容

可以创建制定节点的副本

body

<body  >
<h1>哈哈</h1>

<ul>
</ul>
<input type="button" value="添加"/>
</body>

head

		$("h1").click(
		    function(){
				$(this).css("background","#F00");
 $("h1").clone(true).insertAfter("ul"); 
});              //克隆h1标签 并把它放到ul标签后面 并且保留该标签磨人的事件处理函数 
} );

效果：点击h1背景变红色，并且克隆一个也具有点击事件的h1元素

4.5替换

是节点替换
replaceWith()方法

$("input:eq(0)").click(
		    function(){
				 $("input:last").replaceWith("<h1>标题

</h1>")
				});       //结果  点击按钮    将按钮最后一个按钮替换为h1标签

 $("input:eq(0)").click(
		    function(){
				$("<h1>事件</h1>").replaceAll(this);
				});                 //和上面效果一样

4.6 包裹内容
4.6.1外包内容

能够在每个匹配的元素外面包含一个html

<body  >


<h1>一号</h1>
<h1>一号</h1>
<h1>一号</h1>
<input type="button" value="按钮" />
</body>

head
//替换内容
		   $("input:eq(0)").click(
		    function(){
				$("h1").wrap("<li></li>")            
				
				});   //结果点击按钮h1标签外会包含li标签

注意：wrap（）参数必须是闭合的html标签

4.6.2内包

能够为匹配元素里的内容外包一层结构

 $("input:eq(0)").click(
		    function(){
				$("h1").wrap("<li></li>")
				$("body").wrapInner("<ul></ul>");   //为body元素里的内容外包一层结构
				});

4.6.3总包 wrapAll()
能够为所有匹配元素外包一层结构

$("h1").wrapAll("<li></li>");   //在匹配到的所有的li元素外面包一层li标签

4.6.4卸包

将匹配元素的腹肌元素删除，保留自身

body

<a><h1>一号</h1></a>

head

$("h1").unwrap("");   //将h1的父元素a标签删除

4.7属性操作

4.7.1设置属性

设置属性元素

body

<body  >
<input type="radio" checked="checked"/>
<input type="radio" />
</body>

head

方法一

$("input[checked='checked']").prop({ disabled:true});//为checked='checked'的元素设置只读属性

方法二

$("input[checked='checked']").attr({ disabled:true});

4.7.2访问元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
 $(function(){
	 
				$("input").change(function(){
					var $input=$(this);
					$("p").html(
					    $input.attr("checked")+"<br>"+ $input.prop("checked")+"<br>"+$input.is(':checked')
					).change();
				        }
				   );
				
		     $("p").append($("input").prop("checked")+"a");
		   
		   
	 
	 }   );

</script>
<html></html>
</head>

<body  >
<input id="check" type="checkbox" checked="checked"/>
<lable for="check"> </lable>
<p></p>
</body>
</html>

这三个方法他们返回值是不一样的

分别为

checked
false
false

4.7.3attr（）方法
body

<p title="三国时期，曹操问一部下：“你说统一的最大敌人是谁？”">谁？”</p>
<p title="这个部下想都没想就说：“康师傅。">傅。</p>

head

 $("p").each(function(){                                     使用each方法遍历匹配到的所有p元素，然后用attr方法获取每个p元素的title，，并把它放在p标签中
$(this).after("p"+$(this).attr("title")+"</p>");
 }
 );

注意：只获取Jquery第一个匹配元素的属性值，如果想获取每个单独的元素的属性值，需要用jquery中的each或者map方法做一个循环
47.3删除属性
1.removePro（）方法

 $("p:first").removeProp("title");//可删除第一个p标签的title属性

2.removeAttr（）方法

具有良好的浏览器兼容性

 $("p:first").removeAttr("title");

4.8类操作
4.8.1添加类样式

<style>
 .a{ background:#0F0;}
 .b{ color:#00F;}
</style>

<body  >

<p >大库房vkldf</p>
<p >地方的健康理念大富科技</p>
</body>

 $("p:eq(0)").addClass("a");   //为第一个p元素添加a样式
$("p:eq(1)").addClass("a b");  //为第二个p元素添加a 和b元素，并且用空格分开

4.8.2删除类操作

移出复合类样式中的某个样式

  $("p:last").removeClass("c");//删除最后一个p节点

4.8.3切类样式

作用：如折叠，开关，伸缩，Tab切换等动态效果都需要用到交互切换，
body

<body  >
<input type="button" value="按钮" />
<p >大库房vkldf</p>
<p  class="a">地方的健康理念大富科技</p>
</body>

head

$("input").click(function(){
$("p:last").toggleClass("a");
});                        点击按钮：最后一个p元素样式有货无来回切换

 $("p:last").toggleClass("a",false);//第二个参数boolean值来判断样式类添加还是移除

 $("p:last").toggle("a");//点击按钮，    最后一个p元素显示隐藏来切换

4.8.4判断样式

判断元素是否设置为制定属性

 $("p:last").hasClass("a");//判断最后一个p元素是否包含a样式

4.9读写文本和值

4.9.1读写HTML

 var a=$("p:eq(1)").html();    //读取第二个p元素的值
 $("p:last").html(a);          //将变量a加到p的值中

注意：当html（）不包含参数是，表示以字符串的形式读取制定节点下的所有HTML结构

当html（）包含参数时，表示想制定节点下写入html结构字符串
这个HTML（）函数其实是对innerHTML（）属性得封装，因此不支持XML文档

4.9.2读写文本

var a=$("p:eq(1)").text();
$("p:last").text(a);

注意：当text（）不包含参数是，表示以字符串的形式读取制定节点下的所有文本结构

当text（）包含参数时，表示想制定节点下内容写入文本字符串，同事会覆盖该节点原来包含的所有文本内容

4.9.3读写值

值一般指的是value属性的值

<body  >
<form>
<input type="text" value="请输入文本"/>
</form>
</body>

 $("input").focus(function(){
			  if($(this).val()=="请输入文本")$(this).val("");      //获取焦点，清空提示的肉文本信息
			  }
		 );
		  
		   $("input").blur(function(){
			  if($(this).val()=="")$(this).val("请输入文本");     //用户离开文本后，如果输入框没有输入信息，则重新显示默认值
			  }
		 );

注意：val（）一般在读写按钮，复选框，文本框实用，读取速度快，

4.10 样式表操作

稍后回来

从129页到139页