jQuery库引入
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
语法
$(selector).action()
$(document).ready(function(){
console.log("标签加载完毕");
}
遍历
$("p").each(function(){
this.style.color="red";
});
console.log($("p".length));
jQuery选择器
基本选择器
#id： 根据指定的id匹配元素
.class ：根据类匹配元素
Element： 根据元素名匹配元素
* ：匹配所有元素
符号选择器
$("E1,E2,E3")： 选择所有E1,E2,E3的元素
$("E1 E2")：选择E1下所有E2
$("E1>E2")：选择E1下的E2,不包含E2下的元素
$("E1+E2")：选择E1后紧邻的E2
$("E1~E2")：选择E1之后的所有E2
属性选择器
[attribute]：选择拥有此属性的元素
[atribute=value]：选择属性值为value的元素
[attribute!=value]：选择属性值不为value的元素
[attribute^=value]：选择属性值以value开始的元素
[attribute$=value]：选择属性以value值结束的元素
[attribute*=value]：选择属性值中含有value的元素
[attribute~=value]：选择多个属性中国含有value元素
子元素过滤选择器
:first-child：选择每个父元素的第一个子元素
:last-chilid：选择每个父元素的最后一个子元素
:nth-child(index)：选择每个父元素下的第index个子元素或奇偶元素(index从1开始)
:nth-last-child(index)：选择每个元素下的倒数第index个子元素或奇偶元素
:only-child：如果某个元素是它父元素中唯一的子元素，那么将会被匹配
只考虑当前种类
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:only-of-type
基本过滤选择器
:first：选择第一个元素
:last：选择最后一个元素
:eq(index)：选择索引为index的元素，(index从0开始)
:gt(index)：选择索引值大于index的元素
:lt(index)：选择索引值小于index的元素
:even：选择索引是偶数的所有元素
:odd：选择索引是奇数的所有元素
jQuery筛选器
按顺序找
$("p").first().text("123")： 获取第一个元素
$("p").last() ：获取匹配的最后一个元素
$("p").eq(n) ：获取匹配索引的元素
过滤与剔除
$("p").filter("#id4") ：筛选出与指定表达式匹配的元素集合
$("p").not("id4") ：从匹配元素的集合中删除与指定表达式匹配的元素
父子级别查找
$("#container").children().css({"color":red, "border":"1px solid red"}); ：选择所有的子标签
$("#container").find("#id4") ：子级查找
$("#id4").parent()：父级查找
$("#id4").parents()：祖宗查找
$("#id").parentUntil("#container")：父级直到..，不包含
$("#id4").next()：下一个
$("#id4").nextAll()：下面多个
$(#id4").nextUntil("#id7")：下面多个直到..，包含
$("#id4").prev()：上面
$("#id4").prevAll()：上面多个
$("#id4").prevUntil("#id1")：上面多个直到..
$("#id4").siblings()：同辈
文档处理
内容属性处理
// 获得内容
$("p").text();
$("p").html();
$("p").val(); //处理form表单
//设置内容
$("p").text("hello world");
$("p").html("hello world");
$("p").val("hello world");
// 获取属性
$("p").attr("color");
$("p").prop("color");
// 设置属性
$("p").attr("checked","checked");
$("p").prop("checked",true); //处理checkbox，可以自动更新web控件元素状态
类名属性处理
扫描二维码关注公众号，回复：
5700142 查看本文章
// 判断类名
$("p").hasClass("selected")；
// 添加类名
$("p").addClass("selected");
// 移除类名
$("p").removeClass("selected");
// 有类名就移除，没有就添加
$("p").toggleClass("selected");
// 移除属性
$("img").removeAttr("src");
文档元素操作
// 在参考位置末尾追加元素
$("p").append("hello");
// 将元素追加到参考位置末尾
$("hello").appendTo("p");
// 在参考位置前面插入元素
$("p").prepend("hello");
// 将元素插入到参考位置前方
$("hello").prependTo("p");
// 在参考位置后面插入元素
$("p").after("hello");
//将元素插入到参考元素后面
$("hello").insertAfter("p");
// 在参考元素前面插入元素
$("p").before("hello");
// 将元素插入到参考元素之前
$("hello").insertBefore("p");
// 将参考元素替换成新元素
$("p").replacewith("hello");
// 用新元素来替换参考元素
$("hello").replaceAll("p");
// 将参考元素中的所有元素清空,参考元素还在
$("p").empty();
// 将参考元素移除，参考元素删除
$("p").remove();
jQuery事件
文档事件
ready()：规定当DOM完全加载时要执行的函数
resize()：添加/触发resize事件
scroll()：添加/触发scroll事件
on()方法在被选元素及子元素上添加一个或多个事件处理程序
$("p").on("click",function(){
alert("段落点击了");
});
off() 方法移除通过on()方法添加的事件处理程序
$("p").off("click");
one()方法向被选元素添加一个或多个事件处理程序，该处理程序只能被每个元素触发一次
$("p").one("click",function(){
alert("段落被点击");
});
鼠标事件
click、dbclick、mouseenter、mouseleave、mouseover、mousemove
键盘事件
keypress、keydown、keyup
event参数
event.currentTarget ：当前DOM元素
event.target：哪个DOM元素触发事件
event.stopPropagation()：阻止继续向父级执行
jQuery效果
隐藏、显示
$("p").hide();
$("p").show();
$("p").toggle();
淡出、淡入
$("p").fadeOut();
$("p").fadeIn();
$("p").fadeToggle();
收起、放下
$("p").slideUp();
$("p").slideDown();
$("p").slideToggle();
自定义动画
$("p").animate({"left":"+=20px","height":10, 1000, function(){
console.log("播放完毕"); }
});
停止动画
$("p").stop(true,false);
延迟动画
$("p").delay("slow").fadeIn();
jQueryUI
引入jQuery-ui样式
<link rel="stylesheet" href="css/jquery-ui.css">
引入jQuery.js
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
引入jQueryUI.js
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>