jquery_base课件

1、1课程名称：JQuery 2知识点概述2.1、上次课程2.2、作业讲解2.3、本次预备讲解的知识点3、具体内容Jquery是一个非常优秀的JavaScript库，其特定是在使用JQuery库之后，开发者操作的对象不再是原始的DOM元素，而是JQuery对象，使开发者无需理会不同浏览器处理DOM对象时的差异，而是直接以JQuery对象所支持的属性和方法操作DOM对象。3.1、JQuery简介3.1.2、理解JQuery的设计示例代码：理解：JQuery动态更新HTML页面只需如下两步：1、 获取JQuery对象，jquery对象通常是对DOM对象的包装2、 调用JQuery对象的方法来改变自身。

2、当Jquery对象被改变时，jquery包装的DOM对象随之改变，HTML内容也就随之改变。3.1.2、下载和安装JQuery下载：登陆JQuery的官方站点：下载：安装：只需要在HTML页面中导入JQuery的javascript文件即可3.2、获取JQuery对象JQuery库中获取对象只要有如两种方式：1、使用$()函数或用jQuery对象提供的，利用子父关系来返回的jQuery对象 2、jQuery对象的调用方法改变自身后将再次返回该jQuery对象3.2.1、JQuery核心函数jQuery()函数是获取jQuery对象的根本途径,主要有如下用法：(详见API)NO函数用法1jQue

3、ry(expression,context)获取expression对应的DOM对象包装成的jQuery对象2jQuery(html, ownerDocument)根据html参数创建一个/多个DOM包装成的jQuery对象3jQuery(elements)将一个/多个DOM对象包装成jQuery对象4jQuery(callback)是$(document).read()的缩写，其中callback指定一个函数，在页面加载完成时，ccallback函数被激发注意：expression支持CSS1-3选择器$(selector)示例代码：3.2.2、以CSS选择器方式访问DOM元素每个CSS选择

4、器可以对应一个或多个HTML元素，如果以CSS选择器作为参数，$(selector) 将可以获取该选择器对应一个或多个HTML元素包装成的JQuery对象。$()可支持如下几种参数形式:NO参数说明1#id返回指定id对应的XHTML元素包装成的jquery对象2tagName返回所有tagName标签对应的所有HTML元素包装成的JQuery对象数组3tagNameattribute返回所有tagName标签生成的且包含attribute属性的所有HTML元素包装成的JQuery对象数组4tagNameattribute=value返回由tagName标签生成的且attribute属性等于v

5、alue的所有HTML元素包装成的JQuery对象5tagNameattribute!=value返回由tagName标签生成的且attribute属性不等于value的所有HTML元素包装成的JQuery对象6tagNameattribute=value返回由tagName标签生成的且attribute属性以value开头的所有HTML元素包装成的JQuery对象7tagNameattribute$=value返回由tagName标签生成的且attribute属性以value结尾的所有HTML元素包装成的JQuery对象8tagNameattribute*=value返回由tagName标签

6、生成的且attribute属性包含value的所有HTML元素包装成的JQuery对象9tagNameattributeFileter1attributeFilter2返回由tagName标签生成的且具有attributeFilter1、attributeFileter2等任意一个属性特征的所有HTML元素包装成的JQuery对象10.ClassName返回class属性为ClassName的所有HTML元素包装成的JQuery对象11*返回所有HTML元素包装成的JQuery对象12Seletor1、seletor2、同时指定多个选择器，返回匹配任何一个选择器的所有HTML元素包装成的JQu

7、ery对象13outerSelector innerSelector返回outerSeletor选择器之内的所有innerSeletor（不管处于多少层之内）对应的HTML元素包装成的JQuery对象。14parentSelector>childSelector返回直接位于parentSeletor选择器内第一层childSeletor对应的HTML元素包装成的JQuery对象。15preSelector+nextSelector返回紧跟在preSelector之后的第一个nextSelector对应的HTML元素包装成的JQuery对象16PreSelectorsiblingsSele

