1.jQuery与css
如需设置指定的CSS属性,可以添加第二个参数,请使用如下语法:
css("propertyname ", "value");
下面的例子将为所有匹配元素设置background-color值:
$("div").css ("background-color", "#001871");
设置多个css属性的方法
css({"propertyname" : "value", "propertyname" : "value",...});
S("div").css("background-color","pink").css("color","aqua");
2.jQuery的class操作
jQuery addClass()方法
addClass()方法向被选元素添加一个类名。
$("li").addclass("bigger");
jQuery removeClass()方法
removeClass()方法向被选元素移除一个类名。
$("li").removeclass("bigger");
jQuery hasClass()方法
hasClass()方法判断被选元素是否包含这个类名。
alert($("li").hasclass("bigger"));
jQuery toggleClass()方法
toggleClass()方法判断被选元素是否有该类名,如果有就移除他,如果没有,添加他。
$("li").toggleclass ("basic");
案例:
<body>
<input style="margin-left: 60px;" type="button" value="添加basic类">
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function() {
//addclass():给元素添加class,如果元素上已经又其他的classname,
//那么会将新增加的追加到现有的classname后面
//找到第一个input标签,绑定单击事件
$("input:first").click(function() {
//先获取到所有的li
//然后再给这些li添加class
$("ul li").addClass("basic")
})
$("input:eq(1)").click(function() {
//先获取到所有的li
//然后再给这些li添加class
$("ul li").addClass("bigger")
})
$("input:eq(2)").click(function() {
$("ul li").removeClass("bigger")
})
$("input:eq(3)").click(function() {
//先获取到所有的li
//hasClass(类名):用来判断元素上是否又某个class,如果有,则返回true,反之则返回false
//alert($("ul li").hasclass( "bigger"))
//如下代码用来判断是否又tigger,如果没有则进行添加
if (!$("ul li").hasClass("bigger")) {
$("ul li").addClass("bigger")
}
})
$("input:eq(4)").click(function() {
$("ul li").toggleClass("bigger")
})
})
</script>
</body>
3.HTML代码操作
html(可以对HTML代码进行操作,类似于JS中的innerHTML。当该方法用于返回内容时,则返回第一个匹配元素的内容。当该方法用于设置内容时,则重写所有匹配元素的内容。
提示:如只需设置或返回被选元素的文本内容,请使用text()方法。
语法
$(selector).html();//设置内容会自动解析标签
4.文本操作
text()可以获取或设置元素的文本内容。
当该方法用于返回内容时,则返回所有匹配元素的文本内容(会删除HTML 标记)。
$(selector).text();//设置内容不会解析标签