使用jQuery框架扩展JavaScript的功能

jquery

使用javascript框架扩展 框架扩展JavaScript的功能 使用 框架扩展 的功能

比较著名的有Prototype,YUI, 比较著名的有Prototype,YUI, jQuery,mootools,Bindows以及 jQuery,mootools,Bindows以及 国内的JSVM框架等 通过将这些JS 框架等, 国内的JSVM框架等,通过将这些JS 框架应用到项目中能够使程序员从繁 杂的Web开发应用中解脱出来 开发应用中解脱出来, 杂的Web开发应用中解脱出来,将 关注点转向应用项目的实现上, 关注点转向应用项目的实现上,而非 底层技术的开发上, 底层技术的开发上,从而提高项目的 开发速度. 开发速度.

jquery

1 jQuery技术框架概述 技术框架概述由John Resig于2006年初创建.目前最新版本为1.3.2,官方地址为: Resig于2006年初创建 目前最新版本为1.3.2,官方地址为: 年初创建. http://www.77cn.com.cn/,中文地址为http://www.77cn.com.cn/. http://www.77cn.com.cn/,中文地址为http://www.77cn.com.cn/. jQuery主要具有如下特点 jQuery主要具有如下特点: 主要具有如下特点: 1.语法简练,语义易懂,学习快速,帮助文档丰富. 1.语法简练 语义易懂,学习快速,帮助文档丰富. 语法简练, 2.jQuery是一个轻量级的脚本,其代码非常小巧. 2.jQuery是一个轻量级的脚本,其代码非常小巧. 是一个轻量级的脚本 3.jQuery支持CSS1~CSS3定义的属性和选择器. 3.jQuery支持 支持CSS1~CSS3定义的属性和选择器 定义的属性和选择器. 4.jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+,FF 1.5+,Safari 2.0+, 4.jQuery是跨浏览器的 它支持的浏览器包括IE 6.0+, 1.5+, 是跨浏览器的, 2.0+, Opera 9.0+. 9.0+. 5.可以很容易的为jQuery扩展其他功能. 5.可以很容易的为 可以很容易的为jQuery扩展其他功能 扩展其他功能. 6.能将JavaScript脚本与HTML源代码完全分离,便于后期编辑和维护. 6.能将 能将JavaScript脚本与 脚本与HTML源代码完全分离,便于后期编辑和维护. 源代码完全分离 7.插件丰富,除了jQuery自身带有的一些特效外,可以通过插件实现更多功能, 7.插件丰富 除了jQuery自身带有的一些特效外 可以通过插件实现更多功能, 插件丰富, 自身带有的一些特效外, 如表单验证,Tab导航 拖放效果,表格排序,DataGrid,树形菜单, 导航, 如表单验证,Tab导航,拖放效果,表格排序,DataGrid,树形菜单,图像特 效以及Ajax上传等 上传等. 效以及Ajax上传等. 导入jQuery框架文件方法如下 框架文件方法如下: 导入jQuery框架文件方法如下: <script type="text/javascript" src="js/jquery.js"></script> 引入jQuery框架文件之后便可在页面脚本中调用 框架文件之后便可在页面脚本中调用jQuery对象 方法或属性, 对象, 引入jQuery框架文件之后便可在页面脚本中调用jQuery对象,方法或属性, 并以jQuery特色语法规范来编写脚本 特色语法规范来编写脚本. 并以jQuery特色语法规范

来编写脚本.

jquery

1 jQuery技术框架概述 技术框架概述练习 引入jquery库 引入jquery库 传统的加载

jquery

1 jQuery技术框架概述 技术框架概述导入jQuery框架文件方法如下: 导入jQuery框架文件方法如下: 框架文件方法如下 <script type="text/javascript" src="js/jquery.js"></script> 引入jQuery框架文件之后便可在页面脚本中 引入jQuery框架文件之后便可在页面脚本中 调用jQuery对象 方法或属性,并以jQuery 对象, 调用jQuery对象,方法或属性,并以jQuery 特色语法规范来编写脚本. 特色语法规范来编写脚本.

