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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
ionic3 懒加载
Aug 16 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 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的一个简单加密解密代码
2014/01/14 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
js倒计时显示实例
2016/12/11 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python 获取图片分辨率的方法
2019/01/08 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
JAVA和C++区别都有哪些
2015/03/30 面试题
捐献物资倡议书范文
2014/05/19 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python