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)")