jquery

19.2 jQuery构造器 构造器构造器是jQuery框架的内核(core),它犹如JavaScript语言的构造函数 (Function).构造器由jQuery()函数(可简写为$())负责实现.该函数是整 个jQuery框架的核心,jQuery中的一切操作都构建于这个函数之上.jQuery()函 数可以接收四种类型的参数: 1. jQuery(expression,[context]):根据CSS选择器字符串在页面中匹配一组元 素,或者利用context参数指定匹配的范围. 2. jQuery(html):根据HTML标记字符串,动态创建由jQuery对象包装的DOM 元素. 3. jQuery(elements):将一个或多个DOM对象转化为jQuery对象. 4. jQuery(callback):$(document).ready()的简写.允许绑定一个在DOM文档 加载完毕之后执行的函数. 19-1.html,19-2.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.2 jQuery构造器 构造器jQuery对象与 对象与DOM对象是两个不同的概念 对象是两个不同的概念.它们不能够相互调用,jQuery对 对象与 对象是两个不同的概念 象只能够使用jQuery定义的方法和属性,而DOM也只能够使用DOM组件和 JavaScript定义的方法和属性.因此,在调用对象的方法和属性时,你应该清 楚它属于什么对象. 当然,你可以通过一定的方法转换这两种对象.对于普通的DOM对象来说,如 果要转换为jQuery对象,则使用jQuery()函数即可.例如,在下面代码中 document.getElementsByTagName("span")[0]将获取页面中第1个span对象, 此时所定义的span变量就是一个DOM对象,你可以调用DOM定义的节点方法 对其进行操作. 而$(span)则表示一个jQuery对象,其中包含的span变量就表示DOM对象(即 document.getElementsByTagName("span")[0]),这时我们就可以为变量span 调用jQuery对象的方法来定义span元素的显示样式(即红色字体). 19-3.html, 19-4.html, 19-5.html, 19-6.html, 19-7.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.1 访问 访问jQuery对象 对象上节已经介绍过,jQuery对象是一个集合.要访问这个集合,除了使用索引值 以外,我们可以使用jQuery定义的几个方法和属性. each(callback) each(callback)方法实际是JavaScript集合遍历的一种功能包装,它以jQuery对 象内的集合元素为

遍历对象,并循环执行指定的函数.在循环体内的函数中, this关键字都会自动指向当前元素,且会自动向函数体内传递元素的索引值 (从0开始). 19-8.html, 19-9.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.1 访问 访问jQuery对象 对象size()和length size()方法能够返回jQuery对象中元素的个数,而length属性与size()方法功能 相同. 19-10.html get()和get(index) get()方法能够把jQuery对象转换为DOM中的元素集合. 19-11.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.1 访问 访问jQuery对象 对象index(subject) 获取jQuery对象中指定元素的索引值.如果找到了匹配的元素,从0开始返回; 如果没有找到匹配的元素,返回-1. 19-12.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.2 访问 访问DOM对象的属性 对象的属性使用jQuery函数能够很轻松的操控页面内元素,同时也很方便控制元素的属性. 这主要依赖下面几个方法: attr(name):根据属性名(name参数),获取jQuery对象中第一个元素的对应 属性值. 19-13.html attr(key,value):为jQuery对象定义属性并赋值. 19-14.html attr(key,fn): 我们还可以为传递的属性值设置为一个函数,通过函数计算所得的值来为属性 赋值.

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.2 访问 访问DOM对象的属性 对象的属性attr(properties):为jQuery对象同时定义多个属性.多个属性以名/值对的形式 组成对象进行参数传递. 19-16.html removeAttr(name):该方法能够移出jQuery对象内指定属性. 19-17.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.3 访问 访问DOM样式类 样式类类样式实际上是一种特殊的属性(class)来进行设置.不过jQuery为此定义了 3个方法专门用来控制样式类.其中主要包括增加类,删除类和开关类,具体 说明如下. 如果要为元素增加样式类,可以使用addClass(class)方法. 19-18.html 当然我们也可以使用attr()方法定义类样式,此时是把它看作一个普通的属性进 attr() 行增加,代码如下: $("p").attr("class","red"); 如果要删除样式类,则可以使用removeClass(class)方法,具体用法就不再举 例,同样也可以使用removeAttr(name)方法来删除样式类. 另外,jQuery还自定义了一个toggleClass(class)方法.它如同一个开关,如果 元素已经定义了指定样式类,则会删除该样式类,否则增加该样式类.巧用这 个方法,你可以很轻松的设计鼠标移过或单击时动

