首先引入jQuery类库
转化成dom对象的转化使用get（）方法；
jQuery选择器：
常用的选择器：
1、id （唯一）
替代document.getElementById()函数，即通过ID获取元素。
这个不是注释
利用jquery选择器；获取id名称为jquery对象
获取jquery的value值
$(“#id”).val() //var()方法获取第一个匹配的jQuery对象的当前值
示例
描述:
查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]
、类别选择器：
获取jquery的对象
id相同
示例
描述:
查找所有类是 "myClass" 的元素.
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
3、标签选择器：
获取标签名称为input的所有的jQuery对象
长度
$inputs.size();
4.
只有一个引号；
是一个dom对象；
怎莫转化成jQuery对象：
示例
描述:
找到匹配任意一个类的元素。
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
案例：
$one.css(“background-color”,”#bbffaa”);
层次选择器：
当文档加载完毕触发匿名函数；
$(document).ready(function(){
})
//获取thead的所有后代元素
$(“thead th”);
$(“thead>th”); //获取的是当前下的子元素（不包括孙子元素）
$(“#thead+th”);//获取的是下一个元素
$(“#thead ~ th”);//获取的是当前下后面的同一级别下的所有元素
过滤选择器
以：开头的 都是过滤选择器；
获取的是tr下的第一个元素
获取最后一个
；排除摸一个id
偶数，从0开始
奇数，从0开始
等于从0开始
大于从零开始
小于；
注意冒号前边加不加空格的区别
内容过滤选择器:
$(“td:contains()”)
可见性过滤器：
获取隐藏的元素
获取div中隐藏的元素
示例
描述:
查找隐藏的 tr
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:hidden")
示例
描述:
查找所有可见的 tr 元素
HTML 代码:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:visible")
属性过滤选择器：
过滤属性 ，id就是属性的名称
[attribute】
概述
匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
参数
attributeString
属性名
示例
描述:
查找所有含有 id 属性的 div 元素
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
<script type="text/javascript">
$(document).ready(function(){
var $demo1 = $("div[title]");
//$demo1.css("background-color","red");
var $demo2 = $("div[title=99]");
//$demo2.css("background-color","red");
var $demo3 = $("div[title!=99]");
//$demo3.css("background-color","red");
var $demo4 = $("div[title^='te']");
//$demo4.css("background-color","red");
var $demo5 = $("div[title$='est']");
//$demo5.css("background-color","red");
var $demo6 = $("div[title*='22']");
//$demo6.css("background-color","red");
var $demo7 = $("div[id][title*='22']");
$demo7.css("background-color","red");
});
</script>
</head>
<body>
<!--
选取下列元素,改变其背景色为 # bbffaa
含有属性title 的div元素.
属性title值等于"test"的div元素.
属性title值不等于"test"的div元素(没有属性title的也将被选中).
属性title值 以"te"开始 的div元素.
属性title值 以"est"结束 的div元素.
属性title值 含有"es"的div元素.
选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.
-->
<div style="width: 60px;height: 60px;" title="teee22" id="xiao"></div>
<div style="width: 60px;height: 60px;" title="te99est"></div>
<div style="width: 60px;height: 60px;background-color: green"></div>
<div style="width: 60px;height: 60px;" title="teee22est"></div>
</body>
子元素过滤选择器：
<script type="text/javascript">
$(document).ready(function() {
var $demo1 = $(".one>div:nth-child(2)");
//$demo1.css("background-color","red");
var $demo2 = $(".one>div:first-child");
//$demo2.css("background-color","red");
var $demo3 = $(".one>div:last-child");
// $demo3.css("background-color","red");
var $demo4 = $(".one>div:only-child");
$demo4.css("background-color", "red");
});
</script>
</head>
<body>
<!--
,改变其背景色为 # bbffaa
每个class为one的div父元素下的第2个子元素.
每个class为one的div父元素下的第一个子元素
每个class为one的div父元素下的最后一个子元素
如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
-->
<div style="width: 60px; height: 60px;" class="one">
<div style="width: 60px; height: 60px;" title="te99est"></div>
<div style="width: 60px; height: 60px; background-color: green"></div>
</div>
<div style="width: 60px; height: 60px;" title="teee22est" class="one" >
<div style="width: 60px; height: 60px; background-color: green"></div>
</div>
<div style="width: 60px; height: 60px;" title="teee22est"></div>
</body>
