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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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在文件指定行中写入代码的方法
2012/05/23 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP加密技术的简单实现
2016/09/04 PHP
js在IE与firefox的差异集锦
2014/11/11 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python 实现兔子生兔子示例
2019/11/21 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
会计与审计专业自荐信范文
2014/03/15 职场文书
公务员保密承诺书
2014/03/27 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
解除施工合同协议书
2014/10/17 职场文书
素质教育学习心得体会
2016/01/19 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
公司晚会主持词
2019/04/17 职场文书
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL