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 相关文章推荐
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JQuery基础语法小结
Feb 27 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
深入理解node.js之path模块
May 03 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
原生JS实现无缝轮播图片
Jun 24 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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中的数组处理函数实例总结
2016/01/09 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Python中方法链的使用方法
2016/02/23 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python制作填词游戏步骤详解
2019/05/05 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python类反射机制使用实例解析
2019/12/30 Python
新手学python应该下哪个版本
2020/06/11 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
客户经理竞聘演讲稿
2014/05/15 职场文书
施工安全保证书
2015/05/09 职场文书
父亲去世追悼词
2015/06/23 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
学习nginx基础知识
2021/09/04 Servers