jQuery
语法
1、引用声明：
<script src="jQuery文件URL" type="text/javascript" charset="UTF-8"></script>
2、基础语法结构：
- jQuery的美元符号$是jQuery的简写
- 文档就绪函数写法
//写法一
$(document).ready(function(){
//jQuery函数
})
//写法二
$(function(){
//jQuery函数
})
选择器
基础选择器
// 全局选择器：选择文档中所有元素，包括<head>及<script>,运行速度较慢
$("*")
//元素选择器：选择指定元素标签
$("p") //选择所有p标签
//id选择器：选择指定id的元素
$("#test") //选择id=test的元素
//类选择器：选择所有具有同一个指定class的元素
$(".a") //选择class=“a”的元素
//多重选择器：选择符合条件的所有结果
$("p,hl,div") //选择文档中所有段落元素<p>、标题元素<hl>和块元素<div>
属性选择器
//带有指定属性的元素
$("[alt]") //所有带alt属性的元素
//属性等于指定值得元素
$("[href='#']") //所有href属性值等于#的元素
//属性不等于指定值的元素
$("[href!='#']") //所有href属性值不等于#的元素
//属性以指定值结尾的元素
$("[src$='.png']") //所有src属性以.png结尾的元素
//属性以指定值为开头的元素
$("input[name^='nation']") //所有name属性以nation为开头的元素
//属性包含指定值的元素
$("input[name*='nation']") //所有name属性包含nation的元素
表单选择器
//所有<input>元素
$(":input")
//所有type=“text”的<input>元素
$(":text")
//所有type=“password”的<input>元素
$(":password")
//所有type=“radio”的<input>元素
$(":radio")
//所有type=“checkbox”的<input>元素
$(":checkbox")
//所有type=“submit”的<input>元素
$("input:submit")
//所有type=“reset”的<input>元素
$(":reset")
//所有type=“button”的<input>元素
$(":button")
//所有type=“image”的<input>元素
$(":image")
//所有type=“file”的<input>元素
$(":file")
指定状态的表单元素选择器
//所有启用的<input>和<button>元素
$(":enabled")
//所有被禁用的<input>和<button>元素
$(":disabled")
//下拉列表中处于被选中状态的<option>元素
$(":selected")
//所有被选中的单选按钮或者复选框
$(":checked")
层次选择器
//子元素选择器:只能选择指定元素的第一层子元素
//语法：$("parent>child")
$("p>span") //p标签下面的span标签
//后代选择器:指定元素内包含的所有后代元素(可以是第n层子元素)
//语法：$(ancestor descendant)
$("p span") //p标签下面的span标签
//后相邻选择器:与指定元素相邻的后一个元素
//语法： $("prev+next")
//后兄弟选择器：指定元素后面跟随的所有符合条件的元素(可以是多个)
//语法：$("prev~siblings")
//jQuery css选择器
//语法： $(selector).css(propertyName,value);
$("p").css("background-color","gray"); //将所有<p>标签背景改为灰色
过滤器
基础过滤器
//:first 选择第一个符合条件的元素
$("div:first") //选定第一个div
//:last 选择最后一个符合条件的元素
$("p:last") //选定最后一个段落
//:even 选择偶数的元素（元素从0开始计数）
$("tr:even")
//:odd 选择奇数的元素
$("tr:odd")
//:eq() 选择指定序号的元素
$("li:eq(0)")
//:gt() 选择大于指定序号的元素
$("li:gt(2)")
//:lt() 选择小于指定序号的元素
$("li:lt(2)")
//:not() 选择所有不符合指定要求的元素
$(":not(p#test)") //选择除id=test之外的所有段落
//:header 选择所有的标题元素，即<h1>~<h6>
$(":header") //选中网页中所有标题
子元素过滤器
//:first-child 所有父元素中的第一个子元素
$("p:first-child")
//:last-child 所有父元素中的最后一个子元素
$("p:last-child")
//nth-child() 所有父元素中的第n个子元素
$("ul#test li:nth-child(odd)") //在id=test的列表中选择所有奇数项<li>元素
$("li:nth-child(2)") //选择第2个<li>元素
//nth-last-child() 所有父元素中倒数第n个元素
$("li:nth-last-child(2)") //选择倒数第2个<li>元素
//only-child 所有父元素中唯一的子元素
$("ul:only-child") //选择只有一个<li>元素的列表
内容过滤器
//:contains() 选择div中包含北京的
$("div:contains('北京')")
//:empty
$("td:empty") //选择没有内容的<td>元素
//:parent
$("td:parent") //选择有内容的<td>元素
//:has() 选择包含有strong标签的div元素
$("div:has(strong)")
可见性过滤器
//:hidden 选择所有隐藏的元素
$("p:hidden") //网页中不占用任何位置空间就被认定为是隐藏的
//:visible 选择所有可见状态的元素
$("p:visible")
事件
文档/窗口事件
ready() //文档准备就绪时触发
$(document).ready()
load() //文档加载时触发
$("img").load(function(){
alert("图像已加载");
})
unload() //当用户的浏览器窗口从当前窗口跳到提起窗口时触发
$(window).unload()
键盘事件（键盘事件顺序为 keydown -> keypress ->keyup）
-
所有的键盘事件对象，都有keyCode属性，这个keyCode属性可以获取键值。keyCode是键盘事件对象的属性。记住：键盘上回车键的键值是13；ESC键的键值是27。
-
keypress事件与keydown和keyup的主要区别：
1）对中文输入法支持不好，无法响应中文输入
2）无法响应系统功能键（如delete，backspace）
keydown() //键盘被按下触发
keypress() //键盘被按下并快速释放触发
keyup() //键盘被释放触发
$("input:text").keydown(function(){
console.log("keydown");
$("#tip").text("键盘被按下");
});
鼠标事件
click() //单击
dblclick() //双击
hover() //悬浮
mousedown() //按下
mouseup() //释放
mousemove() //移动
mouseenter() //进入
mouseleave() //离开
mouseover() //穿过
mouseout() //离开
toggle() //在jQuery1.8版之后已过期，慎用
表单事件
blur() //当表单元素失去焦点时发生
focus() //当表单元素获得焦点时发生
change() //当表单元素的值发生改变时发生
select() //textarea 或文本类型的 input 元素中的文本被选择时发生
submit() //提交表单时发生
事件的绑定与解除
bind() //为被选元素添加一个或多个事件
delegate() //为被选元素的子元素添加一个或多个事件
on() //在被选元素及子元素上添加一个或多个事件
off() //用于移除添加的事件处理程序
one() //添加只运行一次的事件
语法：
$(selector).on(event,[data,] function)
eg:
$("button").on/bind/delegate({
"click":function(){
$("body").css("background-color","red")
},
"dblclick":function(){
$("body").css("background-color","yellow")
},
"mouseover":function(){
$("body").css("background-color","blue")
}
})
特效
隐藏显示
hide() //隐藏
show() //显示
toggle() //隐藏和显示切换
$(selector).hide([duration] [, callback]);
duration参数设置隐藏动作执行持续时间，默认单位毫秒，可以填写“fast”默认持续时间是200毫秒，而“slow”默认是600毫秒或者具体数值
callback参数为隐藏动作执行完成之后下一步执行的函数名，没有可以不写
eg：
$("#hidebtn2").click(function(){
$("#test2").hide(3000) //三秒隐藏完成
})
$("#showbtn2").click(function(){
$("#test2").show("fast")
})
淡入淡出
fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出切换
$(selector).fadeIn([duration] [, callback])
fadeTo() //元素变为指定的透明度（0~1）
$(selector).fadeTo (duration, opacity [, callback])
opacity：该参数为必填内容，用于设置元素的透明度。透明度的数值必须在0~1之间，数值越小透明度越高。0为完全透明，1为非透明。
滑动
slideDown() //向下滑动元素
slideUp() //向上滑动元素
slideToggle() //切换向上和向下滑动元素
$(selector).slideDown([duration] [, callback])
动画
animate()
$(selector).animate({params} [, duration] [, callback])
params:（必选项）表示形成动画的CSS属性，允许多个属性同时改变
duration和callback（可选项）
eg：
$("#btn").click(function(){
$("div").animate({
width:"400",
fontSize:"25",
//当CSS属性名称中包含的连字符 " - “ 时，需要使用Camel标记法
backgroundColor: "#aaffaa",
opacity:"0.35" //透明度
},2000)
})
//使用CSS属性中的方位值left、right、top以及bottom改变元素位置实现移动的效果，在HTML中所有元素的position属性值默认为静态（static）无法移动，若想移动需事先设置指定元素的position属性为relative、absolute或者fixed。
$("#btn1").click(function(){
$("div").animate({
left:"+200px",
top:"+100px"
},3000)
})
//动画队列 多个连续的animate()，在同一个animate()方法中描述的多个动画效果会同时发生，不同animate()方法中描述的会按顺序先后发生
方法链接
$(selector).action1().action2().action3()......actionN();
eg：
$("#btn").click(function(){
$("p").slideUp(3000)
.slideDown("slow")
.css("background-color","green")
.fadeTo(2000,0)
.fadeTo(2000,1)
})
停止动画
$(selector).stop([stopAll] [, goToEnd]);
stopAll和goToEnd均为可选项；
stopAll：是否清除后续所有动画，填入布尔值，默认为false；
goToEnd：是否立即完成当前的动画，填入布尔值，默认值为false；
HTML DOM
获取和设置
//text() //获取元素的纯文本内容，不识别html标签（非表单元素）
//text("内容") //设置元素的纯文本内容，不识别html标签（非表单元素）
console.log( "id为test1的元素的内容是:" + $("#text1").text() );
$("#text2").text("信科院");
//html() //获取元素的内容，包含html标签（非表单元素）
//html("内容") //设置元素的内容，包含html标签（非表单元素）
console.log( "id为html1的内容是:" + $("#html1").html() );
$("#html1").html("<h2>湖南</h2>");
//val() //获取元素的值（表单元素）
//val("值") //设置元素的值（表单元素）
console.log( "id为op的元素的内容是:" + $("#op").val() );
$("#op").val("today!");
//attr() //获取或设置选定元素的属性值
console.log( "id为aa的name属性值是:" + $("#aa").attr("name") );
$("a").attr("href","http://www.baidu.com");
//css() //获取或设置选定元素的css属性值 addClass()为某个元素添加样式,removeClass()删除样式,toggleClass()删除添加轮流
console.log("段落的背景颜色是：" + $("p").css("background-color") );
$("p").css("background-color","red");
$("p").css("background-color":"red" , "font-size":"25px");
$("button").click(function(){
$("div#remove").toggleClass("bule");
})
添加
append() //选定元素内部结尾处插入内容
prepend() //选定元素内部开头插入内容
after() //选定元素之后出入内容
before() //选定元素之前插入内容
//用法一样
$("p#test").append("这是一段测试内容");
appendTo() //将内容插入到选定元素之前
$("<span>Hello World!</span>").appendTo("p"); //将Hello World!插入到p标签之前
删除
remove() //删除选定元素及其子元素
$("p#test").remove(); //删除id为test的段落
empty() //清空元素，文本内容
$("h1").empty();
removeAttr() //删除元素的指定属性
$("div").removeAttr("id");
尺寸
width() //获取或设置宽度（不包括内外边距和边框宽度）
height() //获取或设置高度（不包括内外边距和边框宽度）
innerWidth() //获取或设置宽度（包括内边距）
innerHeight() //获取或设置高度（包括内边距）
outerWidth() //获取或设置宽度（包括内边距和边框宽度）
outerHeight() //获取或设置高度（包括内边距和边框宽度）
遍历
后代遍历
children() //只能查找指定元素的第一层子元素
$("#dc").children().css({border:"3px solid red",backgroundColor:"pink"});
find() //方法可用于查找指定元素的所有后代元素
//查找id=df下面所有后代元素
$("#df").find("*").css({border:"3px solid red",backgroundColor:"pink"});
//查找id=df下面所有<span>后代元素
$("#df").find("span").css({border:"3px solid red",backgroundColor:"pink"});
这里加上选择器：
子元素选择器：只能选择指定元素的第一层子元素
格式：父元素>指定元素 （>隔开）
$("parent>chlid") $("父元素>指定元素")
后代选择器：指定元素内包含的所有后代元素(可以是第n层子元素)
格式：父元素 指定元素 （空格隔开）
$("ancestor descendant") $("父元素 指定元素")
同胞遍历
siblings()：查找指定元素的所有同胞元素
next()：查找指定元素的下一个同胞元素
nextAll()：查找指定元素后面的所有同胞元素
nextUntil()：查找指定元素后面指定范围内的所有同胞元素
.nextUntil()([selector][, filter])
filter:进一步筛查
prev()：查找指定元素的前一个同胞元素
prevAll()：查找指定元素前面的所有同胞元素
prevUntil()：查找指定元素前面指定范围内的所有同胞元素
.prevUntil()([selector][, filter])
filter:进一步筛查
这里加上选择器：
后兄弟选择器：指定元素后面跟随的所有符合条件的元素(可以是多个)
格式：元素~指定元素 （~隔开）
$("prev~siblings") $("元素~指定元素")
后相邻选择器：与指定元素相邻的后一个元素
格式：元素+指定元素 （+隔开）
$("prev+next") $("元素+指定元素")
祖先遍历
parent()：查找指定元素的直接父元素
parents()：查找指定元素的所有祖先元素
parentsUntil()：查找指定元素向上指定范围的所有祖先元素
/*
.parentsUntil()([selector][, filter])
filter:进一步筛查
*/
eg：
$("li").parentsUntil("div#d1","#d2"); //向上查找id=d1的祖先元素，不超过id=d2的范围