8、ctor返回位于prevSelector之后的所有siblingsSeleter对应的HTML元素包装成的JQuery对象示例代码：3.2.3、选择器的附加限定词限定词通常会和选择器结合使用，选择器往往匹配一个以上的HTML元素，而限定词则用于增加额外的限制。常见的限定词如下：NO限定词说明1:first返回匹配指定选择器第一个HTML元素包装成的JQuery对象2:last返回匹配指定选择器最后一个HTML元素包装成的JQuery对象3:not(selector)返回匹配指定选择器但去除selector选择器匹配的所有HTML元素包装成的JQuery对象4:event返回匹配指定选择器的索引

9、为奇数的HTML元素包装成的JQuery对象，元素索引是从0开始5:odd返回匹配指定选择器索引为偶数的HTML元素包装成的JQuery对象6:eq(index)返回匹配指定选择器的索引为index的HTML元素包装成的JQuery对象7:gt(index)返回匹配指定选择器的索引大于index的所有HTML元素包装成的JQuery对象8:lt(index)返回匹配指定选择器的索引小于index的所有HTML元素包装成的JQuery对象9:header返回配置指定选择器，且必须是h1,h2,h3之类的标题元素10:animated返回匹配指定选择器，且当前没有执行动画效果的HTML元素包装成J

10、Query对象11:contains(text)返回匹配指定选择器，且包含text文本的HTML元素包装成的JQuery对象12:empty返回匹配指定选择器，且不包含任何内容的HTML元素包装成的JQuery 对象13:has(selector)返回匹配指定选择器，且包含selector对象HTML元素的所有HTML元素包装成的Jquery对象14:parent返回匹配指定选择器，且包含子元素或者文本的所有HTML元素包装成的JQuery对象15:hidden返回匹配指定选择器，且当前不可见的HTML元素包装成的JQuery对象16:visible返回配置指定选择器，其当前可见的HTML元素

11、包装成的JQuery对象17:first-child返回匹配指定选择器的第一个HTML元素包装成的JQuery对象18:last-child返回匹配指定选择器的最后一个HTML元素包装成的JQuery对象19:only-child返回配置指定选择器且是父元素中唯一的HTML元素的元素（如该父元素下有多个子元素则不会被匹配）包装成的JQuery对象20:nth-child(index)返回匹配指定选择器的第index个HTML元素包装成的JQuery对象，n从121:nth-child(enen)返回匹配指定选择器且索引为奇数的HTML元素包装成的JQuery对象22:nth-child(odd

12、)返回匹配指定选择器且索引为偶数的HTML元素包装成的JQuery对象23:nth-child(xn+m)返回配置指定选择器且索引为xn+m的HTML元素包装成的JQuery对象示例代码：3.2.3、表单相关选择器常用于匹配表单控件的选择器如下:NO选择器说明1:input返回所有input、testarea、select和button元素包装成的JQuery对象2:text返回所有type=“text”的input元素包装成的JQuery对象3:password返回所有type=“password”的input元素包装成的JQuery对象4:radio返回所有type=“radio”的inp

13、ut元素包装成的JQuery对象5:checkbox返回所有type=“checkbox”的input元素包装成的JQuery对象6:submit返回所有type=“submit”的input元素包装成的JQuery对象7:image返回所有type=“image”的input元素包装成的JQuery对象8:reset返回所有type=“reset”的input元素包装成的JQuery对象9:button返回所有按钮元素包括type=“reset”的input元素包装成的JQuery对象10:file返回所有文件域包装成的JQuery对象11:hidden返回所有不可见元素以及指定了type=

