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判断用户浏览器插件安装情况的代码
Jan 01 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
实例讲解React 组件生命周期
Jul 08 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
jquery foreach使用示例
2013/09/12 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
初探nodeJS
2017/01/24 NodeJs
js自定义Tab选项卡效果
2017/06/05 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python验证码识别处理实例
2015/12/28 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
自我评价中英文语句
2013/11/30 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
居安思危观后感
2015/06/11 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript