jQuery——简洁的javaScript库

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控件元素状态

类名属性处理

// 判断类名
$("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>