jQuery继续学习

（一）选择器
1.基础语法：$(selector).action( )

(1) 美元符号$定义jQuery
(2) 选择符(selector) “查询” 和 “查找” HTML元素
(3) jQuery的action()执行对元素的操作

2.基础选择器
（1）All Selector(“*”)
描述：选择所有的元素
语法：$(“*”)

注意：实践证明，由于使用“选择器获取的是全部元素”因此，有些浏览器将会比较缓慢，该选择器谨慎使用

（2） class Selector(“.class”)
描述：选择给定样式类名的所有元素
语法：$(“.class”)

（3）Element Selector(“element”)
描述：根据给定(HTML)标记名称选择所有的元素
语法：$(“element”)

（4）class Selector(“#id”)
描述：选择一个具有给定id属性的单个元素
语法：$(“#id”)

（5）Multiple Selector(“selector1,selector2,selectorN”)
描述：将每一个选择器匹配到的元素合并后一起返回。
语法：$(“1,2,3”)
2.属性选择器

（1）:animated Selector
描述：选择所有正在执行动画效果的元素
语法：$(“:animated”)

（2） :eq() Selector
描述：在匹配的集合中选择索引值为index的元素
语法：
▲ $(“:eq(index)”):index:要匹配元素的索引值(从0开始计数)

▲$(“:eq(-index)”):-index:要匹配元素的索引值(从0开始计数)，从最后一个元素开始倒计数。

（3） :event Selector
描述：选择索引值为偶数的元素，从0开始计数，也可以查看odd(奇数)，
语法：$(“:event”)
注意：这是基于0的索引，所以odd是选择第一个，第三个元素，依次类推匹配。

（4）:first Selector
描述：选择第一个匹配的元素
语法：$(“:first ”)

（5）:focus Selector
描述：选择当前获取焦点的元素
语法：$(“:focus”)

（6） :Header Selector
描述：选择所有标题元素，像h1,h2,h3
语法：$(“:header”)。

（7） :last Selector
描述：选择最后一个匹配的元素
语法：$(“:last”)

（8） :gt() Selector
描述：选择匹配集合中所有大于给定ndex(索引值)的元素
语法：$(gt(index)) 或者$(:gt(-index));

（9） :lt() Selector
描述：选择匹配集合中所有小于给定ndex(索引值)的元素
语法：$(lt(index))或者$(:lt(-index));

（10）:not() Seletor
描述：选择所有元素去除不匹配的给定的选择器的元素
语法：$(“:not(selector)”)
3.子元素过滤
（1）:frst child Selector
描述:选择所有父级元素下的第一个子元素。
语法:jQuery(“first child” )

（2）:last child Selector
描述选择所有父级元素下的最后- 个子元素。
语法:jQuery(” last child” )

（3）:frst of -type Selector
描述: 选择所有相同的元素名称的第一个兄弟元素。
语法:jQuery(“:first-of-type )

（4）:last of type Selector
描述:选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
语法:jQuery(*:last-of type”)

（5）:nth-child0 Selector
描述选择的他们所有父元素的第n个子元素。
语法:jQuery(“:nth-child index/even/odd/equation) )
4.jQuery内容过滤
（1）:contains0 Selector
描述:选择所有包含指定文本的元素
语法:jQuery(“contains(text)”)
注意:text: 用来查找的一个文本字符串。这是区分大小写的。匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。

（2）:emptySelector
描述选择所有没有子元素的元素(包括文本节点)。
语法:jQuery(*:empty”)

（3）:has() Selector
描述:选择元素其中至少包含指定选择器匹配的一个种元素
语法:jQuery(“has(selector)”)

（4）:parent Selector
描述:选择所有含有子元素或者文本的父级元素
语法:jQuery(“parent”)

5.jQuery表单选择器
(1):button Selector
描述:选择所有按钮元素和类型为按钮的元素。
语法:jQuery(“:button)

(2):checkbox Selector
描述选择所有类型为复选框的元素。
语法:jQuery(“checkbox”)

(3):checked Selector
描述:匹配所有勾选的元素
语法:jQuery(*:checked”)

(4):disabled Selector
描述:选择所有被禁用的元素。
语法:jQuery(*disabled”)

烤柚~❁҉҉҉҉҉ 2017/12/6 23:02:25
(5):enabled Selector
描述选择所有可用的( 注:未被禁用的元素)元素。
语法:jQuery(“:enabled”)

(6):f le Selector
描述:选择所有类型为文件(file)的元素。
语法:jQuery(“:file’)

(7):focus Selector
描述:选择当前获取焦点的元素。
语法:jQuery(“:focus”)

(8):imageSelector
描述选择所有图像类型的元素
语法:jQuery(*image”)

(9):inputSelector
描述:这择所有input,.textarea,select 和button 元素
语法:jQuery(” input”)

(10):password Selector
描述:选择所有类型为密码的元素
语法:jQuery(“:password”)

(11):radio Selector
描述:选择所有类型为单选框的元素
语法:jQuery(“radio”)

(12):submit Selector
描述:选择所有类型为提交的元素
语法:jQuery(*:submit”)
6.jQuery层级选择器
（1）Child Selector(“parent > child”) 子元素选择器
描述:选择所有指定“parent” 元素中指定的”child”的直接子元素。
语法:jQuery(“parent > child”)
注:parent: 任何有效的选择器。
child: 用来筛选子元素的选择器。

（2）descendantselector(后代选择器)
描述：选择给定的祖先元素的所有后代元素。
语法:jQuery(“ancestor descendant”)
注:ancestor 任何效的选择器。
descendant:一个用来筛选后代元素的选择器。

（3）nextadjacent selector(“prev + next”)相邻选择器
描述选择所有紧接在”prev”元素后的“next”元素
语法:jQuery(“prev + next”)
注:prev: 任何有效的选择器。
next: 用于筛选紧跟在”prev” 后面的元素的选择器。

（4）Next Siblings Selector (“prev~ siblings”)
描述:匹配”prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings” 选择器。
语法:jQuery(“prev~ siblings”)
注:
prev.任何有效的选择器
siblings: 一个选择器来过滤第- 一选择器以后的兄弟元素。
(prev + next) 和(prev~ siblings)的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。
7.jQuery可见性过滤选择器
（1）hidden selector
描述选择所有隐藏的元素。
语法:jQuery(“:hidden”)
（2）visible selector
描述:选择所有可见的元素。
语法:jQuery(“:visible”)

元素可以被认为是隐藏的几个情况:
1)CSS display值 是none。
2)type=”hidden”的表单元素。
3)宽度和高度都设置为0。
4)一个祖先元素是隐藏的，因此该元素是不会在页面上显示。

如果元素占据文档中一定的空间，元素被认为是见的。可见元素的宽度或高度，是大于零。
所以:元素的visibility: hidden 或opacity: 0被认为是可见的，因为他们仍然占用空间布局。
不在文档中的元素是被认为隐藏的jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式。
隐藏元素上做动画，元素被认为是可见的，直到动画结束。

二.事件
1.鼠标事件
（1）.cick() 点击事件
（2）.dblclick( ):双击事件
（3）.hover( ):鼠标悬停和离开
（4）.mousedown() 鼠标按下
（5）.mouseenter() 鼠标进入元素
（6）.mouseleave() 鼠标离开元素
（7）.mousemove(0 鼠标在元素内移动
（8）.mouseout() 鼠标离开元素(支持事件冒泡)
（9）.mouseover( 鼠标进入元素内(支持事件冒泡)
（10）.mouseup() 鼠标按键被释放

2.键盘事件
(1).keydown()
(2).keypress(
(3).keyup()

3.jQuery浏览器事件以及文档加载事件
（1）浏贤器事件:
.error( )
.resize( ) //窗口改变
.scroll()
（2）文档加载事件
（3）文档加载过程

4.jQuery文档加载过程
（1）js中onload与ready事件的区别
ready事件:
ready事件在DOM结构绘制完成之后就会执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。
load事件:
load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。
（2）文档加载过程
(1)解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3)解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

5.jQuery绑定事件处理器
（1）.bind()
（2）.delegate() //可以绑定非事件对象的函数
（3）.off0()
（4）.on()
（5）one() //执行一次
（6）.unbind()
（7）.undelegate()

6.jQuery事件对象
（1）event currentTarget
（2）eventtarget
（3）event deleg ateTarget
（4）event pageX
（5）event pageY
（6）eventtype
（7）eventpreventDefault()
（8）event stopPropagation )

7.jQuery表单事件
（1）focus( )
（2）blur()
（3）change( )
（4）select( )
（5）submit( )

三.DOM属性
1..addClass( className) 为每个四配的元素添加指定的样式类名
2..attr( attributeName) :获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
3..hasClass( className) :确定任何一个匹配元素是否有被分配给定的(样式)类。
4..html（） 获取集合中第一个匹配元素的HTML内容设置每一个四配元素的html内容。
5..prop( propertyName) :获取匹配的元素集中第一个元素的属性(property) 值为匹配的元素设置一个或多个属性(properties )。
6..removeAttr( attributeName) 为匹配的元素集合中的每个元素中移除属性(attribute )。
7..removeCass( [ClassName]) :移除集合中每个匹配元素上 一个，多个或全部样式。
8、.removeProp( propertyName) 为集合中匹配的元素删除一个属性(property ).
9..toggleClass()在匹配的元素集合中的每个元素上添加或删除一个或多个样式类取决于这个样式类是否存在或值切换属性。即:
如果存在 (不存在 )就删除 (添加) 一个类。
10..val() :获取四配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。