jQuery学习笔记(2)

原创 2013年12月01日 23:58:12

收集一组元素,可以使用如下简单的语法:

$(selector)或者jQuery(selector)

也许刚开始你会觉得$()符号有点奇怪,但大部分jQuery用户很快就喜欢上它的简洁。

例如,为了获取嵌套在<p>元素内的一组连接,我们使用如下语句:

$("p a")

$()函数(jQuery()函数的别名)返回特别的JavaScript对象,它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法,能够作用于该组元素。

用编程的话来说,这种构造称为包装器(wrapper),因为它用扩展功能来对匹配的元素进行包装。我们使用术语jQuery包装器或者包装集(wrapped set),来指能够在其上用jQuery定义的方法去操作的、匹配元素集合。

假定我们想让带有CSS类notLongForThisWorld的所有<div>元素呈现淡出效果。jQuery语句如下:

$("div.notLongForThisWorld").fadeOut();

经常作为jQuery命令引用的许多这类方法的显著特征是,当完成了一个操作(比如淡出操作)时,它们返回相同的一组元素,提供给下一个操作。如,假定除了让元素呈现淡出效果之外,还想添加新的CSS类removed到每个元素。编写如下代码:

$("div.notLongForThisWorld").fadeOut().addClass("removed");

这些jQuery链可以无限延续。任由jQuery链无限制地延续的话,你发现包含长达几十个命令的例子并不罕见。因为imeige书都作用在与最初的选择器相匹配的全部元素之上,所以没有必要循环遍历元素数组。

即使选中的对象组被表现为非常复杂的JavaScript对象,如有必要也可以假定它是典型的元素数组。因此以下两个语句产生相同的结果:

$("#someElement").html("I have added some text to an element");

$("#someElement")[0].innerHTML="I have added some text to an element";

因为使用了ID选择器,所以只有一个元素与选择器相匹配。第一个示例使用jQuery的html()方法,将DOM元素的额内容用某些HTML标记去替换。第二个示例使用jQuery获取元素数组,用数组下标0去选择第一个元素,然后使用通常的JavaScript方式来替换该元素的内容。

如果想用能匹配多个元素的选择器来获取同样的结果,那么以下两个片段产生一致的结果:

$("div.fileMeIn").html("I have added")

待续...

相关文章推荐

JQUERY学习笔记2

  • 2013年09月13日 09:21
  • 4KB
  • 下载

Yii2 framework学习笔记(八) -- 整合blueimp的jquery-file-upload插件

jquery-file-upload(http://blueimp.github.io/jQuery-File-Upload/)是一个优秀的文件ajax上传插件,支持多选,预览,并发上传等。 jq...
  • iyak85
  • iyak85
  • 2016年02月26日 17:47
  • 1586

jQuery学习笔记(2)

中午好! jQuery animate()方法允许自定义动画.有4个参数 参数: prop 定义形成动画的CSS样式,几乎可以用所有的CSS样式, speed  动画的速度 easing 不...

学习笔记:jQuery deferred对象的整理2

一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它...

Struts2学习笔记(二)使用jQuery—Ajax技术的简单Demo

关于struts2的搭建,在Struts2学习笔记(一)中已经

jQuery学习笔记(2)——包装器

jQuery选择器 使用CSS选择器来选取HTML元素 $("p") 选取 元素。 $("p.intro") 选取所有 class="intro" 的 元素。 $("p#demo") 选取所有 i...

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作、事件绑定(2) 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git 4.DOM操作(节点增删改查)...

JQuery学习笔记(2)

1.JQuery常用方法 1.1内部插入   body>       ul>            li>第一项li>            li>第二项li>            li...

jquery-学习笔记2

1.如何使用jquery,基本流程 1、先引入jquery文件 2、加载页面事件 3、通过jquery选择要操作的元素 4、添加事件 5、使用jquery的方法来操作元素 2.JQ...
  • lyc9102
  • lyc9102
  • 2014年03月22日 15:18
  • 576
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery学习笔记(2)
举报原因:
原因补充:

(最多只允许输入30个字)