14、“hidden”的input元素包装成的JQuery对象，包括<meta>等元素12:enabled返回所有可用的表单控件(未指定disabled=disabled)包装成的JQuery对象13:checked返回所有指定了checked=checked的表单控件包装成的JQuery对象14:selected返回所有指定了selected=selected的表单控件包装的JQuery对象示例代码：3.3、JQuery的数组操作3.3.1、操作数组的方法很多时候，JQuery的$()函数都返回的一个类似数组的JQuery对象，JQuery提供如下常用方法来操作数组的JQuery对象。

15、NO方法说明1each(callback)迭代函数，它使用callblack函数迭代处理JQuery里包含的每个元素2Length返回JQuery里包含的DOM元素的个数3eq(position)返回JQuery里包含的第position+ 1个DOM元素包装成的JQuery对象4get返回JQuery里包含的所有DOM元素组成的数组5get(index)返回JQuery里包含的第index+1个Dom元素6Index(subject)返回JQuery里subject索引，subject即可以使DOM对象也可是JQuery对象示例代码：注意：DOM对象转换为JQuery对象，使用$()/jqu

16、ery()JQuery对象转化为DOM对象，使用get()/get(index)3.3.2、过滤的相关方法对类似数组的JQuery对象进行过滤的方法，这些方法将会过滤掉JQuery对象里包含的部分DOM对象，使JQuery对象中包含的DOM对象个数减少。NO方法说明1filter(expro)从JQuery对象里删除所有不匹配expr的DOM对象，expr可是合法的选择器，限定词2filter(fn)使用fu函数迭代处理Jquery里包含的每个元素3is(expr)使用expr来检查该JQuery对象包含的元素集合。如任意一个符合expr就返回true，否则返回fasle4map(callba

17、ck)用于将JQuery对象里包含的一系列DOM对象转化成其他元素5not(expr)从JQuery对象里删除所有匹配expr的DOM对象6slice(star,end)返回JQuery里索引从start开始，到end结束的DOM元素组成的JQuery对象示例代码:3.3.3、仿DOM导航的相关方法在JQuery中可以使用如下方法，找到当前JQuery对象的兄弟节点，父节点，子节点对应的JQuery对象。NO方法说明1add(expr)添加新的DOM元素2children(expr)查找当前JQuery对象之内的全部后代元素3contents()查找当前JQuery对象之内全部内容4find(

18、expr)查找处于当前JQuery对象之内能匹配expr选择器的所有后代元素5next(expr)查找紧跟当前JQuery对象之后的元素，且该元素匹配expr选择器6nextAll(expr)查找紧跟当前JQuery对象之后的所有兄弟元素，且该元素匹配expr选择器7pre(expr)查找紧跟当前JQuery对象之前的元素，且该元素匹配expr选择器8preAll(expr)查找紧跟当前JQuery对象之前的所有兄弟元素，且该元素匹配expr选择器9siblings(expr)查找紧跟当前JQuery对象前后的所有兄弟元素，且该元素匹配expr选择器10parent(expr)查找当前JQue

19、ry对象的父元素，且该元素匹配expr选择器11Parents(expr)查找当前JQuery对象的祖先元素，且该元素匹配expr选择器示例代码：3.3.4、连接的方法过滤，导航等方法都会对原有的JQuery对象进行“破坏” - 通常都会减去原JQuery对象中包含的部分DOM对象，以下方法则可以不同方式找到前一次“破坏”之前的JQuery对象。NO方法说明1addSelf()将查找之前的的结果和查找之后的结果混合在一起2end()将JQuery对象恢复到上一次执行过滤，查找方法之前的状态示例代码：3.4、JQuery支持的方法以但我们获取了JQuery对象，就可以直接调用JQuery方法来操

