jQuery 学习系列笔记(一)

简介:

jQuery的强大自不必我多言,我想是时候的来认真的学习一下它了,不说废话了,一起来领会jQuery的伟大吧!

导航:

基本原理
jQuery包装器
实用工具函数
文档就绪处理程序
创建DOM元素
扩展jQuery
jQuery和其他库

一、基本原理

1、jQuery核心部分就是如何从HTML页面里获取元素并对其进行操作。即选择器(selector)。

2、选择器是通过元素的特性或元素在HTML文档中的位置去描述元素组。

二、jQuery包装器

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

1
2
3
$(selector)
或者
jQuery(selector)

由此可以看出,$()函数是jQuery()函数的别名。“$”刚接触可能有点奇怪,但是你很快就会喜欢上它的简洁。

举个例子:为了获取嵌套在<p>元素内的一组链接(<a>元素)。jQuery语句如下:

1
$( "p a" );

$()函数返回特别的JavaScript对象,它包含着与选择器相匹配的DOM元素的数组。

下面说一个比较好玩的东西,就是jQuery链。

举个例子:让带有CSS类star的所有<div>元素呈现淡出效果,同时再给它们添加一个新的CSS类big。jQuery语句如下:

1
$( "div.star" ).fadeOut().addClass( "big" );

说明一下,fadeOut()是jQuery自带的淡出效果的方法,addClass()是jQuery的添加类方法。

我想说的这条语句的重点是:选择一次,可以进行多次不同的操作。这就是jQuery链,它可以无限延续。之所以可以这样做是因为,当$()完成一个操作(比如淡出操作)时,它们返回相同的一组元素,提供给下一个操作。

jQuery选择器还有更加高级的用法,下面几个例子大家体会一下:

(1)选择所有偶数的<p>元素

1
$( "p:even" );    even指偶数的意思

(2)选择每个表格的第一行

1
$( "tr:nth-child(1)" );

(3)选择作为<body>直接子节点的<div>

1
$( "body > div" );

(4)选择指向PDF文件的链接

1
$( "a[href$=pdf]" );

(5)选择作为<body>直接子节点、包含链接(<a>元素)的<div>

1
$( "body > div:has(a)" );

三、jQuery实用工具函数

$()函数不光是能作为选择器使用,它还有另外的一个职责就是作为几个通用的实用工具的命名空间前缀。通常我们可能很少会用到,因为通过选择器的使用,就觉得jQuery已经很强大了,不过作为jQuery的一部分,有必要了解一下。

什么是实用工具?举个例子大家就都会明白。删除字符串前后空格的实用工具函数,写法如下:

1
$.trim(someString);

大家如果觉得$.不得劲,那就把它当成一个类的命名空间就好了,就好像string.一样的意思,或许用jQuery代替会觉得更加熟悉一些。

1
jQuery.trim(someString);

虽然被称作实用工具函数,事实上就把它当成 函数$()的一个方法就好。

四、文档就绪处理程序

通常页面在浏览器窗口显示前要经历两个步骤:

(1)构建DOM树

(2)加载图像和其他外部资源

我们都知道如果使用JavaScript对页面元素进行操作的时候,必须要在浏览器把HTML转换成DOM树之后。传统上,window实例的onload处理程序被用于上述上的,语法通常如下:

1
2
3
window.onload =  function (){
     $( "div.star" ).fadeOut().addClass( "big" );
}

这样就能在文档完整地加载之后,执行淡出效果和添加CSS类big。

但是需要注意一点的是这并不是最好的时机,因为onload的执行不仅是在步骤(1)之后,它也在步骤(2)之后,这就会导致一个问题,如果图像或外部资源比较大的时候,我们不仅要等待加载的这段时间,甚至我们会看到页面到我们脚本执行的效果的延时。如果是一个没什么耐心的用户,可能还没等资源加载完成,就已经把页面关掉了,那也就看不到你的“效果”了。

所以jQuery提供了我们一个简单的方法,它可以在一个完美的时机去展示我们的效果。下面我们来看看它是什么

