5.16日音讯,jQuery须掌握的几个要点

　　5.16日音讯,jQuery须掌握的几个要点。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

　　一、jQuery基础

　　1、jQuery是什么?

　　jQuery是一个js框架，其主要思想是，通过

　　选择器查找到对应的节点，然后对这个节点进行

　　封装(封装成一个jQuery对象)。通过调用jQuery

　　对象的属性或者方法来实现对节点的操作。这样做的

　　好处是：第一，将不同的浏览器之间的差异屏蔽起来了。

　　第二，代码更加简洁，维护方便。

　　2、jQuery编程的步骤

　　step1:使用选择器查找节点

　　step2:调用jQuery对象的方法或者属性

　　选择器：jQuery模仿css选择器语法，创建的一套

　　用于查找节点的规则。

　　3、jQuery对象与dom节点

　　1)dom节点如何转换成jQuery对象

　　调用$()函数，比如

　　$(obj);

　　2)jQuery对象如何转换成dom节点

　　方式一:$obj.get(0)

　　方式二:$obj.get()[0]

　　3)jQuery与其它js框架如何共存?

　　使用conflict()函数。

　　二、选择器

　　1、选择器是什么?

　　jQuery模仿css选择器语法，创建的一套

　　用于查找节点的规则。

　　2、基本选择器

　　#id

　　.class

　　element

　　selector1,select2..selectn

　　*

　　3、层次选择器

　　select1select2

　　select1>select2

　　select1+select2

　　select1~select2

　　4、过滤选择器

　　(1)基本过滤选择器

　　:first

　　:last

　　:not(selector)

　　:even

　　:odd

　　:eq(index)

　　:gt(index)

　　:lt(index)

　　(2)内容过滤选择器

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

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

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

　　的元素

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

　　(3)可见性过滤选择器

　　:hidden匹配所有不可见元素，

　　或者type为hidden的元素

　　:visible匹配所有的可见元素

　　(4)属性过滤选择器

　　[attribute]

　　[attribute=value]

　　[attribute!=value]

　　(5)子元素过滤选择器

　　:nth-child(index/even/odd)

　　(6)表单对象属性过滤选择器

　　:enabled

　　:disabled

　　:checked

　　:selected

　　5、表单选择器

　　:input

　　:text

　　:pasword

　　:radio

　　:checkbox

　　:submit

　　:image

　　:reset

　　:button

　　:file

　　:hidden

　　三、dom操作

　　1、dom查找

　　通过选择器找到节点后，可以调用

　　a,html():输出或者修改节点之间的html内容

　　b,text()：输出或者修改节点之间文本

　　c,val()：输出或者修改节点的value属性

　　2、创建节点:

　　$(html)

　　3、添加节点:

　　append():向每个匹配的元素内部追加内容

　　prepend():向每个匹配的元素内部前置内容

　　after():在每个匹配的元素之后插入内容

　　before():在每个匹配的元素之前插入内容

　　4、删除节点

　　remove()

　　remove(selector)

　　empty():清空节点

　　5、复制节点

　　clone()

　　clone(true):使复制的节点也具有行为(将事件

　　处理代码一块复制)

　　6、属性操作

　　读取：attr('');

　　设置：

　　attr('','')或者一次

　　设置多个attr({"":"","":""});

　　删除：removeAttr('')

　　7、样式操作

　　获取和设置:attr("class","")

　　追加:addClass('')

　　移除:removeClass('')

　　或者removeClass('s1s2')

　　或者removeClass()//会删除所有样式

　　切换样式：toggleClass,有该样式，就删除，没有，

　　就添加。

　　是否有某个样式hasClass('')

　　读取css('')

　　设置css('','')或者

　　css({'':'','':''})//设置多个样式

　　1、遍历节点

　　children():只考虑子元素，不考虑其它后代元素。

　　next()/next(selector)

　　prev()/prev(selector)

　　siblings()/siblings(selector)

　　find(selector)/

　　parent()

　　2、事件处理机制

　　1)事件绑订的方式

　　bind(type,fn)

　　2)、绑订方式的简写形式

　　click(function(){

　　});

　　3)、合成事件

　　hover(enter,leave):模拟光标悬停事件

　　toggle(fn1,fn2...)：模拟鼠标连续单击事件

　　4)、事件冒泡

　　a、获得事件对象

　　//event不再是原始的事件对象，而

　　//是封装之后的对象。

　　click(function(event){

　　});

　　b、停止冒泡

　　event.stopPropagation()

　　c、停止默认行为

　　event.preventDefault()

　　5)、事件对象的属性

　　event.type

　　event.target:返回事件源（是dom对象!!!）

　　event.pageX/pageY:点击的坐标

　　6)、模拟操作

　　trigger('click')

　　3、动画

　　1)、show("slow"/"normal"/"fast"/100)hide()

　　另外，还可以添加一个回调函数，比如:

　　show('slow',function(){

　　//这儿的代码会在动画执行完成之后

　　//才执行。

　　});

　　2)、fadeIn()fadeOut():淡入、淡出

　　改变不透明度。

　　fadeIn,fadeOut可以添加

　　"slow"/"normal"/"fast"/100参数，也可以

　　添加一个回调函数。

　　3)、slideUp()slideDown():改变元素的高度

　　用法跟前面一样。

　　4)、自定义动画animate(params,speed,callback):

　　params:是一个形如{"height":"300px","width","200px"}

　　speed:单位是毫秒，表示动画执行的速度。

　　callback:回调函数，动画执行完成之后，执行

　　该函数。

　　4、操作类数组的方法：

　　说明：jquery操作数组的方法，

　　$()操作返回的如果是一个数组，可以使用如下方法来操作

　　each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。

　　eq(index)：返回index+1位置处的jquery对象

　　index(obj)：返回下标，其中obj可以是

　　dom对象或者jquery对象。

　　length：个数

　　get()：返回dom对象组成的数组

　　get(index)：返回index+1个dom对象。