首页 前端知识 jQuery的几种属性

jQuery的几种属性

2024-08-14 22:08:02 前端知识 前端哥 721 715 我要收藏

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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15570.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!