jQuery基础

jQuery基础

• jQuery简介

1 概念：jQuery是一个优秀的JavaScript库，而非JavaScript，它是轻量级的库

2 兼容性：兼容css3，以及各种浏览器

3 版本：

  1x -------兼容低端浏览器

  2x -------兼容从IE9开始以及各种高端浏览器

4 jQuery使用户能更方便的处理HTML、event、实现动画效果，并且更方便的为网站提供Ajax交互。

5 优势：它的文档说明很全，而且各种应用也说的很详细，同时还有许多成熟的插件可供选择。

6 核心理念：write less，do more

• jQuery语法

基础语法：$(selector).action( )

  (1) 美元符号$定义jQuery

  (2) 选择符(selector) “查询” 和 “查找” HTML元素

  (3) jQuery的action()执行对元素的操作

jQuery选择器

• jQuery基础选择器

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

• jQuery属性选择器

1 Attribute Contains Prefix Selector[name|=”value”]

  描述：选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连接符”-”)的元素

  语法：$(“[attribute|='valye']”)

  注意：引号是可选的，可以是不带引号的一个单词或者带引号的一个字符串

2 Attribute Contains Selector[name*=”value”]

  描述：选择指定属性包含一个给定子字符串的元素

  语法：$(“[attribute*='value']”)

3 Attribute Contains Word Selector[name~=”value”]

  描述：选择指定属性用空格分隔的值中包含一个给定值的元素

  语法：$(“[attribute~='value']”)

4 Arrribute Selector[“name = 'value'”]

  描述：选择指定属性是给定值的元素

  语法：$(“[attribute='value']”)

 

5 Attribute Not Equal Selector[name != value]

  描述：选择不存在属性，或者指定的属性值不等于给定值的元素

  语法：$(“[attribute!='value']”)

6 Arrribute End With Selector[“name $= 'value'”]

  描述：选择指定属性以定值结尾的元素，该比较是区分大小写的

  语法：$(“[attribute$='value']”)

7 Arrribute Start with Selector[“name ^= 'value'”]

  描述：选择指定属性是给字符串值开始的元素

  语法：$(“[attribute='value']”)

 

8 Has Attribute Selector[name]

  描述：选择具有指定属性的元素，该属性可以是任意值

  语法：$(“[attribute]”)

9 Arrribute End With Selector[“name $= 'value'”]

  描述：选择指定属性以定值结尾的元素，该比较是区分大小写的

  语法：$(“[attribute$='value']”)

• jQuery基础过滤

1 :animated Selector

  描述：选择所有正在执行动画效果的元素

  语法：$(“:animated”)

 

2 :eq() Selector

  描述：在匹配的集合中选择索引值为index的元素

  语法：(1)  $(“:eq(index)”):index:要匹配元素的索引值(从0开始计数)

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

3 :event Selector

  描述：选择索引值为偶数的元素，从0开始计数，也可以查看odd(奇数)，

  语法：$(“:event”)

  注意：这是基于0的索引，所以event是选择第一个，第三个元素，依次类推匹配。

4 :first Selector

  描述：选择第一个匹配的元素

  语法：$(“:first ”)

 

5 :focus Selector

  描述：选择当前获取焦点的元素

  语法：$(“:focus”)

6 :Header Selector

  描述：选择所有标题元素，像h1,h2,h3 

  语法：$(“:header”)。

$(function () {

           

$("#content").delegate("*","focus

blur",function(event){

                var e = $(this);

                setTimeout(function () {

                   

e.toggleClass("focused", e.is(":focus"));

                },0);

            });

       

});

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

• jQuery子元素过滤

1、：first-child Selector

描述：选择所有父级元素下的第一个子元素

语法：jQuery（" :first-child"）

2、：last-child Selector

描述：选择所有父级元素下的最后子元素

语法：jQuery（" :last-child"）

3、：first of-type Selector

描述：选择所有相同元素名称的第一个兄弟元素

语法：jQuery（" :first of-type"）

4、：last of-type Selector

描述：选择所有元素之间具体相同元素名称的最后一个兄弟元素

语法：jQuery（" :last of-type"）

5、：nth-child() Selector

描述：选择的他们所有父元素的第n个子元素

语法：jQuery（" :ninth-child（index/even/odd/equation）"）

• jQuery内容过滤

1、:contains() Selector

描述:选择所有包含指定文本的元素

语法:jQuery(":contains(text)")

注意:text用来查找的一个文本字符串。这是区分大小写的。匹配的文本可以直接出现在所选的元素中,或在该元素的任何后代中,或两者兼有

2、:empty Selector

描述:选择所有没有子元素的元素(包括文本节点)

语法:JQuery(":empty")

3、:has() Selector

描述:选择元素其中至少包含指定选择器匹配的一个种元素

语法:JQuery(":has(selector)")

4、:parent Selector

描述:选择所有含有子元素或者文本的父级元素

语法:JQuery(":parent")

• jQuery表单选择器

1、:button Selector

描述:选择所有按钮元素和类型为按钮的元素

语法: jQuery(":button") 

2、:checkbox Selector

描述:选择所有类型为复选框的元素

语法: jQuery(“:checkbox") 

3、:checked Selector

描述:匹配所有勾选的元素

语法: jQuery(":checke")

4、:disabled Selector

描述:选择所有被禁用的元素

语法: jQuery(":disabled")

5、:enab|ed Selector

描述:选择所有可用的(注:未被禁用的壳素)元素

语法: jQuery(“:enabled”)

6、: file Selector

描述:选择所有类型为文件(file)的元素

语法: jQuery ( ":file")

7、:focus Selector

描述:选择当前获取焦点的元素

语法: jQuery(" :focus")

8、: image Selector

描述:选择所有图像类型的元素

语法: jQuery(": image")

9、:input Selector

描述:选择所有 Input , textarea, select和 button元素

语法: jQuery(" :input")

10、:password Selector

描述:选择所有类型为密码的元素

语法: jQuery(": password")

11、:radio Selector

描述:选择所有类型为单选框的元素

语法: jQuery(": radio")

12、: submit Selector

描述:选择所有类型为提交的元素

语法: jQuery(":submit")

•  jQuery层级选择器

1、 Child Selector(" parent> child")子元素选择器

描述:选择所有指定" parent"元素中指定的"child"的直接子元素

语法: jQuery(" parent>child”)

注：

 parent: 任何有效的选择器

child :用来筛选子元素的选择器

2、 descendant Selector(后代选择器)

描述:选择给定的祖先元素的所有后代元素。

语法: jQuery(" ancestor descendant")

注:

 ancestor:任何有效的选择器 

descendant:一个用来筛选后代元素的选择器。

3. next adjacent Selector("prev+next")相邻选择器

描述:选择所有紧接在"prev"元素后的"next"元素

语法: jQuery("prev+next”)

注:

prev:任何有效的选择器

next:用于筛选紧跟在"prev"后面的元素的选择器。

4 . Next siblings Selector ( "prev~iblings")

描述:匹配"prev"元素之后的所有兄弟元素。具有相同的父元素,并匹配过滤" siblings"选择器

语法: jQuery(" prev ~siblings")

注:

prev:任何有效的选择器

siblings:一个选择器来过滤第一选择器以后的兄弟元素

(prev+next)和(prev~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前耆只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素

• jQuery选择器扩展

• jQuery可见性过滤选择器

1、 hidden Selector

描述:选择所有隐藏的元素

语法: jQuery(" hidden”)

补充:

元素可以被认为是隐藏的几个情况

1)他们的CSS display值是none

2)他们是type="hidden"的表单元素

3)它们的宽度和高度都设置为0

4一个祖先元素是隐藏的,因此该元素是不会在页面上显示

2、 visible Selector

述:选择所有可见的元素

语法: jQuery(": visible")

如果元素占据文档中一定的空间元素被认为是可见的。可见元素的宽度或高度,是大于零

所以：元素的visibility:hidden或opacity被认为是可见的，因为他们仍然占用空间布局

不在文档中的元素是被认为隐藏的 jQuery没有办法知道他们是否是可见的,因为元素可见性依榖于适用的样式

隐藏元素上做动画，元素被认为是可见的，直到动画结束

jQuery事件

• jQuery鼠标事件

1、.click():点击事件

2、.dblclick():双击事件

3、.hover():鼠标悬停和离开

4.、.mousedown()鼠标按下

5、. mouseenter():鼠标进入元素

6、.mouseleave():鼠标离开元素

7、.mousemove():鼠标在元素内移动

8、 .mouseout():鼠标离开元素(支持事件冒泡)

9.、 .mouseover():鼠标进入元素内(支持事件冒泡)

10、. mouseup0:鼠标按键被释放

•  jQuery键盘事件

1、 .keydown()

2、.keypress()

3、. keyup ()

• jQuery浏览器事件以及文档加载事件

1、浏览器事件：

.error()  例如:图片加载错误

.resize ( )

.scro‖()

2、文档加载事件

3、文档加载过程

• jQuery文档加载过程

1.复习js中ready与 onload事件:

*ready事件:

ready在DoM结构绘制完成之后就会执行,这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行

*load事件：

load必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发

2文档加载过程

(1)解析HTML结构

(2)加载外部脚本和样式表文件

(3)解析井执行脚本代码

(4)构造 HTML DOM模型。// ready

(5)加载图片等外部文件

(6)页面加载完毕。//load

•  jQuery绑定事件处理器

1、.bind() 

2、.delegate()

3、.off()

4、.on()

5、.one()

6、.unbind()

7、.undelegated()

• jQuery事件对象

1 event.currentTarget

2 event.target

3 event delegate Target

4 event.pageX

5 event.pageY

6 event.type

7 event.preventDefault()

8  event.stopPropagation()

• jQuery表单事件

1、focus()

2、blur() 

3、change () 

4、select ()

5、submit()