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 MD4
Dec 20 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
微信小程序实现评论功能
Nov 28 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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的4种常见运行方式
2015/03/20 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python学生信息管理系统
2018/03/13 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
感恩小明星事迹材料
2014/05/23 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
成本会计岗位职责
2015/02/03 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript