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 数组运用实现代码
Apr 13 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python logging通过json文件配置的步骤
2020/04/27 Python
python实现文法左递归的消除方法
2020/05/22 Python
大学生学习党课思想汇报
2014/01/03 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
小学班主任研修日志
2015/11/13 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android