`

jQuery-动手篇

jQueryCSSHTML 
阅读更多 
<body>
一.基本选择器
1.ID选择器：$("#temp").addClass("bgred");
2.类选择器：$(".temp").addClass("bgred");
3.合选择器:$("#temp,#test").addClass("bgred");
二.层次选择器:
1.后代选择器:$("form label").addClass("bgred");//只要label的上级有form则会应用上样式
2.孩子选择器:$("form > label").addClass("bgred");//当label的父标签是form则会应用上样式
3.兄弟选择器:$("form + label").addClass("bgred");//当form元素和label元素互为兄弟则会label元素应用上样式
4.兄弟链选择器(自己起的名字):$("form ~ label").addClass("bgred");//所有与form元素同级的label元素则会应用上样式
二.滤镜选择器:
1.位置控制滤镜
$("#dataTable tr:first").addClass("bgred");
$("#dataTable tr:last").addClass("bggreen");
$("#dataTable tr:odd").addClass("bggreen");
$("#dataTable tr:even").addClass("bggreen");
$("#dataTable tr:eq(1)").addClass("bgred");
$("#dataTable td:empty").addClass("bgred");
$("#dataTable td:parent").addClass("bgred");
$("#dataTable tr:hidden").show().addClass("bgred");
$("#dataTable tr:visible").addClass("bgred");
$("#dataTable tr:visible").hide();
2.内容控制滤镜
$("div.temp:contains('博客')").addClass("bgred");
$("div.temp:has(p)").addClass("bgred");//针对标签
$("div.temp:not(.withp)").addClass("bgred");
三.表单选择器:
1.内容滤镜
$("#loginForm :text").addClass("bgred");
$("#loginForm :password").addClass("bgred");
2.功能滤镜
$("#loginForm input:enabled").addClass("bggreen");
$("#loginForm select option:selected").addClass("bggreen");
3.属性滤镜
$("#loginForm input[class][name=nickname]").addClass("bgred");


四.函数
alert($("form input").attr("name"));//获取第一个匹配的元素
$("form input").attr("value","茶叶");//修改所有有value这个属性的元素的value值为茶叶
$("form input").attr("value",function(){return this.name});

$("form input").removeAttribute("value");
$("form input").removeClass("test");
$("form input").toggleClass("bgred");//交替样式

alert($("#content").css("background-color"));
$("#content").css("background-color","green");

$("#content").css(
		{
			"background-color":"green",
			"color":"gray"
		}
);		

alert($("#temp").html());
$("#temp").html("<h1>大乡里</h1>");

alert($("#temp").text());
$("#temp").text("<h1>大乡里</h1>");

$("#temp p").filter(".lovecn").addClass("bgred");

$("#temp p").filter(
		function(){
			return $(this).hasClass("lovecn");
		}).addClass("bggreen");
		
$("#btnTest").click(function(event) {
	$("#temp p").each(function() {
		if (!$(this).hasClass("lovecn")) {
			$(this).addClass("bggreen");
		}
	})
});

//对比:
$("input").filter(".lovecn").addClass("bgred");
$("form").find(".lovecn").addClass("bgred");

$(document).ready(function() {
	$("#dataTable tr:odd").addClass("bgred");
	$("#dataTable tr:even").addClass("bggreen");

	$("#dataTable tr").mouseover(function() {
		$(this).addClass("bgwhite");
	});
	$("#dataTable tr").mouseout(function() {
		$(this).removeClass("bgwhite");
	});
});

$("#content .lovecn").next().end().addClass("bgred");//灾难恢复,回滚
$("#content .lovecn").next().andSelf().addClass("bgred");//把之前获得的元素加入next中获得的元素
</body>

 

分享到：
| jquery-动态样式表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics