愈来愈少人用JQuery，但你就不学了吗？（3）

时间 2020-07-06

标签愈来愈少 jquery 学了栏目 JQuery 繁體版

原文原文链接

如须要跟多资料请点击下方图片⬇（扫码加好友→备注66）javascript

Jquery Dom操做

jQuery也提供了对HTML节点的操做，并且在原生js的基础之上进行了优化，使用起来更加方便。css

经常使用的从几个方面来操做，查找元素（选择器已经实现）；建立节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：如下的操做方式只适用于jQuery对象。html

操做元素的属性

获取属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操做 checkbox 时，选中返回 checked，没有选中返回 undefined。	attr('checked') attr('name')
prop(属性名称)	获取具备true和false两个属性的属性值	prop('checked')

<form action="" id="myform">
	<input type="checkbox" name="ch" checked="checked"/>	aa
	<input type="checkbox" name="ch" />	bb
</form>
		
<script type="text/javascript"> var ch = $("input[type='checkbox']") console.log(ch) ch.each(function(idx, em){ console.log(idx + "-" + $(em) + "=" + this) console.log($(em).attr('checked') + "==" + $(em).prop('checked')) console.log('--------------') }) </script>
复制代码

设置属性

方法	说明	举例
attr(属性名称，属性值)	设置指定的属性值，操做 checkbox 时，选中返回 checked，没有选中返回 undefined。	attr('checked',’checked’) attr('name',’zs’)
prop(属性名称，属性值)	设置具备true和false的属性值	prop('checked',’true’)

移除属性

方法	说明	举例
removeAttr(属性名)	移除指定的属性	removeAttr('checked')

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性操做</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
	</head>
	<body>
		<pre>
			<h5>1.attr()</h5>
			设置或者返回元素的属性 ;
			<h5>2.prop()</h5>
			设置 具备 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
		</pre>
		<hr />
		<a href="http://www.baidu.com" id="a1">百度</a>
		<a href="http://www.sina.com" id="a2">新浪</a>
      	<input type="checkbox" name="all" checked="checked"/>全选 
	</body>
	<script type="text/javascript"> // 获取属性值：attr console.log($('#a1').attr('href')); console.log($(':checkbox').attr('name')); // 若未选中显示undefined，选中显示 checked console.log($(':checkbox').attr('checked')); // 获取属性值：prop // 若未选中显示false，选中显示 true console.log($(":checkbox").prop('checked')); console.log($('#a2').prop('href')) // 设置属性值 $('#a1').attr('href','https://jquery.com'); $(":checkbox").prop("checked",false); // 移除属性 $('#a2').removeAttr('href'); </script>
</html>
复制代码

操做元素的样式

对于元素的样式，也是一种属性，因为样式用得特别多，因此对于样式除了当作属性处理外还能够有专门的方法进行处理。java

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,”样式名”)	修改class属性的值，修改样式
addClass(“样式名”)	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

增长元素的具体样式，格式：jquery

1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})

例：css({"background-color":"red","color":"#fff"});

2）css(“样式名”,”样式值”)

例：css('color','white')
复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素样式</title>
		<script src="jquery-3.4.1.js" type="text/javascript" ></script>
		<style type="text/css"> div{ padding: 8px; width: 180px; } .blue{ background: blue; } .larger{ font-size: 30px; } .green { background : green; } </style>
	</head>
	<body>
		<h3>css()方法设置元素样式</h3>
		<div id="conBlue" class="blue larger">天蓝色</div>
     	<div id="conRed">大红色</div>
     	<div id="remove" class="blue larger">天蓝色</div>
	</body>
	<script type="text/javascript"> // 获取样式名称 console.log($("#remove").attr("class")); // 修改样式，那么id为remove的元素样式class只有green // $('#remove').attr("class","green") // 添加样式名称，class名称 --叠加 // $('#conBlue').addClass("blue larger"); // 添加元素具体样式 // { "":"" , "":"" } 名:值 对 $('#conRed').css({"background-color":"red","color":"#fff"}); $('#remove').css('color','red'); // 移除样式 // $("#remove").removeClass("blue larger"); </script>
</html>
复制代码

操做元素的内容

对于元素还能够操做其中的内容，例如文本，值，甚至是html。app

方法	说明
html()	获取元素的html内容
html("html,内容")	设定元素的html内容
text()	获取元素的文本内容，不包含html
text("text 内容")	设置元素的文本内容，不包含html
val()	获取元素value值
val(‘值’)	设定元素的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操做内容</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
	</head>
	<body>
		<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
     	<div id="text"></div>
        <input type="text" name="uname" value="oop" />
	</body>
	<script type="text/javascript"> // 获取HTML内容，包括HTML标签 console.log($('h3').html()); // 获取文本内容，不包括HTML标签 console.log($('h3').text()); // 获取value值 console.log($('[name=uname]').val()); // 设置 $('#html').html("<p>使用html设置,看不到标签</p>"); $('#text').text("<p>使用text设置,能看到标签</p>"); $('[name=uname]').val("哈哈哈"); // console.info("abc"); // console.log("abc"); // console.warn("abc") // console.error("abc"); </script>
</html>
复制代码

建立元素

在jQuery中建立元素很简单，直接使用核心函数便可dom

$(‘元素内容’);
复制代码

$('<p>this is a paragraph!!!</p>');
复制代码

添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的 content 参数，能够是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的 content 参数，能够是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content元素或内容插入selector 元素内，默认是在尾部
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加</title>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css"> div { margin: 10px 0px; } span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style>
	</head>
	<body>
		<h3>prepend()方法前追加内容</h3>
		<h3>prependTo()方法前追加内容</h3>
		<h3>append()方法后追加内容</h3>
		<h3>appendTo()方法后追加内容</h3>
		<span class="red">男神</span>
		<span class="blue">偶像</span>
		<div class="green">
            <span >小鲜肉</span>
        </div> 
	</body>
</html>
<script type="text/javascript"> var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-color:#ADFF2F;'>动态建立span</span>"; // 一、使用prepend前加内容 $("body").prepend(str); // 二、使用prependTo前加内容 $("<b>开头</b>").prependTo('body'); // 三、使用append后加内容 $("body").append(str); // $("div").append($('.red')); // 当把已存在的元素添加到另外一处的时候至关于移动 // 四、使用appendTo后追加内容 $(str).appendTo('body'); // $('.blue').appendTo("div");  </script>
复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入元素</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css"> span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style>
	</head>
	<body>
		<h3>before() 和 after()方法在元素以前后插入内容</h3>
        <span class="green">财大气粗</span>
	</body>
</html>
<script type="text/javascript"> var str1 = "<span class='red'>土豪</span>"; var str2 = "<span class='blue'>暴发户</span>"; $(".green").before(str1); // 前置元素 $(".green").after(str2); // 后存元素 </script>
复制代码

删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一块儿删。
empty()	清空所选元素的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除元素</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
		<style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style>
	</head>
	<body>
		<h3>删除元素</h3>
		<span class="green">jquery<a>删除</a></span>
        <span class="blue">javase</span>
        <span class="green">http协议</span>
        <span class="blue">servlet</span>
	</body>
</html>
<script type="text/javascript"> // 删除所选元素 或指定的子元素 // $("span").remove(); // 删除样式为blue的span // $("span.blue").remove(); // 清空元素 // $("span").empty(); // $(".green").empty();  </script>
复制代码

遍历元素

each()函数

$(selector).each(function(index,element)) :遍历元素oop

参数 function 为遍历时的回调函数，优化

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历元素</title>
		<style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http协议</span>
        <span class="green">servlet</span>
	</body>
	<script type="text/javascript"> $('span').each(function (idx , e) { console.log(idx + " ---> " + $(e).text()); }) </script>
</html>
复制代码