一.选择器
1.三个基本选择器,$("#ID") 、$(".className") 、$("tagName")
2.其他选择器
//html页面
<div class="box">box1</div>
<h1>h1</h1>
<div class="box">box2</div>
<div class="box">box3</div>
<ul>
<li>li11111</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li></li>
<li><span>box2</span></li>
</ul>
<div><li></li></div>
<h1>h1</h1>
<h2>h2</h2>
<input type="hidden" name="" class="box">
<input type="text" name="" class="box">
<div class="box">box</div>
<div class="box" style="display: none;">box</div>
<div title="one">1</div>
<div title="two" class="a">2</div>
<div title="three">3</div>
<div class="box">
<input type="text" name="">
<input type="password" name="">
<input type="radio" name="">
<input type="checkbox" name="">
<input type="submit" name="">
<input type="button" name="">
<input type="file" name="">
<input type="hidden" name="">
<textarea></textarea>
<select >
<option>1</option>
<option>2</option>
</select>
<button>btn</button>
</div>
<script type="text/javascript">
//层级选择器
$("ul li").css("font-size","50px"); //选取ul下的li元素
$("ul li").html("替换内容").css("font-size","50px");
$(".box+h1").css("color","red"); //类名为.box紧挨着的h1元素
$("h1~.box").css("background","yellow"); //选取h1后面所有类名为.box的所有兄弟元素
//过滤选择器
$("ul li:first").css("background","red"); //选取ul下的第一个li
$("ul li:first").css("background","red"); //选取ul下的第一个li
的li,即第二个
的li,即第二个
$("ul li:odd").css("font-size","100px"); //选取ul下的偶数项li
$("ul li:not(.nob)").css("border","3px solid #000"); //选取ul下的li,除开类名为.nob的其他所有项
的li,即前2个
$(":header").css("color","pink"); //选中标题标签,所有h标签都被选中
//内容过滤
$("li:contains(li1)").css("color","red"); //选取li元素,同时文本内容包含li1的
$("li:empty").css({height:100,background:"red"}); //选取li元素,且文本内容为空的
$("li:has(span)").css("border","1px solid green"); //选取嵌套span标签的li元素
$("li:parent").css("background","yellow"); //选取父元素下面含有li标签的父元素
//可见性过滤
$(".box:hidden").css("width","200px"); //注意$符号括号里面没有空格,表示要同时满足2个条件
$(".box:visible").css("background-color","pink"); //选中类名为box的标签,同时要满足是可见的
//属性过滤
$("div[title]").css("background-color","pink"); //从所有div标签选取带属性title的标签
$("div[title=one]").css("color","yellow"); //从所有div标签选取带属性title且值为one的标签
$("div[title][class=a]").css("color","red"); //从所有div标签选取带属性title和带class=a属性值的标签
//子元素过滤
$("li:nth-child(2)").css("background-color","red"); //选取每个父元素下第2个li元素
$("li:nth-child(odd)").css("font-size","50px"); //选取每个父元素下奇数项li元素
$("li:first-child").css("color","blue"); //选取每个父元素下第一个li元素
$("li:only-child").css("font-style","italic"); //选取每个父元素下只有一个li元素的li元素
//表单类型
$(".box :input").css("background-color","pink"); //选取所有input、textarea、select、button元素
$(".box :text").css("font-size","10px"); //选选取所有的单行文本框
$(".box :password").css("font-size","20px"); //选取所有的密码框
$(".box :radio").css("font-size","30px"); //选取所有的单选框
$(".box :checkbox").css("font-size","40px"); //选取所有的多选框
$(".box :submit").css("font-size","50px"); //选取所有提交按钮
$(".box :button").css("font-size","60px"); //选取所有的按钮
$(".box :file").css("font-size","70px"); //选取所有的上传域
$(".box :hidden").css("font-size","80px"); //选取所有不可见元素
</script>