JQuery操作与遍历元素并设置其属性、样式和内容

2024-12-01 03:44:36

一、操作属性

属性分类

固有属性

href、src.....
共有属性

id,class,name......
自定义属性

abc= '1234'

操作属性的方法

区别

1.prop不能操作自定义属性

2.prop获取Boolean类型的属性是 true/false
获取属性值

attr(属性名称) 操作 checkbox 时，获取指定的属性值,选中返回 checked，没有选中返回 undefined

op(属性名称) 获取具有true和false两个属性的属性值
设置属性值

attr(属性名称,属性值);

prop(属性名称,属性值);
移除属性

removeAttr("属性")

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="" id="myform">
			<input type="checkbox" id="ch1" name="ch1" abc='123' checked="checked"/>	aa
			<input type="checkbox" id="ch2" name="ch2" abc='456'/>	bb
		</form>
		<script type="text/javascript">
			var ch1 =  $("#ch1");
			var ch2 =  $("#ch2");

			//获取固有属性
			console.log(ch1.attr('type'));
			console.log(ch1.prop('type'));

			//获取共有属性
			console.log(ch1.attr('name'));
			console.log(ch2.prop('name'));

			//获取自定义属性   prop不能操作自定义属性
			console.log(ch1.attr('abc'));
			console.log(ch2.prop('abc'));//undefined

			//获取boolean类型的属性
			console.log(ch1.attr('checked'));//checked
			console.log(ch1.prop('checked'));//true

			//设置boolean类型属性
			ch1.attr("checked",0);
			ch2.attr("checked","checked");
			//效果相同
			ch1.prop("checked",false);
			ch2.prop("checked",true);

			//设置自定义属性
			ch1.attr("abc",'999');
			//prop不能操作自定义属性
			ch2.prop("abc",'999'); //---设置无效

			//设置共有属性
			ch1.attr("name",'ab1');
			ch2.prop("name",'ab1'); 

			//移除属性
			ch1.removeAttr("checked");//boolen类型
			ch1.removeAttr("abc");//自定义属性
			ch1.removeAttr("name");//共有属性
			ch1.removeAttr("type");//独有属性
		</script>
	</body>
</html>

二、操作样式

attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”) 修改class属性的值，修改样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式相当于直接设置行内style
removeClass(class) 移除样式名称

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></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>

		<script type="text/javascript">
			//获取class属性的值，即样式名称
			var clas = $("#conBlue").attr("class");
			console.log(clas);

			//修改class属性的值，修改样式
			$("#conBlue").attr("class","green");//把字体的大小样式和颜色均覆盖

			//addClass(“样式名”)		添加样式名称
			$("#conRed").addClass("larger");

			//css()
			$("#conRed").css("color","red");

			//removeClass(class)				移除样式名称
			$("#remove").removeClass("larger");

		</script>
	</body>
</html>

三、操作元素内容

html()

获取或设置元素的内容，包含html内容可以识别纯文本内容

取值：html()

赋值：html("html,内容")

text()

获取或设置元素的内容，不包含html内容只能识别纯文本内容

取值：text()

赋值：text("html,内容")

val()

获取或设置元素的值

取值:val()

赋值:val(‘值’)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
		<div id="text"></div>
		<input type="text" name="uname" value="oop" />

		<script type="text/javascript">
			//获取元素的内容
			var ht = $("h3").html();
			var te = $("h3").text();
			console.log(ht);
			console.log(te);

			//设置元素内容
			$("#html").html("<b>加粗效果</b>");
			$("#text").text("<b>text加粗效果</b>");

			//val()	获取元素值
			var input = $('[type="text"]').val();
			console.log(input);
			//val() 设置元素值
			$('[type="text"]').val("jquery");
		</script>
	</body>
</html>

四、创建和添加元素

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)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.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>
		<span class="red">男神</span>
		<span class="blue">偶像</span>
		<div class="green">
			 <span >小鲜肉</span>
		</div> 

		<script type="text/javascript">
			//创建元素
			var newP = $("<span>段落标签</span>");
			console.log(newP);

			//添加元素  prepend(content)  内部前追加
			//获取参考位置的元素
			var str = "<span>PDD</span>";
			$('.green').prepend(newP);
			$('.green').prepend(str);
			//prependTo();  被内部前追加
			var str2 = "<span>麻辣香锅</span>";
			$(str2).prependTo($(".green"));

			//append()  内部后追加
			$('.green').append("<span >周杰伦</span>");
			//appendTo(); 被内部后追加
			$("<span >林俊杰</span>").appendTo($('.green'));

			//before  同级前追加
			$(".red").before("<span style='color:black'>薛之谦</span>");
			//after   同级后追加
			$(".blue").after("<span style='color:black'>李荣浩</span>");
		</script>
	</body>
</html>

五、删除元素

remove()

删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()

清空所选元素的内容

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></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>

		<script type="text/javascript">
			//删除
			 //$(".green").remove();
			//清空
			 $(".green").empty();
		</script>
	</body>
</html>

六、遍历元素

格式：

