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控件
May 07 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
js实现简单数字变动效果
Nov 06 Javascript
js读取本地文件的实例
Dec 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
jQuery 源码分析笔记
2011/05/25 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
原生js实现轮播图
2017/02/27 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Vue表单验证插件的制作过程
2017/04/01 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
工作自荐信
2013/12/11 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
python小型的音频操作库mp3Play
2022/04/24 Python