jQuery对象小结

一.jQuery对象

1.jQuery是一个优秀的JavaScript框架,一个轻量级的JS库，它封装了JS、CSS、DOM,提供了一致的、简洁的API

兼容CSS3，及各类浏览器

使用户更方便地处理HTML、Events、实现动画效果、并且方便地为网站提供AJAX交互

使用户的HTML页面保持代码和HTML内容分离

2.jQuery对象

为了解决浏览器的兼容问题而提供的一种统一封装后的对象描述

jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery对象，所以方法可以连缀调用

“jQuery对象.方法().方法().方法()”

通过jQuery选择器选中的对象为jQuery对象

--如$(“div”)和$(“#d1”)

二、jQuery对象和DOM对象的关系

jQuery对象本质上是一个DOM对象数组，它在该数组上扩展了一些操作数组中元素的方法如:

可以直接操作这个数组:

-obj.length:获取数组长度

-obj.get(index):获取数组中的某一个DOM对象

-obj[index]:等价于obj.get(index)

三、DOM对象转换为jQuery对象

DOM对象可以直接转换为jQuery对象

-$(DOM对象)

1-通过选择器选中的对象是jQuery对象。

2-通过$()所获得的对象是jQuery对象

3-jQuery赋值的方法一般返回的还是jQuery对象

4-jQuery取值的方法若返回节点则是jQuery对象

5-jQuery取值的方法若返回文字则是String(内置对象)

>通过控制台打印观察

四、jQuery选择器

jQuery选择器类似于CSS选择(定位元素，施加样式)、能够实现定位元素，施加行为

使用jQuery选择器能够将内容与行为分离

1、选择器种类

jQuery选择器包含如下种类:

--基本选择器

--层次选择器

--过滤选择器

--表单选择器

1)基本选择器

     --元素选择器:依据标签名定位元素

-$(“标签名”)

2)类选择器:依据标签名定位元素

--$(“.calss属性名”)

3)Id选择器:根据id属性定位元素

--$(“#id”);

4)选择器组:定位一组选择器所对应的所有元素

--$(“#id,.importent”);

2.层次选择器

1)在select1元素下，选中所有满足select2的子孙元素

--$(“select1 select2”)

2)在select1元素下，选中所有满足select2的子孙元素

--$(“select1>select2”)

3)选中select1元素的,满足select2的下一个弟弟

--$(“select1+select2”)

4)选中select1元素的，满足select2的所有弟弟

--$(“select~select2”)

3.过滤选择器

1)根据元素的基本特征定位元素,常用于表格和列表

--:first                第一个元素

--last                   最后一个元素

--not(selector) 把selector排除在外

--even                挑选偶数行

--odd                  挑选奇数行

--eq(index)              下标等于index的元素

--gt(index)        下标大于index的元素

--lt(index)         下标小于index的元素

2)内容过滤选择器

--根据文本内容定位元素

-:contains(text)匹配包含给定文本的元素

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

3)可见性过滤选择器

--根据可见性定位元素:

-:hidden 匹配所有不可见元素,或type为hidden的元素

-:visible 匹配所有的可见元素

4)属性过滤选择器

--根据属性定位元素

-[attribute]      匹配具有attribute属性的元素

-[attribute=value] 匹配属性等于value的元素

-[attribute!=value] 匹配属性不等于value的元素

5)状态过滤选择器

--根据状态定位元素

-:enabled          匹配可用的元素

-:disabled          匹配不可用的元素

-:checked          匹配选中的checkbox

-:selected          匹配选中的option

4.表单选择器

--表单选择器包括:

--:text

--:password

--:radio

--:checkbox

--:submit

--:reset

--:button

--:file

--:hidden

五、读写节点

1、读写节点

--读写节点的HTML内容

-obj.html()/obj.html(“<span>123</span>”)

--读写节点的文本内容

-obj.text()/obj.text(“123”)

--读写节点的value属性值

-obj.val/obj.val(“abc”)

--读写节点的属性值

-obj.attr(“属性名”)/obj.val(“属性名”,”属性值”)

2、增删节点

--创建DOM节点

-$(“节点内容”)

--插入DOM节点

Parent.append(obj)    做为最后一个子节点添加进来

Parent.prepend(obj)   做为第一个子节点添加进来

Brother.after(obj)        做为下一个兄弟节点加进来

Brother.before(obj)     做为上一个兄弟节点添加进来

   --删除DOM节点

-obj.remove()        删除节点

-obj.remove(selector)       只删除满足selector的节点

-obj.empty()           清空节点

六、样式操作

1.样式操作

--addClass(“”)                       追加样式

--removeClass(“”)               移除指定样式

--removeClass()                   移除所有样式

--toggleClass(“”)                  切换样式

--hasClass(“”)                       判断是否有某个样式

--css(“”)                                  读取css的值

--css(“”,””)                             设置多个样式

七、遍历节点

-children()                      直接子节点

-next()/next(selector) 下一个兄弟节点

-prev()/prev(selector) 上一个兄弟节点

-siblings()/siblings(selector)    所有兄弟

-find(selector)               查找满足选择器的所有后代

-parent()                         父节点

八、事件处理

1.使用jQuery实现事件绑定

1)语法

--$obj.bind(事件类型,事件处理函数)

--如:$obj.bind(‘click’,fn);

--简写形式$obj.click(fn);

--注:$obj.click()则代表触发了click事件

2.获取事件对象event

--只需要为事件处理函数传递任意一个参数

--如:$obj.click(function(e){...})

--e就是事件对象，但已经经过jQuery对底层事件对象的封装

--封装后的事件对象可以方便的兼容各浏览器

3.事件对象的常用属性

--获取事件源e.target,返回值是DOM对象

--获取鼠标点击的坐标

--e.pageX

--e.pageY

九、事件冒泡

--子节点产生的事件会依次向上抛给父节点

1.取消事件冒泡

-e.stopPropagation()可以取消事件冒泡

十、合成事件

jQuery的合成事件种类

--hover(mouseenter,mouseleave)模拟光标悬停

--toggle()在多个事件响应中切换

十一、模拟操作

模拟操作的语法

--$obj.trigger(事件类型)

--如:$obj.trigger(“focus”);

--简写形式$obj.focus();

十二、jQuery动画

1.显示、隐藏的动画效果

--show()/hide()

--作用:通过同事改变元素的宽度和高度来实现显示或者隐藏

用法:$obj.show(执行时间，回调函数)；

执行时间:slow，normal，fast或毫秒数

回调函数:动画执行完毕之后要执行的函数

2.上下滑动式的动画实现

--slideDown()/slideUp()

--作用:通过改变高度来实现显示或者隐藏的效果

--用法同show()/hide()

3.淡入淡出动画效果

--fadeIn()/fadeOut()

--作用:通过改变不透明度opacity来实现显示或者隐藏

用法同show/hide

4.自定义动画效果

--animate(偏移位置,执行时间，回调函数)

--偏移位置:{}描述动画执行之后元素的样式

--执行时间:毫秒数

--回调函数:动画执行结束后要执行的函数