1.官网：
http://jQuery.com
2.引用
下载所需压缩文件包
创建文件保存在
<script src= '文件地址'> <script>
所写的js文件要在jQuery文件引用链接下
3.基础语法 :
$ ( srlector ) .action ( )
(1)美元符号$定义jQuery
(2)选择符(selector)“查询”和“查找”HTML元系
(3)jQuery的action ( )执行对元案的操作
例：
$(document).ready(function(){
alert("文档加载完毕”）}）
加载文档完成后就会触发后面的函数
例：
$(document).ready(function(){
$('p').click（function{
$(this).hide()
}）
}）;
加载文档完成后就会触发后面的函数,点击那个p标签，那个就隐藏
$(function(){
}）
表示文档加载完成，不包含图片等
4.基础选择器
1.All Selector(“*”)
描述:选择所有元素
语法 :S("*")
注意:实践证明，由于使用"选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。
例：
$(function(){
$("div*").html("我们是一家人");
})
表示选择所有div子元素，将标签内容改为：我们是一家人
2.Class Selector(".class")
描述:选择给定样式类名的所有元素
语法: $(".class")
例：
$(function(){
$(".s").html("我们是一家人");
})
表示选择类名为s的元素，将标签内容改为：我们是一家人
3.Element Selector ("element")
描述:根据给定(html)标记名称选所有的元素
语法:$("element”)
例：
$(function(){
$("span").html("我们是一家人");
})
4.ID Selector(*#id")
描述:选择一个具有给定id属性的单个元素。
语法:$("#id")
例：
$(function(){
$("#name").html("我们是一家人");
})
5.Multiple Selector ("selector1, selector2, selectorN‘’）
描述:将每一个选择器匹配到的元素合并后一起返回
语法:$("selector1, selector2, selectorN")
例：
$(function(){
$("p，span，label").html("我们是一家人");
})
5.属性选择器
1.Attribute Contains Prefix Selector [name ="value"]
描述:选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后限一个连字符”” )的元素。
语法: $("[attribute='value']")
注意:引号是可选的.可以是一个不带引号的一个单词或带一个引号的字符串。
例：
$(function(){
$("[hreflang=en]") .css("color","red");
})
将属性为hreflang=en的标签文字颜色变为红色
2.Attribute Contains Selector [name*="value"]
描述:选择指定属性具有包含一个给定的子字符申的元素。(选择给定的属性是以包含某些值的元奈)
语法:$("[attribute*='value']”)
例：
$(function(){
$("[p*='hello']") .css("color","red");
})
3.Attribute Contains Word Selector [name- ="value"]
描述:选择指定属性用空格分隔的值中包含一个给定值的元素
语法:$([attribute~='value]”)
例：
$(function(){
$("input[name~='man']") .val('mr.man is in it!');
})
4 Attribute Ends With Selector [name$="value"]
描述:选挥指定属性是给定值的元素。
语法:$("[attribute='value'T)
5 Attribute Not Equal Selector [name!="value"]
描述:选择不存在指定属性，或者指定的属性值不等于给定值的元素
请法:$("[attribute!='value]")
6.Attribute Ends With Selector [name$-"value"]
描述:选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
语法 : $("[attribute$='value]")
7.Attribute Starts With Selector [name^ ="value"]
描述:选指定属性是以给定字符串开始的元素
语法:$("[attribute^='value]”)
8.Has Attribute Selector [namel]
描述:选择所有具有指定属性的元素，该属性可以是任何值
语法: $("[attribute]')
9.Multiple Attribute Selector [name="value"][name2="value2"]
描述:选择匹配所有指定的属性筛选器的元素。
语法:$("[attributeFilterl]lattributeFilter2][attributeFilterN]")
6.基础过滤
1. :animated Selector
描述:选择所有正在执行动画效果的元素
语法:$(":animated")
例：$("div:animated").toggleClass("colored");
<script> $(function(){ // 选择id为run的元素 添加一个点击事件 $("#run").click(function(){ // 选择正在执行动画的div元素 给他一个类名colored $("div:animated").toggleClass("colored"); }); // 设置一个动画函数 函数名为animatedIt function animatedIt(){ // 选择id为mover的元素 添加一个动画 // slideToggle表示用滑动动画显示或者隐藏一个元素 // slideToggle 动画参数 slow表示延迟时间600毫秒，第二个参数为函数名，不需要（） $("#mover") .slideToggle("slow",animatedrt); } // 调用这个函数 animatedit(); }) </script>
2. :eq ( ) Selector
描述:在匹配的集合中选择索值为index的元素
语法:
(1)$(":eq(index)"): index: 要匹配元素的索引值(从0开始计数)
(2)$(:eq(-index)"):-index要匹配元素的索引值(从0开始计数)从最后一个元素开始倒计数。
3. :even Selector
描述:选择索引值为偶数的元素，从0开始计数。 也可以查看odd(奇数)
语法:$(":even")
注意:这是基于0的索引，
所以even选择器是选择第一个元素，第三个元素，依此类推在匹配
所以odd选择器是选择第二个元素，第四个元素，依此类推在匹配
4. :first Selector
描述:选择第一个匹配的元素。
语法 : $(":first" )
5. :focus Selector
描述:选择当前获取焦点的元素
语法:$(":focus")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .focused{ background-color: red; } </style> <script src="jQuery.js" ></script> </head> <body> <div id ='content'> <input> <input> <select> <option >select menu</option> </select> <div> a div </div> </div> <script> $( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this ); setTimeout(function() { elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0); }); </script> </body> </html>
注意函数名的大小写，如toggleClass不能写成toggleclass，要不然就识别不到函数
报错为：
6. :header Selector
描述:选择所有标题元素，像h1,h2h3等
语法:$(":header")
7. :last Selector
描述:选挥最后一个匹配的元素。
语法 :$(":last")
8. :gt（）Selector
描述:选择匹配集合中所有大于给定index(索值)的元素。
语法 : $(":gt(index)") 或 (":gt(-index）
9. :lt（） Selector
注意：l为小写的L，不是大写的i
描述:选择匹配集合中所有索引值小于给定index参数的元素
语法 : $(":lt(index)") 或 S(":lt(-index)")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jQuery.js" ></script> </head> <body> <table border="1"> <tr><td>TD#0</td><td>TD#1</td><td>TD#2</td></tr> <tr><td>TD#3</td><td>TD#4</td><td>TD#5</td></tr> <tr><td>TD#6</td><td>TD#7</td><td>TD#8</td></tr> </table> <script> $(function(){ $('td:lt(4)').css("color","red"); }) </script> </body> </html>
效果
10.:not() Selector
描述:选择所有元素去除不匹配给定的选择器的元素。
语法: $(":not(selector)")
