一、内容操作
<p><span>城市</span></p>
//获取p元素的HTML内容：<span>城市</span>
$("p").html()
//设置p元素的HTML内容：此时为：<p><strong>城市</strong></p>
$("p").html("<strong>城市</strong>")
<p><span>城市</span></p>
//获取p元素的文本内容：城市
$("p").text()
//设置p元素的文本内容，此时为：<p><span>新城市</span></p>
$("p").text("新城市")
<input type="text" value="请输入你的名字">
//获取input元素的value值：请输入你的名字
$("input").val()
//设置input元素的value值，此时为：<input type="text" value="请输入">
$("input").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"]);
二、属性操作
<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"
})
$("#city").removeAttr("title"); //删除title属性，此时为：<div id="city">city</div>
三、样式操作
<style>
.myClass{
background: #00ffFF;
}
</style>
$("#city").addClass("myClass");
$("#city").attr("class","myClass");
$("#city").removeClass("myClass"); //移除指定值为myClass的class
$("#city").removeAttr("class"); //移除class属性
<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>
$("#city").hasClass("myClass") //如果含有myClass，返回true
四、样式操作CSS补充
$("#city").css("background","red") //设置”background“ 为red
$("#city").css(
{
"background":"red","width":"500px","fontSize":"50px" //font-size --> fontSize
});
$("#city").css("width") //获取width 的值
服务热线 19970861797
