jQuery学习笔记之jQuery中的$


Posted in Javascript onJanuary 19, 2015

在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能。包括选择页面中一个或者一类元素、作为功能函数的前缀、windows.onload的完善,创建DOM节点等。本文介绍jQuery的用法。作为基础

1.选择器

在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器)。而jQuery中的“$”作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式。而且为用户处理了浏览器兼容问题。

例如在在css<h2>下的<a>元素,css:

h2 a{
/* 添加css属性 */}
在jQuery中,通过以下代码选择h2下的a元素,作为一个对象数组,供javascript使用。

$("H2 a")
例子:

<body>    

        <script type="text/javascript">

            window.onload = function() {

                var oElements = $("h2 a"); //选择匹配元素

                for (var i = 0; i < oElements.length; i++)

                    oElements[i].innerHTML = i.toString();

            }

        </script>

        <h2><a href="#">正文</a>内容</h2>

        <h2>正文<a href="#">内容</a></h2>

        <h2>正文<a href="#">内容</a></h2>

        <h2>正文<a href="#">内容</a></h2>

        <h2>正文<a href="#">内容</a></h2>

    </body>

如上,文档中有5个<H2>标记,分别包含了<a>元素,使用$选择器,如下,可以看到jQuery轻松的实现了元素的选择,如果使用DOM,类似这样的节点将要使用大量的javascript代码。

jQuery中选择器的通用语法如下

$(selector)
或者

jQuery(selector)
其中,selector符合css标准,甚至css3的标准

例如:

$("#showDiv")
id选择器,这相当于javascript中,document.getElementById("shouDiv"),可以看到jQuery的变色方法简洁很多。

$(".newClass")
类别选择器,选择css类别为"newClass"元素的节点,在javascript要实现相同的选择,需要用for循环遍历整个DOM

$("p:odd")
选择所有奇数行的p元素,几乎所有的标记都可以使用 ":odd"和":even"选择奇偶的选择。

$("td:nth-child(1)")
选择所有表格行的第一个单元格,就是第一列。这在修改表格的某一列是非常有用的,不再需要一行行的遍历表格。

$("li>a")
子选择器,返回<li>下标记的<a>元素,不包括孙元素标记

$("a[herf$=pdf]")
属性选择器,选择所有超链接,并且这些链接是以pdf结尾的。有了属性选择器,可以很好的选择页面中各种特性的元素

总结:

$就是jQuery的别称
而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options))
这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素, 函数作用之一就是GetElementByID的代替,但()内不仅可以是ID,还可以是各类选择器

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 #Javascript
jQuery学习笔记之基础中的基础
Jan 19 #Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
jQuery中ready事件用法实例
Jan 19 #Javascript
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
Javascript函数的参数
2015/07/16 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
详细分析Python collections工具库
2020/07/16 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
进修护士自我鉴定
2013/10/14 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
环境卫生标语
2014/06/09 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
干部个人考察材料
2014/12/24 职场文书
毕业生个人总结
2015/02/28 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Python上下文管理器Content Manager
2021/06/26 Python