态改变元素样式的效果. 19-19.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.4 访问 访问DOM元素包含信息 元素包含信息访问元素包含的信息可以使用text()方法获取. 19-20.html 反过来,我们也可以为text()传递文本字符串,则将自动为元素添加指定文本字 符串,同时会自动删除该元素包含的已有文本. 19-21.html 请注意,text()和text(val)方法能够读写jQuery对象所有匹配元素的内容.结果 是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML 文档都有效. 如果你希望获取段落中包含的所有内容(包括标签结构),则可以使用html() 方法. 19-22.html 同理,如果希望在段落中插入图像,而不是"<img src='images/1.jpg' width='100' />"字符串,则可以使用如下方法,这样所插入的字符串就不被编 码,而直接插入到文档结构中. 19-23.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.4 访问 访问DOM元素包含信息 元素包含信息请注意,html()和html(val)方法只作用于jQuery对象中第一个元素,也就是说只 能够读写第一个元素内的HTML源代码,且不能用于XML文档,仅适用于 XHTML文档. text()和html()方法能够读写元素包含的信息和HTML源代码,但是如何读写表 单域中的值却存在一定的问题. 19-24.html jQuery定义了val()方法.该方法专门用来读写表单值而定义的. 19-25.html 对于多选列表框,则可以获取多个值. 19-26.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.3 jQuery基本用法 基本用法19.3.4 访问 访问DOM元素包含信息 元素包含信息如果在val()附带参数,则可以为每一个匹配的元素设置值.在jQuery 1.2,中也 可以为select元素赋值.例如,在下面示例中,脚本将自动为文本框赋值为 "文本框的值". 19-27.html 当然读者也可以为单选按钮,复选框和列表框设置选定值.方法是在val()中以 数组形式传递多项参数值. 19-28.html 对于下拉菜单,也可以不用数组来传递值,但对于单选按钮和复选框必须使用 数组来传递参数值. 19-29.html

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.4 jQuery选择器 选择器在学习CSS时,你曾经接触过各种类型的样式选择器.例如,使用id选择器选 定页面中特定元素并为其定义样式,使用类选择器为页面相同效果的对象定义 公共样式,使用标签选择器可以为某一类型的元素定义样式.在JavaScript中 虽然没有选择器这个概念,但是可以使用getElementByIId()和 getElememtsByTagName()方法选择特定对象或一组对象,以便进行控制. jQuery提供了强大,易用的选择工

具,用来选取网页对象或元素,这些选择工 具主要包括两种方式: 第一,模拟CSS和Xpath选择器,并混合它们的用法.这种方法可以把选择器 字符串传递给jQuery构造器,从而达到选择复杂元素的目的. 第二,使用jQuery对象定义的函数进行筛选.这两种方式可以混合使用.

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.4 jQuery选择器 选择器19.4.1 常用选择器jQiery选择器严格遵循CSS1~CSS3选择器规范和用法.所以精通CSS语法将更 有利于学习jQuery. 19-30.html, 19-31.htmljQuery常用选择器 常用选择器 #id element .class * selector1,selector2,selectorN ancestor descendant parent > child prev + next prev ~ siblings [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [selector1][selector2][selecto rN] 说明 根据ID值匹配特定元素,与CSS中的ID选择器对应 根据给定的元素名匹配所有元素,与CSS中的标签选择器对应 根据给定的类匹配元素,与CSS中的类选择器对应 匹配所有元素,与CSS中通配符类似,当更灵活,可以匹配局部所有元 素 将每一个选择器匹配元素合并后一起返回,与CSS中的选择器分组对应 在指定祖先元素下匹配所有的后代元素,与CSS中的包含选择器对应 在给定的父元素下匹配所有的子元素,与CSS中的子选择器对应 匹配所有紧接在prev元素后的next元素,与CSS中的相邻选择器对应 匹配prev元素之后的所有siblings元素,与CSS没有对应选择器 匹配包含给定属性的元素,与CSS中的属性选择器对应 匹配给定属性等于特定值的元素,与CSS中的属性选择器对应 匹配给定的属性不包含某个特定值的元素,与CSS中的属性选择器对应 匹配给定的属性是以某些值开始的元素,与CSS中的属性选择器对应 匹配给定的属性是以某些值结尾的元素,与CSS中的属性选择器对应 匹配给定的属性是以包含某些值的元素,与CSS中的属性选择器对应 复合属性选择器,需要同时满足多个条件时使用,与CSS中的属性选择 器对应

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.4 jQuery选择器 选择器19.4.2 伪选择器( 19-32.html) 伪选择器( )jQuery伪选择器 伪选择器 :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :first-child :last-child :only-child :nth-child(index/even/odd/equation) :contains(text) :empty :has(selector) :parent :hidden :visible 匹配找到的第一个元素 匹配找到的最后一个元素 去除所有与给定选择器匹配的元素 匹配所有索引值为偶数的元素,从0开始计数 匹配所有索引值为奇数的元素,从0开始计数 匹配一个给定索引值的元素 匹配所有大于给定索引值的元素 匹配所有小于给定索引值的元素

匹配如h1,h2,h3之类的标题元素 匹配所有没有在执行动画效果中的元素 匹配第一个子元素 匹配最后一个子元素 如果某个元素是父元素中唯一的子元素,那将会被匹配 匹配其父元素下的第N个子或奇偶元素 匹配包含给定文本的元素 匹配所有不包含子元素或者文本的空元素 匹配含有选择器所匹配的元素的元素 匹配含有子元素或者文本的元素 匹配所有不可见元素,input元素的type属性为"hidden"时也可匹配 匹配所有的可见元素 说明

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

jquery

19.4 jQuery选择器 选择器19.4.2 伪选择器(19-33.html ,19-34.html ,19-35.html) 伪选择器( )<ul id="list"> <li>列表项1</li> <li>列表项2</li> <li class="l3">列表项3</li> <li></li> </ul> 如果选择第一个列表项元素,则可以使用:$("li:first");,或者$("li:first-child");,或者$("ul :first-child").但是:first-child能够匹配第一个子元素,将为每个父元素匹配一个子元素. 而:first只匹配一个元素. 如果选择最后个列表项元素,则可以使用:$("li:last");,或者$("li:last-child");,或者$("ul :last-child"). 如果选择列表项中索引值为偶数的元素,则可以使用:$("li:even");. 如果选择列表项中索引值为奇数的元素,则可以使用:$("li:odd");. 如果选择列表结构中第3个列表项目,则可以使用:$("li:eq(2)");. 如果选择列表结构中第2个以及后面所有项目,则可以使用:$("li:gt(0)");. 如果选择列表结构中第3个以及前面所有项目,则可以使用:$("li:lt(3)");. 如果选择所有列表项,但是不包含class="l3"的元素,则可以使用:$("li:not(.l3)");. 如果选择列表项中包含"列表项1"文本内容的元素,则可以使用:$("li:contains('列表项 1')");.

《网页制作与网站开发从入门到精通》配套视频

样吧视频教室(http://www.77cn.com.cn)

本文来源：https://www.bwwdw.com/article/grdi.html