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 replace 与replaceall实例用法详解
Aug 03 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
PHP7新特性简述
Jun 11 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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中将数组存到文件里的实现代码
2012/01/19 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
让Python代码更快运行的5种方法
2015/06/21 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python爬虫如何解决图片验证码
2021/02/14 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
电子商务应届生求职信
2013/11/16 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
高中语文教学反思
2014/01/16 职场文书
运动会跳远加油稿
2014/02/20 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
孩子满月酒答谢词
2015/09/30 职场文书