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继承 Base类的源码解析
Dec 30 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
初步了解javascript面向对象
Nov 09 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
layui中的switch开关实现方法
Sep 03 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代码
2013/12/03 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
js密码强度校验
2015/11/10 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
讲解python参数和作用域的使用
2013/11/01 Python
python中__call__内置函数用法实例
2015/06/04 Python
python实现日常记账本小程序
2018/03/10 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
Python shutil模块用法实例分析
2019/10/02 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
virtualenv介绍及简明教程
2020/06/23 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
python推导式的使用方法实例
2021/02/28 Python
Python的collections模块真的很好用
2021/03/01 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
经典的班主任推荐信
2013/10/28 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
吴仁宝观后感
2015/06/09 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis