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.bmabk.com/index.php/post/130161.html
