sinobuy
  

你好! 访客. 请先 登陆注册一个帐号.
七月 20, 2019, 08:03:07 pm
论文答辩趣闻 新年祝福短信 淘淘成长日记 可爱发行全攻略 鬼故事一箩筐 杨柳青石家大院 淘淘成长日记
* 首页 说明 搜索 日历 登陆 注册
公告和新闻:现在关注原生态购物网微博 ,转发就送3元  点击进入
原生态论坛  |  设计专版  |  网页/程序设计 (版主: tianya)  |  主题: jQuery入门学习总结 0 会员 以及 1 访客 正在阅读本篇主题. « 上一篇主题 下一篇主题 »
页: [1] 向下 打印
作者 主题: jQuery入门学习总结  (阅读 1513 次)
水影凝月
Administrator(管理员)
级别:东方不败
*****

受欢迎度: 190
在线 在线

帖子: 22844


451314485
个人网站 电子邮件
jQuery入门学习总结
« 于: 六月 10, 2014, 10:21:06 am »

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对象,如:

[javascript] view plaincopy

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

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

[javascript] view plaincopy

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

3.      jQuery对象与DOM对象

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

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

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

[javascript] view plaincopy

    //获取当前页面中的第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代码都必须写到

[javascript] view plaincopy

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



[javascript] view plaincopy

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

的函数体中,否则操作可能无效。
6.      jQuery方法

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

事件处理

动画效果

页面元素操作

操作页面元素的属性

CSS操作

Ajax

遍历集合

数据流和函数流的操作

DOM元素操作

以上参考资料均出自w3school,版权与本人无关。
7.      命名冲突

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

[javascript] view plaincopy

    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作为一个网页效果工具的良好表现。大多数前台页面实际上也不需要大动干戈地做特效,简单实用的效果或许对开发者和用户都是最好的。

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


原生态特色礼品:沉香 紫檀 黄花梨
页: [1] 向上 打印 
原生态论坛  |  设计专版  |  网页/程序设计 (版主: tianya)  |  主题: jQuery入门学习总结 « 上一篇主题 下一篇主题 »
跳到:  

友情链接: 原生态购物网 原生态官方博客  佛珠网  搜狐社区 淑女情缘论坛 沉香
  原生态论坛© 2005~2017, www.sinobuy.cn 版权所有
Powered by SMF 1.1 RC1 Lewis Media.
Powered by MySQL  Powered by PHP  Valid XHTML 1.0!  Valid CSS!