改变元素样式
- 只改变一个样式:
$("p").css("color","red");
- 改变多个样式(json: {“属性1”:“赋值1”,“属性2”:“赋值2”} ):
$("#a1").css({"color":"blue","font-size":"32","background-color":"red"});
$("h4").hover(function(){
});
$("h4").click(function(){
$(this).next().show();
$(this).prev().hide();
$(this).prevAll().hide();
})
- 将DOM对象转成jQuery对象
var $p=$(p);
- 将jQuery对象转换成DOM
层次选择器
- 后代选择器 (后代或者父子关系):
$("div li").css("list-style","none");
- 子选择器(必须是直接的父子关系 ):
$("ul>li").css("color","red");
- 相邻兄弟选择器(找和我挨着的后面的兄弟标签 ):
$("#er+li").css("background-color","black");
- 通用兄弟选择器(找我后面所有的兄弟标签):
$("#er~li").css("font-size","40px")
过滤选择器
摘要 | 解释 |
---|
$(“li:first”) | 第一个li |
$(“li:last”) | 最后一个li |
$(“li:eq(2)”) | 下标为2的li |
$(“li:gt(2)”) | 下标大于2的li(不包括2) |
$(“li:lt(2)”) | 下标小于2的li(不包括2) |
$(“li:even”) | 下标为偶数的li |
$(“li:odd”) | 下标为奇数的li |
$(“body :header”) | 获取所有的标题 h1-h6 |
- $(":visible"):选取所有可见的元素
- $(":hidden"):选取所有隐藏的元素
$("[value='显示']").click(function(){
$("div:hidden").show();
})
$("[value='隐藏']").click(function(){
$("div:visible").hide();
})