1
2
3
$(document).ready( function () {
     $( "div.star" ).fadeOut().addClass( "big" );
});

把“效果”写在这个函数里,只要等到步骤(1)结束之后,我们的代码就会被激活。上述代码也可以简写成:

1
2
3
$( function () {
     $( "div.star" ).fadeOut().addClass( "big" );
});

还有一个是$()比window.onload好的地方,$()可以同一个HTML文档中多次使用,而浏览器则会按照函数在页面中定义的先后顺序一一执行。而window.onload机制只能使用一次,如果我们引入任何第三方代码里采用了onload机制,就会很麻烦。

五、创建DOM元素

通过给$()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素。

举个例子:新建段落元素。写法如下:

1
$( "<p>Hello World</p>" );

但是只创建了一个元素,但并不知道它的层次结构(即它的位置),看起来其作用不大,所以通常会在创建DOM元素之后直接对其安排位置。

举个例子:在id="paragraph"的<p>元素后新建一个段落元素。写法如下:

1
$( "<p>Hello World</p>" ).insertAfter( "#paragraph" );

六、扩展jQuery

关于扩展jQuery让我有点热血沸腾,我们都知道没有哪个库能设法将每个人需要的东西都预先准备好。所以jQuery核心库里只为我们准备了大多数页面作者需要的功能(当然,这也是相当多的功能了)。

下面举个例子展示一下扩展jQuery有多爽,我们做一个“用于禁用一组表单元素的函数”。

1
$( "form#myform input.special" ).disable();

因为jQuery并没有提供disable()这样的方法,所以我们要扩展,基本惯用语法如下:

1
2
3
4
5
6
7
$.fn.disable =  function (){
     return  this .each( function () {
         if ( typeof  this .disabled !=  "undefined" ){
             this .disabled =  true ;
         }
     });
}

突然看到这么一堆乱糟糟的大家别怕,下面一一进行解释,等大家继续学习,这些就很easy了,反正我是这样想的,我也是在这正边看边学,感觉看明白了这块的知识点才敢表上来的。

首先,$.fn.disable表示我们用名为disable的函数来扩展$包装器。大家有没有发现$.fn属于一个实用工具函数,第2行的this表示将被操作的包装DOM元素集合(其实就是所有满足“form#myform input.special”这一条件的DOM元素集合)。

然后,each()方法就是遍历this集合里的每个元素,第3行的this表示的是当前遍历到的元素,它不是集合,是指特定的这一DOM元素。如果这块大家有点没理解也不要慌,多写写慢慢就懂了。

最后,if条件句里表示当前遍历到的这个元素有没有disabled特性,如果有,将其值置为true。

这样我们就把一个扩展jQuery写好了。同时它也支持jQuery命令链的。

1
$( "form#myform input.special" ).disable().addClass( "moreSpecial" );

这里面其实大家仔细琢磨会发现一些有趣的东西,现在可能是一脑子浆糊,不过继续学习就Ok啦!

七、jQuery和其他库

jQuery可以说是一个和平使者,即便其本身很强大,但也从来未想过独霸天下,创造者也是本着满足用户需求,但是由于其别名$,有时还是与其他库造成小小的冲突,比如Prototype库(我个人是不知道其是什么东东)。不过jQuery还是把这个问题给解决了,那就是使用另一个实用工具函数noConflict()来消除冲突。

1
jQuery.noConflict();

它会把$还原到非jQuery库所定义的含义。










本文转自 我不会抽烟 51CTO博客,原文链接:http://blog.51cto.com/zhouhongyu1989/1399791,如需转载请自行联系原作者

目录
相关文章
|
10月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
4月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
43 0
|
14天前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
4月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
37 0
|
5月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
5月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(2)
jQuery操作元素或节点的方法 添加:append(),appendTo(),prepend(),after(),before() 删除:remove(),empty() 复制:clone(true)
51 5
|
5月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
73 0
|
5月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
64 0
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
37 0
|
5月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
75 0