20、作DOM了，JQuery提供了大量的方法来简化DOM的操作。3.4.1、JQuery命名空间的方法可发者可以直接使用jquery命名空间中的属性和方法如下：NO方法说明1JQuery.brower返回当前浏览器的相关信息2JQuery.browser.version返回用户浏览器的版本号3JQuery.boxModel如果页面使用W3C CSS Box Model则返回true4JQuery.isFunction(obj)测试obj是否为一个函数，如果是则返回true操作字符串，数组，对象相关的方法NO方法说明1JQuery.trim(str)截取字符串前后的空格2JQuery.each(ob

21、ject,callback)遍历JavaScript对象和数组3JQuery.extend(target,object1,objectN)将object1，objectN的属性值合并到target对象里，相同覆盖，不同则添加4JQuery.grep(array,callback,invert)用于对array数组进行筛选5JQuery.makeArray(obj)将数组对象转(HTMLCollection)化为真正的数组对象6JQuery.map(array,callback)将array数组转化为另一个数组7JQuery.inArray(value,array)返回value在array中出

22、现的位置8JQuery.merge(first,second)将两个数组的元素合并到新数组中，并不会删除重复值9JQuery.unique(array)删除array数组中重复值。该array通常是DOM对象示例代码：3.4.2、 数据存储的方法JQuery允许把JQuery对象当做一个临时的“数据存储中心”，开发者能以key-vaue对的形式将数据存储到JQuery对象里，也可从JQuery对象里取出之前存储的数据，也可删除之前存储的数据。方法如下：NO方法名说明1data(name)获取JQuery对象里存储的Key为name的数据2data(name,value)向JQuery对象里存储

23、name-value的数据对3Remove删除JQuery对象里存储的key为name的数据示例代码：3.4.3、操作属性的相关方法详见APINO方法名说明1att(name)访问Jquery对象里第一个匹配元素的name属性值2att(properties)用于为Jquery对象里德所有DOM对象同时设置多个属性值3att(key, vaue)用于为Jquery对象里德所有DOM对象同时设置单个属性值4removeAttr(name)删除jquery对象里德所有DOM对象里的name属性示例代码：3.4.4、操作CSS属性的相关方法Jquery提供了操作DOM元素的CSS样式的方法，包括直接

24、访问，修改DOM元素的class属性，访问、修改DOM元素的内联CSS属性值的方法，还包括修改DOM元素的大小位置等。(详见API)NO方法说明1.addClass()2.CSS()3.hasClass()示例代码：3.4.5、操作元素内容的相关方法Jquery提供如下方法操作或设置DOM元素的内容，保存设置DOM元素的innerHTML属性，文本内容和value属性（详见API）NO方法属性1html()2text()3val()4示例代码：3.4.6、操作DOM节点的相关方法DOM操作中最常见的就是对节点的操作，包括创建，复制，插入，删除节点等，jQuery也提供了相关支持.(详见API)

25、1、在指定节点内添加新节点NO方法1append(content)2appendTo(selector)3prepend(content)4prependTo(selector)示例代码：2、在指定节点内添加新节点NO方法1after(content)2before(content)3insertAfter(selector)4insertBefore(selector)示例代码：3、前后都添加开始/结束节点（包裹）NO方法1wrap(node)2wrapAll(node)说明：将当前JQuery对象里包含的DOM节点包裹起来，即在DOM节点之前插入开始标签，在之后插入结束标签。示例代码：4、

26、替换NO方法1replaceWith(content)2replaceAll(selector)5、删除NO方法1empty()2remove(expr)6、复制NO方法1clone(true)示例代码：3.5、JQuery事件相关方法Jquery简化了javascript的事件模型，提供了一致的事件模型，从而允许开发者以更简洁的方式进行事件编程。Jquery为事件提供了如下方法：（详见API）NO方法说明1ready(fn)2bind(type,data, fn)3one(type,data,fn)4tigger(type,data)5triggerHandler(type,data)6unbind(type,fn)7hover(over,out)8Toggle(fn1,fn2)9示例代码：Jquery还提供了具体的事件属性相对应的方法实例代码：3.6、JQuery动画相关方法Jquery提供了一些效果相关的方法，通过使用这些方法，可以非常方便的完成用户的交互操作。NO方法说明1show()2show(speed,callback)