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入门教程(10) 认识其他对象
Jan 31 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 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的in_array低性能问题
2013/09/17 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python模拟登陆实现代码
2017/06/14 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python之多进程与多线程的使用
2021/02/23 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
竞选演讲稿范文
2013/12/28 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书