0108 JQuery

jQuery就是JavaScript和查询（Query），是辅助JavaScript开发的JS类库

核心思想是write less，do more,实现了很多浏览器的兼容问题

1.演示jQuery

怎么为按钮添加点击响应的函数？

        1.使用jQuery查询到标签对象

        2.使用标签对象.click(function(){});

---

2.jQuery核心函数

$是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用这个函数

1.传入参数为“函数”时

表示页面加载完成后，相当于 window.onload = function();

2.传入参数为“HTML字符串”时

表示创建这个HTML标签对象

3.传入参数为“选择器字符串”时

$("#id属性值")；id选择器，根据id查询标签对象

$("标签名")；标签选择器，根据指定的标签名查询标签对象

4.传入参数为“dom对象”时

---

3.jQuery对象和DOM对象区分

DOM对象

1.通过getElementById()查询出来的标签是dom对象

2.通过getElementsByName()查询出来的标签是dom对象

3.通过getElementsByTagName()查询出来的标签是dom对象

4.通过createElement()查询出来的标签是dom对象

DOM对象alert的效果：[object HTML标签名Element]

jQuery对象

1.通过jQuery提供的API创建的对象，是jQuery对象

2.通过jQuery包装的DOM对象，也是jQuery对象

3.通过jQuery提供的API查询的对象，也是jQuery对象

jQuery对象alert的效果：[object Object]

jQuery对象的本质

jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数

jQuery对象和DOM对象使用区别

jQuery对象不能使用DOM对象的属性和方法

DOM对象也不能使用jQuery对象的属性和方法

DOM对象和jQuery对象互转

1.DOM对象转为jQuery对象

        1.1先有DOM对象

        1.2$(DOM对象)就可转为jQuery对象

var $obj = $(DOM对象);

2.jQuery对象转为DOM对象

        1.1先有jQuery对象

        1.2jQuery 对象[下标]就可取出相应的DOM对象

var dom = $obj[下标];

---

4.jQuery选择器

1.基本选择器

#ID 选择器：根据id查找标签对象

.class 选择器：根据class查找标签对象

element 选择器：根据标签名查找标签对象

*        选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回

2.层级选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

parent > child        子元素选择器：在给定的父元素下匹配所有的子元素

prev + next            相邻元素选择器：匹配所有紧接在prev元素后的next元素

prev ~ sibings        之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

3.过滤选择器 

基本过滤器

：first         获取第一个元素

：last         获取最后一个元素

：not(selector)        去除所有与给定选择器匹配的元素

：even        匹配所有索引值为偶数的元素，从0开始计数

：odd          匹配所有索引值为奇数的元素，从0开始计数

：eq(index)        匹配一个给定索引值的元素

：gt(index)        匹配所有大于给定索引值的元素

：lt(index)         匹配所有小于给定索引值的元素

：header          匹配如h1,h2,h3之类的标题元素

：animated        匹配所有正在执行动画效果的元素

 

---

 内容过滤器

：contains（text）        匹配包含给定文本的元素

：empty                        匹配所有不包含子元素或文本的空元素

：parent                        匹配含有子元素或者文本的元素

：has(selector)              匹配含有选择器所匹配的元素的元素

---

属性过滤器 

[attribute]                匹配包含给定属性的元素

[attribute=value]        匹配给定的属性是某个特定值的元素

[attribute!=value]        匹配所有不含有指定的属性或属性不等于特定值的元素

[attribute^=value]        匹配给定的属性是以某些值开始的元素

[attribute$=value]        匹配给定的属性是以某些值结尾的元素

[attribute*=value]        匹配给定的属性是以包含某些值的元素

[attrSel1][attrSel2][attrSel3]        复合属性选择器，需要同时满足多个条件

---

表单过滤器 

:input                     匹配所有input，textarea，select和button元素

：text                    匹配所有文本输入框

：password          匹配所有密码输入框

：radio                  匹配所有的单选框

：checkbox           匹配所有的复选框

：submit                匹配所有的提交按钮

：image                匹配所有image标签

：reset                  匹配所有重置按钮

：button                匹配所有按钮

：file                     匹配所有文件域

：hidden               匹配所有不可见元素，或type为hidden的元素

---

5.jQuery元素筛选 

eq()                获取给定索引的元素

first()                获取第一个元素

last()                获取最后一个元素

filter(exp)        留下匹配的元素

is()                    判断是否匹配给定的选择器，有一个匹配就返回true

has(exp)        返回包含有匹配选择器的元素的元素

not(exp)        删除匹配选择器的元素

next()               返回当前元素的下一个兄弟元素

nextAll()        返回当前元素后面所有兄弟元素

nextUntil()        返回当前元素到指定匹配的元素为止的后面元素

prev(exp)        返回当前元素的上一个兄弟元素

prevAll()

.....

siblings(exp) 返回所有兄弟元素

add()                把add匹配的选择器的元素添加到当前jQuery对象中

.......

---

6.jQuery的属性操作

html()         可以设置和获取起始标签和结束标签中的内容，和dom属性innerHTML一样

text()          可以设置和获取起始标签和结束标签中的文本，和dom属性innerText一样

val()           可以设置和获取表单项的value属性值，和dom属性value一样

val方法可同时设置多个表单项的选中状态

attr()        可以设置和获取属性的值，不推荐操作checked、readOnly、selected...等

attr方法还可操作非标准的属性，如自定义属性：abc..

prop()       可以设置和获取属性的值，只推荐操作checked、readOnly、selected...等

---

7.DOM的增删改

内部插入

appendTo()

        a.appendTo(b) 把a插入到b子元素末尾

prependTo()

        a.prependTo(b) 把a插入到b子元素前面

外部插入

insertAfter()

        a.insertAfter(b) 得到ba

insertBefore()

        a.insertBefore(b) 得到ab

替换

replaceWith()

        a.replaceWith(b) 用b替换a

replaceAll()

        a.replaceAll(b) 用a替换b

删除

remove()        

        a.remove() 删除a标签

empty()

        a.empty() 删除a标签内容

---

8.CSS样式

addClass()        添加样式

removeClass()        删除样式

toggleClass()        有就删除，没有就添加

offset()        获取和设置元素的坐标

---

9.jQuery动画

基本动画

show()        将隐藏的元素显示

hide()          将显示的元素隐藏

toggle()       显示就隐藏，隐藏就显示

以上动画方法都可添加参数

1.第一个参数是动画执行时长，以毫秒为单位

2.第二个参数是动画的回调函数（动画完成后自动调用）

淡入淡出动画

fadeIn()        淡入

fadeOut()        淡出

fadeTo()        在指定时长内将透明度修改到指定的值，0透明，1完全可见，0.5半透明

fadeToggle()   切换

---

10.jQuery事件操作 

$(function(){});

和

window.οnlοad=function(){}

的区别？

1.jQuery的页面加载完成之后，是浏览器的内核解析完页面的标签，创建好DOM对象后就马上执行

2.原生JS的页面加载完成之后，除了要等浏览器内核解析完标签，创建好DOM对象后，还要等标签显示时需要的内容加载完成

分别在什么时候触发？

1.jQuery页面加载完成之后先执行

2.原生JS的页面加载完成之后

它们执行的次数？

1.原生JS的页面加载完成之后，只会执行最后一次的赋值函数

2.jQuery的页面加载完成之后，是把注册的function函数依次全部执行

---

jQuery中常用的事件处理方法 

click()        绑定单击事件，或触发单击事件

mouseover()        鼠标移入事件

mouseout()          鼠标移出事件

bind()                   可以给元素一次性绑定一个或多个事件

one()                    和bind一样，但只会响应一次

live()                    可以用来绑定选择器匹配的所有元素事件，动态创建也有效

unbind()               和bind相反，解除事件绑定

---

事件冒泡 

指父子元素同时监听同一个事件，当触发子元素事件时，同一个事件也被传递到了父元素的事件里去响应

如何阻止事件冒泡？

在子元素事件函数内，return　false

---

JS事件对象 

事件对象是封装有触发的事件信息的一个JS对象

如何获取JS事件对象？

在给元素绑定事件时，在事件的function(event){}参数列表中添加一个参数，参数名习惯取名为event，这个event就是JS传递参数事件处理函数的事件对象

如：