【jQuery】：DOM的属性、内容、样式操作
目录
一、内容操作
1、html()
与JS中的interHTML属性类似，用以读取或者设置某个元素的HTML内容。
<p><span>城市</span></p>
//获取p元素的HTML内容：<span>城市</span>
$("p").html()
//设置p元素的HTML内容：此时为：<p><strong>城市</strong></p>
$("p").html("<strong>城市</strong>")2、text()
与JS中innerText属性类似，用以读取或设置某个元素中的文本内容。
<p><span>城市</span></p>
//获取p元素的文本内容：城市
$("p").text()
//设置p元素的文本内容，此时为：<p><span>新城市</span></p>
$("p").text("新城市")3、val()
与JS中的Value属性类似，用以设置和获取元素的value属性值。
<input type="text" value="请输入你的名字">
//获取input元素的value值：请输入你的名字
$("input").val()
//设置input元素的value值，此时为：<input type="text" value="请输入">
$("input").val("请输入")需要注意的是，val()还可以用于下拉框，多选框，单选框的选项选择，以下拉框为例：
<select id="single_select">
<option >1</option>
<option >2</option>
<option >3</option>
</select>
<select id="multiple_select" multiple>
<option >1</option>
<option >2</option>
<option >3</option>
</select>
//选择2
$("#single_select").val("2");
//同时选择2和3
$("#multiple_select").val(["1","2"]);二、属性操作
1、获取与设置属性
<div id="city" title="this is city">city</div>
$("#city").attr("title") //获取该元素的title属性值：this is a city
$("#city").attr("title","new city"); //设置title属性的值为new city
$("#city").attr({ //设置多组属性值的格式
"title":"newCity",
"name":"city"
})2、删除属性
$("#city").removeAttr("title"); //删除title属性，此时为：<div id="city">city</div>三、样式操作
1、追加样式
事先定义指定的class样式，使用addClass操作。
<style>
.myClass{
background: #00ffFF;
}
</style>
$("#city").addClass("myClass");2、设置样式
同样可以事先定义class样式，使用attr()设置属性。
$("#city").attr("class","myClass");3、移除样式
使用removeClass移除class样式，或利用removeAttr移除class属性。
$("#city").removeClass("myClass"); //移除指定值为myClass的class
$("#city").removeAttr("class"); //移除class属性removeClass（）：括号内不加参数代表删除所有的class属性。
removeClass（"myClass yourClass“）：指定多个属性值时，用空格隔开。
4、切换样式
使用toggleClass方法进行样式切换。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.4.2.min.js"></script>
<script>
$(function () {
$("input").click(function () {
//如果该元素有值为myClass的class，则移除该class，如果没有则添加
$("#city").toggleClass("myClass");
})
})
</script>
<style>
.myClass {
background: #00ffFF;
}
</style>
</head>
<body>
<div id="city" title="this is city" class="myClass">city</div>
<input type="button" value="点击切换样式">
</body>5、判断是否含有样式
$("#city").hasClass("myClass") //如果含有myClass，返回true四、样式操作CSS补充
利用CSS-DOM，通过设置或读取style属性来操作样式。
1、设置样式
$("#city").css("background","red") //设置”background“ 为red$("#city").css(
{
"background":"red",
"width":"500px",
"fontSize":"50px" //font-size --> fontSize
});2、获取样式
$("#city").css("width") //获取width 的值 相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25