jQuery技术

Jquery基础教程之神奇的$()

字号+ 作者:小想 来源: 2014-11-16 22:49 我要评论( )

还记得在一年多之前,当我刚接触 jquery 的时候,其实那时候还不知道jquery。因为项目中要用到一些效果,而自己那时候的javascript水平也不咋滴(PS:其实到现在,我的javascript水平也还

 还记得在一年多之前,当我刚接触jquery的时候,其实那时候还不知道jquery。因为项目中要用到一些效果,而自己那时候的javascript水平也不咋滴(PS:其实到现在,我的javascript水平也还是不咋滴!哈哈~),所以就在网上找一些符合项目需求的特效代码,当找到了适合的代码之后,很是开心,但是很郁闷的是当我阅读源码的时候,看到了一个另我很疑惑的东西,那就是javascript代码中居然也会出现$符号,哈哈~~我是学php的,那时候真的是太小白了,只知道在php中$是代表变量的意思。对于这个javascript中出现的$符号,真的让我头都大了~~不过还好,不久之后,我就接触到jquery了,阅读了一些关于juqery的介绍以及观看了jquery的强大的官方API之后,才算对$符号有了个基本的认识了,之后也就没觉得这个符号出现在javascript代码中有多么神秘了。呵呵~相信现在仍然会有好多还没接触过jquery的同学,也难免会出现和我当时一样的窘境,于是乎第一篇jquery的基础教程,我就拿这个$符号来讲解吧~(PS:我也是在网上参考别人的一些教程,然后总结出来,其实现在在网上搜索一下,也能找到一大堆关于jquery的基础教程的)


$()这个玩意其实是一个jquery封装的功能非常强大的函数,当然,强大的东东,在使用起来也必然会是有点复杂的咯。下面我们来看它的一些强大的用法:

$(expr) 

这个函数可以通过css选择器、Xpath、html代码来匹配目标元素,返回的是一个jQuery对象,jQuery的所有操作都是以此为基石的。
下面来看代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="test">  
  2.     <div style="display:none" id="php">  
  3.             我是强大的PHP  
  4.         </div>  
  5.     <div class="test" id="jquery">  
  6.             <span>我是强大的jQuery</span>  
  7.             <span>我是强大的jQuery插件</span>  
  8.         </div>  
  9.     </div>  
 

jQuery代码:

JavaScript Code复制内容到剪贴板
  1. $("div");//获取的是html代码中的三个div元素  
  2. $("div.test");//获取的是html代码中带有class属性为test的两个div  
  3. $("span:last").html();//获取的是第二个span标签中的html代码:"我是强大的jQuery插件"  
  4. $("#php");//获取的是id为php的div元素  
  5. $("div:hidden");//获取的是不可见的div元素,html代码中的第二个div,因为他的display属性是none不显示的  
  看不懂上面的选择器意思?没关系,下一章我会完整地说说jquery中的选择器,哈哈~~《锋利的jquery》这本书中有很全的解释。就抄它的了。

$(fn) 

这个方式是$(document).ready(fn);的一个速记方式,当文档全部载入时执行函数。注意:jQuery是允许多个$(fn)存在的。fn是个函数,也就是当文档全部载入时要执行的函数。

JavaScript Code复制内容到剪贴板
  1. $(function(){  
  2. alert("文档已经载入完毕了!");  
  3. });  

$(obj) 
如果obj为DOM对象的话,那就是将这个DOM对象转换成为jQuery对象,如果obj本来就是jQuery对象的话,那么仍然还是个jQuery对象。

恩~今天就说这么多了~~由于本人水平有限,如果哪位仁兄对上面所说的有异议的,或者认为我说的是不对的,还请不要吝啬你手中的砖头,请尽管拍吧~~或者对于这个神奇的$(),还有要补充的东西的话,恳请您将你所知道的留下来,哈哈~~

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery教程:14个实用的jQuery技巧

    jQuery教程:14个实用的jQuery技巧

    2016-02-06 10:00

  • jQuery中$()函数的7种用法汇总

    jQuery中$()函数的7种用法汇总

    2015-11-20 11:13

  • JQuery知识:20个jQuery教程+11个jQuery插件

    JQuery知识:20个jQuery教程+11个jQuery插件

    2015-11-20 09:37

  • jQuery API 手册 chm 新版

    jQuery API 手册 chm 新版

    2015-11-18 15:44

网友点评
>