jQuery的几种属性

娇糖玛奇朵~

已于 2023-04-12 12:03:08 修改

阅读量1.2k

点赞数 2

文章标签： jquery javascript 前端

于 2022-10-20 12:37:50 首次发布

本文链接：https://blog.csdn.net/su3253067688/article/details/127419522

版权

1.jQuery属性操作

1.1元素固有属性值prop()

所谓元素固有属性就是元素本身子代的属性，比如<a>元素里面的href,比如<input>元素里面的type

语法：

描述	语法
获取属性语法	prop（"属性"）
设置属性语法	prop("属性","属性值")

注意：prop()除了普通属性操作，更适合操作表单属性：disabled/checked/selected等

1.2元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index="1"

语法：

描述	语法
获取属性语法	attr（"属性"）//l类似原生getAttrbute()
设置属性语法	attr("属性"，"属性值")//类似原生setAttribute()

注意：attr()除了普通属性操作，更适合自定义属性。（该方法也可以获取h5自定义属性）

1.3数据缓存 data()

描述	语法
附加数据语法	data("name","value")//向被选元素附加数据
获取数据语法	data("name")//向被选元素获取数据

注意：同时，还可以读取html5自定义属性 data-index，得到的是数字型

2.jQuery文本属性值

2.1 jQuery内容文本值

常见操作有三种：html()/text()/val();

语法：

1.普通元素内容html() (相当于原生inner HTML)

html () //获取元素的内容

html("内容") //设置元素的内容

2.普通元素文本内容 text() (相当于原生innerText)

text() //获取元素的文本内容

text("文本内容") 设置文本的内容

3.表单的值 val() ( 相当于原生value)

val() //获取表单的值

val("内容") //设置表单的值

注意：html()可识别标签，text()不识别标签

例题：

<body>
  <div>
   <span>我是内容</span>
  </div>
  <input type="text" value="请输入内容" />
  <script type="text/javascript">
   //1.获取设置元素内容 html()
   console.log($("div").html());
   // $("div").html("123");
   //2.获取设置元素文本内容 text()
   console.log($("div").text())
   $("div").text("123")
   //3.获取设置表单值 val()
   console.log($("input").val());
   $("input").va("123");
  </script>
 </body>

3.jQuery元素操作

jQuery元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

3.1遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作就需要用到遍历。

语法1：

$("div).each(function(index,domEle){xxx;})"

1.each()方法遍历匹配的每一个元素，主要是DOM处理。each每一个

2.里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象

3.所以要想使用jquery方法，需要给这个dom元素转换jQuery对象$(domEle)

注意：此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想要使用jQuery方法需要转换。

语法2：

$.each(object,function (index,element) {xxx;})

1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容
注意：此方法用于遍历jquery对象中的每一项，回调函数中元素DOM对象，想要使用jquery方法需要转换。

4.创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

语法总和：

1.创建

${"<li></li>"};

动态的创建一个<li>

4.1内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生appendChild

element.prepend("内容")

把内容放入匹配元素内部最前面

4.2外部添加

element.after("内容") //把内容放入目标元素后面

element.before("内容") //把内容放入目标元素前面

①内部添加元素，生成之后，他们是父子关系

②外部添加元素，生成之后，他们是兄弟关系

4.3删除元素

element.remove() //删除匹配的元素（本身）

element.empty() //删除匹配的元素集合中所有的子节点

element.html("") //清空匹配的元素内容

1.remove 删除元素本身。

2.empt()和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内内容。
注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API.

例题：

	<title>操作页面元素</title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var jq=$("content>ul>li");
				for(var i=0;i<jq.length;i++){
					var dom=jq[i];
					alert(dom.innerText);
				}
				$.each(jq,function(i,dom){
					alert(dom.innerText)
				});
			});
		</script>
	</head>
	<body>
		<h2>页面操作元素：页面元素的遍历，页面元素的增删</h2>
		<div id="content">
			<ul>
				<li>兔子</li>
				<li>猴子</li>
				<li>老虎</li>
				<li>熊猫</li>
				<li>袋鼠</li>
				<li>狮子</li>
			</ul>
		</div>
		<button id="btn1">内部添加到前面</button>
		<button id="btn2">内部添加到后面</button>
		<button id="btn3">外部添加到前面</button>
		<button id="btn4">外部添加到后面</button>
	</body>