一、利用标签名改变格式
原生 javascript 情况下，需要改变标签中内容的属性时需要使用
document.getElementByTagName(‘标签名’) 来编写代码。
而 jQuery 方法与 CSS 相同，指定需要操作的标签名即可操控所有的标签。
实例：
<p>
<span> span 标签的颜色变为红色</span>
</p>
$(function(){
$("span").css("color","red");
});
二、通过 id 获取元素
实例：
<div>这个标签没有指定 ID，因此不变色</div>
<div id="testId">标签 id 为 testId，变红色</div>
$(function(){
$("#testId").css("color","red");
});
三、通过类名获取元素
实例：
<div>这个标签没有指定 className，因此不变色</div>
<div class="testClass">标签 className 为 testClass，变红色</div>
$(function(){
$(".testClass").css("color","red");
});
四、一次性获得多个元素
可以一次性获取完全不相干的以标签名，或者以 id 和类名为标识的元素，这些标识之间用 “，” 分割。
实例：
<div id="id_name">id 为 id_name，因此变为红色</div>
<div>没有定义 id 及 class，不改变颜色</div>
<div class="className">这个标签的类名为 className，因此变为红色</div>
<p>p 标签也变为红色</p>
$(function(){
$("p, #id_name, .className").css("background","red");
});
五、通过指定层次关系获取元素
语法：
$('祖先 子孙')
$('父>子')
$('前+后')
$('兄~弟')
实例：
<form>
<label>子节点</label><input type="text" value="背景变成红色">
<fieldset>
<label>孙节点</label><input type="text" value="背景变成红色">
</fieldset>
</form>
<label>form外</label><input type="text" value="背景不变色">
<fieldset>
<label>form外</label><input type="text" value="背景不变色">
</fieldset>
$(function(){
$("form input").css("background","red");
$("form > label").css("background","red");
$("label + input").css("background","red");
$("form ~ label").css("background","red");
});
六、根据元素的属性值获取元素
语法：
//获取拥有指定属性的元素
$("p[id]").css("background","red");
//获取拥有指定属性（下同不再赘述，*代替）且设定值一致的元素
$("p[id=testId]").css("background","red");
//获取*且设定值不一致的元素
$("p[id!=testId]").css("background","red");
//获取*且设定值的最初一部分一致的元素
$("p[id^=testId]").css("background","red");
//获取*且设定值的最后部分一致的元素
$("p[id$=testId]").css("background","red");
//获取*且设定值中包含指定字符串的元素
$("p[id*=testId]").css("background","red");
实例：
<div>div 标签中没定义 id 属性，不变色</div>
<div id="div_test" class="class1">div 标签中定义了 id 属性，也不变色</div>
<p id="p_test1" class="class1">p 标签中定义了 id 属性，变红色</p>
<p id="p_test2" class="class2">p 标签中定义了 id 属性，变红色</p>
$(function(){
$("p[id!=p_test2]").css("color","red");
});
七、通过过滤器获取元素
语法：
:first //获取第一个元素
:last //获取最后一个元素
:not(filter) //获取除了指定元素外的元素
:even //获取偶数序号的元素
:odd //获取奇数序号的元素
:eq(index) //获取指定序号的元素
:gt(index) //获取指定序号后的元素
:lt(index) //获取指定序号前的元素
:header //获取标题元素
:animated //获取动画元素
:contains(text) //获取包含指定字符串的元素
:empty //获取空元素
:has(selector) //获取拥有子孙元素的元素
:parent //获取非空元素
实例：
<ul>
<li>第 0 个 li 的文字变为红色</li>
<li><h3><span>第 1 个 li</span></h3></li>
<li>第 2 个 li 不变色</li>
<li><span>第 3 个 li 不变色</span></li>
<li>最后一个 li 不变色</li>
</ul>
$(function(){
$("li:first").css("color","red");
});
八、获取表单元素
实例：
待定
九、通过过滤器获取表单元素
实例：
待定
十、从集合元素中通过指定序号获取元素
实例：
<div id="content">
<p>0号</p>
<p>1号</p>
<p>2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p>7号</p>
</div>
$(function(){
$("p").eq(2).css("backgroundColor","red");
});
十一、获取指定条件一致的元素
实例：
<div id="content">
<p class="center">0号</p>
<p class="center">1号</p>
<p class="center">2号</p>
<p class="center">3号</p>
<p class="center">4号</p>
<p class="center">5号</p>
<p class="center">6号</p>
<p>7号</p>
</div>
$(function(){
$("p").css("color","blue").filter(".center").css("backgroundColor","yellow");
});
十二、获取指定范围的元素
实例：
<div id="content">
<p>0号</p>
<p>1号</p>
<p>2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p>7号</p>
</div>
$(function(){
$("p").slice(4,7).css("backgroundColor","yellow");
});
十三、获取与条件表达式一致的元素
实例：
<div id="content">
<p>0号</p>
<p>1号</p>
<p class="blue">2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p class="yellow">6号</p>
<p>7号</p>
</div>
$(function(){
$("p").each(function(){
switch(true){
case $(this).is(".blue"):
$(this).css("backgroundColor","blue");
break;
case $(this).is(".yellow"):
$(this).css("backgroundColor","yellow");
break;
default:
break;
}
})
});
十四、获取元素的下一个元素
实例：
<div id="content">
<p class="yes">0号</p>
<p>1号</p>
<p class="yes">2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p class="yes">6号</p>
<p>7号</p>
</div>
$(function(){
$("p").next(".yes").css("background","red");
});
十五、获取元素的前一个元素
实例：
<div id="content">
<p class="yes">0号</p>
<p>1号</p>
<p class="yes">2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p class="yes">7号</p>
</div>
$(function(){
$("p").prev('.yes').css("backgroundColor","yellow");
});
十六、获取元素的父元素
实例：
<div id="content">
<p>0号</p>
<p>1号</p>
<p>2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p>7号</p>
</div>
$(function(){
$("p").parent().css("backgroundColor","yellow");
});
十七、获取元素的子元素
实例：
<div id="content">
<p>0号</p>
<p>1号</p>
<p class="yes">2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p>7号</p>
</div>
$(function(){
$("#content").children(".yes").css("backgroundColor","yellow");
});