jQuery入门学习总结

最新推荐文章于 2022-11-20 23:03:10 发布

有点发红

最新推荐文章于 2022-11-20 23:03:10 发布

阅读量5.1k

点赞数 5

分类专栏： JavaScript 文章标签： jquery div google css function javascript

本文链接：https://blog.csdn.net/sadfishsc/article/details/7008372

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. 常用的HTML元素选取

$(“xxx”) 所有<xxx>标签的元素

$(“p#demo”) 所有id=”demo”的<p>元素

$(“p.style”) 所有class=”style”的<p>元素

$(“#demo”) 所有id=”demo”的元素

$(“.style”) 所有class=”style”的元素

$(“[href]”) 所有带有href属性的元素

$(“[href=’#’]”) 所有带有href属性且属性值为”#”的元素

$(“[href!=’#’]”) 所有带有href属性且属性值不为”#”的元素

$(“[href$=’.jpg’]”) 所有带有href属性且属性值以”.jpg”结尾的元素

更多元素选取方法请查阅jQuery选择器参考手册。

2. 获取元素集合中的具体项

如上，通过jQuery选取得到的HTML元素都是一组元素的集合，要获取到其中具体的某一项，可以使用eq(index)方法来获得集合中索引号为index的jQuery对象，如：

$(“div”).eq(1).hide(); // 隐藏当前页面中第2个div元素

若不获取具体的元素项就调用相关的方法，则会对该集合中的所有元素都执行该方法，如：

$(“#demo”).hide(); // 隐藏当前页面中所有id=”demo”的元素

3. jQuery对象与DOM对象

需要注意的是eq方法获得的是jQuery对象，不是DOM对象，它只能执行jQuery的方法而不能调用DOM的方法。

普通的DOM对象可以通过$()转化为jQuery对象，最常见的如：$(document)。转化后的jQuery对象为只有一个元素的集合。

jQuery对象要转化成DOM对象则需要用相关的方法从集合中取出特定的DOM对象，常见的方法有get(index)和[index]两种，如：

//获取当前页面中的第1个div元素的DOM对象
$(“div”).get(0);
$(“div”)[0];
$(“div”).eq(0)[0];

特别需要注意的是，jQuery对象只能使用jQuery方法，DOM对象只能使用DOM方法。

4. 引用jquery.js文件

jQuery只是一个JavaScript库文件，所以当需要使用jQuery之前首先需要引用这个库文件。通常可以到jQuery的官网下载一份放到本地。另外，Google和微软也提供了在线的库文件供开发者使用。

Google的引用地址：http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js

微软的引用地址：http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js

当jQuery更新的时候，上述两个在线引用也会做出相应的更新。所以，可以通过修改上述两个地址中的版本号来引用其它版本的jQuery文件，如：

http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js是Google提供的1.4.0版本的JQuery文件；而前述分别是两公司提供的1.7版本的jQuery文件。

5. jQuery执行入口

为了防止在jQuery文件加载完成之前就开始执行jQuery代码，所有的jQuery代码都必须写到

$(document).ready(function() {
// here
});

或

$(function() {
...
});

的函数体中，否则操作可能无效。

6. jQuery方法

只有jQuery对象才能调用jQuery方法。有关jQuery的具体方法请参见下面的链接：

以上参考资料均出自w3school，版权与本人无关。

7. 命名冲突

为了避免其它地方的命名冲突，如其它一些JS库中也定义了$，jQuery提供了.noConflict()方法来将jQuery中$的职权让渡给另一个标识符，如：

jq.noConflict(); // 将$的职权让渡给jq
jq(“div”).hide(); // jq开始代替$

之后$将变成普通的符号而不再具备之前它在jQuery中的功能。

8. 个人感觉

在大体看过jQuery的语法和一些方法之后，我就觉得其实jQuery就是对JS和CSS操作DOM的封装和简化。把过去JS和CSS需要许多语句才能实现的一些效果简化，典型的如hide()方法。但根本上，jQuery仍然是面向过程的，甚至很难在面向对象的场合下使用它。原因就是常常需要jQuery对象和DOM对象之间的相互转化。而事实上，在利用Canvas，甚至进一步的WebGL上来说，个人感觉不太用得上jQuery的效果，而它的事件处理又显得很死板，实际上跟直接写DOM的事件处理没有多大的区别。不过，它的Ajax处理倒是显示非常的方便，只是常常会出现一些问题。

总的来说，jQuery正如它的初衷一样，简化了许多JS和CSS的效果操作，使前台开发者能够简单甚至无脑地做出许多很炫的效果。但是，如果要搞个大工作，比如做个游戏，只用jQuery就有点捉襟见拙了。不过，这并不影响jQuery作为一个网页效果工具的良好表现。大多数前台页面实际上也不需要大动干戈地做特效，简单实用的效果或许对开发者和用户都是最好的。

在后续的博文中笔者将奉上学习中做的若干实例。