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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
详解使用mpvue开发github小程序总结
Jul 25 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 文件状态缓存带来的问题
2008/12/14 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP面向对象法则
2012/02/23 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python如何制作英文字典
2019/06/25 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
咨询公司各岗位职责
2013/12/02 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
装修致歉信
2014/01/15 职场文书
大学生交通专业求职信
2014/09/01 职场文书
民主评议党员总结
2014/10/20 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS