jQuery基础之(二)jQuery中的$
在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基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础之二
jQuery基础之二 jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery基础之二(操作标签)
一:样式操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();/ ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- JQuery基础知识==认识JQuery
jQuery API 中文文档:https://www.jquery123.com/ jQuery Mobile 菜鸟教程:http://www.runoob.com/jquerymobile/jqu ...
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- jQuery基础(二)DOM
DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...
- jquery基础 笔记二
动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
随机推荐
- oracle创建数据库和用户
以前开发的时候用得比较多的是mysql和sql server,oracle用的比较少,用起来比较生疏,mysql和sql server用起来比较类似,就oracle的使用方式和他们不同,oracle在 ...
- SSI
一.简介 SSI(Server Side Includes)技术,是为WEB服务器提供的一套命令,在HTML文档中通过注释行调用的命令或指针,就可以将文本.图形或应用程序信息包含到网页中. SSI具备 ...
- DimDate populate data
日期维度 任何一个数据仓库都应该有一个日期维度. 因为很少有不需要通过日期维度看数据的情况存在. 日期维度的好处是,你可以通过他连接各个事实表,然后在报表端传送报表参数的时候, 直接自动过滤日期维度的 ...
- 我的NopCommerce之旅(6): 应用启动
一.基础介绍 Global.asax 文件(也称为 ASP.NET 应用程序文件)是一个可选文件,该文件包含响应 ASP.NET 或 HTTP 模块所引发的应用程序级别和会话级别事件的代码. Appl ...
- [转]ionic Accordion list three levels
简化后的主要代码: $scope.groups = []; for (var i = 0; i < 2; i++) { $scope.groups[i] = { name: i, items: ...
- 快速理解Kafka分布式消息队列框架
作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ ==是什么 == 简单的说,K ...
- 我的opencv之旅:ios人脸识别
学习opencv有一年多了,这本来是我的毕业设计的一部分,但是因为不能突出专业重点,所以换了个课题. opencv在vc.android.ios下都能用,其中vc和android下的教程和主题贴最多, ...
- Codeforces Round #370 (Div. 2)B. Memory and Trident
地址:http://codeforces.com/problemset/problem/712/B 题目: B. Memory and Trident time limit per test 2 se ...
- 给Testerhome测试小道消息做个硬广告
测试小道消息在荔枝FM上的粉丝马上就要超过1k了.还差17个我们就能够开通社区了.欢迎大家都来收听测试小道消息哈--更多精彩内容还希望大家下载荔枝fm.关注FM245329. 如果你还不了解测试小道消 ...
- codeforces 709B B. Checkpoints(水题)
题目链接: B. Checkpoints 题意: 给了n个点,现在给一个起点,问最少访问n-1个点的最小行走距离是多少; 思路: 分情况讨论就好了; AC代码: #include <iostre ...