其他分享
首页 > 其他分享> > 越来越少人用JQuery,但你就不学了吗?(3)

越来越少人用JQuery,但你就不学了吗?(3)

作者:互联网

如需要跟多资料请点击下方图片⬇(扫码加好友→备注66)image

Jquery Dom操作

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

​ 常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。

操作元素的属性

获取属性

方法 说明 举例
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>

操作元素的样式

​ 对于元素的样式,也是一种属性,由于样式用得特别多,所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

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

增加元素的具体样式,格式:

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。

方法 说明
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中创建元素很简单,直接使用核心函数即可

$(‘元素内容’);
$('<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>";
	// 1、使用prepend前加内容
	$("body").prepend(str);
	
	// 2、使用prependTo前加内容
	$("<b>开头</b>").prependTo('body');
	
	// 3、使用append后加内容
	$("body").append(str);
	// $("div").append($('.red')); // 当把已存在的元素添加到另一处的时候相当于移动
	 
	// 4、使用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)) :遍历元素

​ 参数 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>

标签:JQuery,不学,人用,attr,样式,元素,color,console,属性
来源: https://www.cnblogs.com/lezijie/p/13231171.html