$("值").each(function(index,element){

});

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			span{
				color: white;
				padding: 8px;
				margin: 5px;
				float: left;
			}
			.green{
				background-color: green;
			}
			.blue{
				background-color: blue;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>

		<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
		<span class="green">javase</span>
		<span class="green">http协议</span>
		<span class="green">servlet</span>

		<script type="text/javascript">
			$(".green").each(function(index,ele){
				//当前元素的索引位置
				console.log(index);
				//获取当前 dom 对象
				console.log(ele);
				console.log(this);

				//统一设置样式需要用jquery对象
				$(ele).attr("class","blue");
			});
		</script>
	</body>
</html>

到此这篇关于JQuery操作和遍历元素的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery Dom元素操作技巧

Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM操作可以分为三个方面即DOM Core(核心).HTM-DOM和CSS-DOM. jquery 获取父节点,兄弟节点,在节点内插入内容. ①$("#test1").parent() // 父节点 ②$("#test1").next() //下一个节点 ③$("#test1").
jQuery操作元素节点

目录一.查找节点二.创建和插入节点 1.创建节点 2.插入子节点 3.插入同辈节点三.替换节点四.复制节点五.删除节点 jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&
jQuery操作元素追加内容示例

本文实例讲述了jQuery操作元素追加内容.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作文档结构</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type
jQuery动态生成的元素绑定事件操作实例分析

本文实例讲述了jQuery动态生成的元素绑定事件操作.分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来总结一下这个问题的始末,温故而知新. 先看下click绑定事件的效果. <div> <p>a</p> <p>b</p> <p>c</p> <
jquery对元素的基本操作实例分析

jQuery简介 jQuery是JS的一个类库,对JS中的某些功能进行封装,让DOM操作变得简单,使代码简洁,易于使用,且支持链式写法,兼容性好. jQuery的设计思想和主要用法即:选择某个网页元素,然后对其进行一些操作. jQuery的特别之处在于:用jQuery获取对应元素后,,它不返回这些对应的元素,返回的都是jQuery对象(jQuery构造出来的对象),而此对象可以操作这些对应的元素. jQuery能实现的功能JS一定能实现,反之则不一定. 令window.jQuery = wind
jQuery替换节点元素的操作方法

替换节点元素的操作,实现动态页面的,代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国</title> <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js">
JQuery元素快速查找与操作

首先,我们来看看jquery中如何查找到想要的结点. 第一步:sizzle选择器基于元素的id.类.类型.属性.属性值等"查找"(或选择)HTML元素,简单的说是基于css选择器,除此之外还有一些特定的选择器. 第二步:查询祖先 parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历 parents() 可以使用可选参数来过滤对父元素的搜索返回被选元素的所有祖先元素,它一路向上直到文档的根元素 parentsUntil() 返回介于两个给定元素之间的所
jQuery 查找元素操作实例小结

本文实例讲述了jQuery 查找元素操作.分享给大家供大家参考,具体如下: 1. id // 通过id查找 $('#id') 2. class <div class='c1'></div> // 通过class查找 $('.c1') 3. 标签.组合 <div id='i1' class='c1'> <a>x</a> </div> <div class='c1'> <div class='c2'>x</d
jquery更改元素属性attr()方法操作示例

本文实例讲述了jquery更改元素属性attr()方法.分享给大家供大家参考,具体如下: jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写, 是js中setAttribute()和getAttribute()的简化最基本常用的用法: $("img").attr("src","img/a.jpg"); $("img").attr("width","1
JQuery操作与遍历元素并设置其属性、样式和内容

目录一.操作属性二.操作样式三.操作元素内容四.创建和添加元素五.删除元素六.遍历元素一.操作属性属性分类固有属性 href.src..... 共有属性 id,class,name...... 自定义属性 abc= '1234' 操作属性的方法区别 1.prop不能操作自定义属性 2.prop获取Boolean类型的属性是 true/false 获取属性值 attr(属性名称) 操作 checkbox 时, 获取指定的属性值,选中返回 checked,没有选中返回 undef
jQuery使用CSS()方法给指定元素同时设置多个样式

本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(
jquery操作对象数组元素方法详解

代码如下: 复制代码代码如下: <div id="div1"> <span>a</span> <span>b</span> <span>c</span> </div> 1.错误方式:不能用[]方式取jquery对象数组,如下: 复制代码代码如下: $(function() { var div_span = $("#div1 span&q
jquery如何判断某元素是否具备指定的样式

分为以下2种情况: 1.如果css写成行内样式,可以通过获取style属性的值来判断,示例如下: 判断id为divid的div元素是否有font-size样式: 复制代码代码如下: <div id="divid" style="float:left; font-size:12px;"></div> jquery代码如下: jQuery("#divid").each(function(){ var fontSize = $
Jquery和Js获得元素标签名称的方法总结

Jquery 和 Javascript 获得元素标签名称是通过tagName的属性获取的. 这里提供高版本 Jquery的获取元素标签名称的方法: 1.$( this ).get(0).tagName 2.$( this )[0].tagName 3.$( this ).prop("tagName") 4.$( this ).prop("nodeName") 以上就是小编为大家带来的Jquery和Js获得元素标签名称的方法总结全部内容了,希望大家多多支持我们~
Python面向对象基础入门之设置对象属性

前言前面我们已经介绍了 python面向对象入门教程之从代码复用开始(一) ,这篇文章主要介绍的是关于Python面向对象之设置对象属性的相关内容,下面话不多说了,来一起看看详细的介绍吧用类存储数据类实际上就是一个数据结构,对于python而言,它是一个类似于字典的结构.当根据类创建了对象之后,这个对象就有了一个数据结构,包含一些赋值了的属性.在这一点上,它和其它语言的struct的作用是类似的:存储数据并提供数据检索功能. 例如,下面是史上最简单的类: class Person: pas
jquery操作select元素和option的实例代码

废话不多说了,直接给大家贴代码,具体代码如下所示: <html> <head> <title></title>  <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript
jQuery中DOM树操作之复制元素的方法

本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会
jQuery 操作 HTML 元素和属性的方法

jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery&l
jQuery常见的遍历DOM操作详解

本文实例总结了jQuery常见的遍历DOM操作.分享给大家供大家参考,具体如下: 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素,一直向上遍历,直到文档的根元素(html) .parentsUntil():返回介于两个给定元素之间的所有祖先元素 <!DOCTYPE html> <html> <head> <style> .ancestors *{ disp