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 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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
简单的cookie计数器实现源码
2013/06/07 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS 实现百度搜索功能
2018/02/01 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
详解Python发送email的三种方式
2018/10/18 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 深度学习中的4种激活函数
2020/09/18 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
化工机械应届生求职信
2013/11/04 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
施工单位安全责任书
2014/07/24 职场文书
领导干部作风建设总结
2014/10/23 职场文书
销售合作意向书范本
2015/05/08 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python