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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
js中top的作用深入剖析
Mar 04 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue集成chart.js的实现方法
Aug 20 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实现的顺序线性表示例
2019/05/04 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
cookie的secure属性详解
2015/04/08 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
小程序点击图片实现自动播放视频
2020/05/29 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vue实现扫码功能
2020/01/17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
wxPython 入门教程
2008/10/07 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
什么是python的必选参数
2020/06/21 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
外国语学院毕业生自荐信
2013/10/28 职场文书
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
大学生操行评语大全
2014/12/31 职场文书
美术教师个人工作总结
2015/02/06 职场文书