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

转载 2012年03月31日 13:33:01

还记得在一年多之前,当我刚接触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的所有操作都是以此为基石的。
下面来看代码:
HTML代码:

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代码:

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是个函数,也就是当文档全部载入时要执行的函数。

1 $(function(){
2 alert("文档已经载入完毕了!");
3 });

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

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

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

$()这个玩意其实是一个jquery封装的功能非常强大的函数,当然,强大的东东,在使用起来也必然会是有点复杂的咯。下面我们来看它的一些强大的用法: $(expr)  这个函数可以通过css选择...
  • zhoulianglg
  • zhoulianglg
  • 2011年10月10日 17:51
  • 343

学习笔记:《jQuery基础教程》第四版第五章课后练习——操作DOM

修改添加back top链接的代码,以便这些链接只从第四段后面才开始出现。 在单击back to top链接时,为每个链接后面添加一个新段落,其中包含You were here字样。确保链接仍然有效。...
  • la413972057
  • la413972057
  • 2015年11月26日 20:16
  • 1180

学习笔记:《jQuery基础教程》第四版第六章课后练习——通过Ajax发送数据

页面加载后,把exercises-content.html的主体(body)内容提取到页面的内容区域。 不要一次就显示整个文档,请为左侧的字母列表创建“提示条”,当用户鼠标放到字母上时,从exerci...
  • la413972057
  • la413972057
  • 2015年12月23日 20:56
  • 828

学习笔记:《jQuery基础教程》第四版第二章课后练习

学习笔记——《jQuery基础教程》第四版第二章课后练习最近抽时间系统的学习下jQuery相关知识,看看《jQuery基础教程》。顺便把课后练习的代码整理发上来看看。 给位于嵌套列表第二个层次的所有<...
  • la413972057
  • la413972057
  • 2015年10月08日 19:48
  • 1357

体味职人精神---观《寿司之神》有感

视频链接:https://v.qq.com/x/cover/3gzvl62fvg0i1xy/h001464or9o.html 我们缺乏的职人精神 今天,我看了一部非常有意义的纪录片,由...
  • coco_astrids
  • coco_astrids
  • 2017年01月10日 00:25
  • 475

学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画

1、修改样式表,一开始先隐藏页面内容,当页面加载后,慢慢地淡入内容。$(document).ready(function() { $('body').css('display', 'none'...
  • la413972057
  • la413972057
  • 2015年11月19日 15:39
  • 796

第七天 JQuery基础教程

JQuery是一个Javascript的框架,它封装了JavaScript常用的功能代码,能让你的代码更加简洁高效。 点击这里下载JQuery3.2.1和参考手册...
  • pythonerxxs
  • pythonerxxs
  • 2017年10月25日 09:41
  • 76

jQuery基础教程学习 (一)

2016.12.4 - 2016.12.5
  • nzyalj
  • nzyalj
  • 2016年12月06日 11:44
  • 158

JavaScript奇淫技巧(一)

if-else简化写法 代码中若出现多层if-else嵌套,代码就会显得臃肿不堪,这时可采用替代方案来浓缩代码。...
  • u010425776
  • u010425776
  • 2016年10月29日 20:21
  • 1368

【BZOJ 2219】【超详细题解】数论之神

数论神题(原根+指标)~ 耗时两小时写成的超详细题解~!
  • Regina8023
  • Regina8023
  • 2015年04月04日 00:13
  • 3475
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery基础教程之神奇的$()
举报原因:
原因补充:

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