jQuery - 4.简单选择器
(5) :eq(索引序号)等于、:gt(索引序号)大于、:lt(索引序号)小于
(6) $(":header")选取所有的h1……h6元素(*)
简单选择器
(1) :first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");
(2) :last 选取最后一个元素。$("div:last")选取最后一个<div>
(3) :not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")
选取样式名不是myClass的<input>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//:first 选取第一个元素。
$("input:first").css("background-color", "blue");
//:last 选取最后一个元素。
$("input:last").css("background-color", "gray");
//:not(选择器) 选取不满足“选择器”条件的元素
$("input:not(.myClass)").val("不是myClass");
})
</script>
</head>
<body>
<input id="d1" type="text" />first<br />
<input type="text" /><br />
<input class="myClass" type="text" /><br />
<input class="myClass" type="text" /><br />
<input type="text" /><br />
<input type="button" value="aaa" /><br />
<input type="button" value="aaa" /><br />
<input type="text" /><br />
<input type="text" />last<br />
</body>
</html>
(4) :even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>
(5) :eq(索引序号)等于、:gt(索引序号)大于、:lt(索引序号)小于 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
(6) $(":header")选取所有的h1……h6元素(*)
(7) $("div:animated")选取正在执行动画的<div>元素。 (*)
案例
第一行是表头,所以显示大字体(fontSize=30),最后一行是汇总,所以显示红色字体。正文的前三行是前三名,所以显示大的字体(28)表格的奇数行是黄色背景。
用Dom实现;用JQuery实现。对比差异!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
//表头
$("#salary tr:eq(0)").css({ "font-size": "30px", "text-align": "center" });
//最后1行
$("#salary tr:last").css("color", "red");
//排除表头的前3行
$("#salary tr:not(:first):lt(3)").css("font-size", "22px");
//排除表头和汇总
var str = "#salary tr:not(:first):not(:last)";
//各行变色
$(str + ":even").css("background-color", "yellow");
var bgColor;
//光棒效果
$(str).mouseover(function () {
bgColor = $(this).css("background-color");
$(this).css("background-color", "blue");
}).mouseout(function () {
$(this).css("background-color", bgColor);
})
//鼠标变小手
$(str).css("cursor", "pointer");
})
</script>
</head>
<body>
<table id="salary" border="1px" width="300">
<tbody>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>工资</td>
</tr>
<tr>
<td>江户川</td>
<td>42</td>
<td>30000</td>
</tr>
<tr>
<td>刘备</td>
<td>38</td>
<td>25000</td>
</tr>
<tr>
<td>关羽</td>
<td>28</td>
<td>15000</td>
</tr>
<tr>
<td>张飞</td>
<td>27</td>
<td>8000</td>
</tr>
<tr>
<td>诸葛亮</td>
<td>38</td>
<td>22000</td>
</tr>
<tr>
<td>汇总</td>
<td colspan="2">220000</td>
</tr>
</tbody>
</table>
</body>
</html>
练习
案例:表格隔行变色
案例:前三名粗体显示
相对定位
不仅可以使用选择器进行进行绝对定位,还可以进行相对定位,只要在$()指定第二个参数,第二个参数为相对的元素. $("ul", $(this)).css("background", "red");
案例:修改点击行的所有td的背景色
(看上面工资表格那块)
jQuery - 4.简单选择器的更多相关文章
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- JQuery_简单选择器
jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性. jQuery选择器实现了 CSS ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- JQuery的常用选择器 转
JQuery的常用选择器 刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选 ...
- jQuery使用(一):jQuery对象与选择器
一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...
- JQuery的常用选择器
刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选择器: 标签名选择器: $ ...
- 24款最好的jQuery日期时间选择器插件
如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...
随机推荐
- Longest Common Substring
Given two strings, find the longest common substring. Return the length of it. Example Given A = &qu ...
- 跟着百度学PHP[4]OOP面对对象编程-4-对象成员的访问 ->
使用一个减号一个尖括号->来达到访问对象成员. $object->方法 来看案例. <?php class Person{ private $name; "; var $s ...
- c++ 字符串流 sstream(常用于格式转换) 【转载】
使用stringstream对象简化类型转换C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更高级的一些功能,即单纯性.类型安全和可扩展性.在本文中, ...
- linux kernel 字符设备详解
有关Linux kernel 字符设备分析: 参考:http://blog.jobbole.com/86531/ 一.linux kernel 将设备分为3大类,字符设备,块设备,网络设备. 字符设备 ...
- Python正则表达式汇总
判断是否是整数或小数,在网上看到一个方法: type(eval(")) == int type(eval("123.23")) == float 后来又看到<Pyt ...
- How can I determine the URL that a local Git repository was originally cloned from?
git remote show origin from: http://stackoverflow.com/questions/4089430/how-can-i-determine-the-url- ...
- (转) C#如何使用异步编程
怎么使用异步,就是用委托进行处理,如果委托对象在调用列表中只有一个方法,它就可以异步执行这个方法.委托类有两个方法,叫做BeginInvoke和EndInvoke,它们是用来异步执行使用. 异步有三种 ...
- sql语句操作
1.1 SQL语句 1.1.1 什么是SQL SQL:Structured Query Language, 结构化查询语言. 特点: * 非过程性语言: * 过程性语言特点:一个语句需要依赖上面的几条 ...
- ios UIButton 选中后背景图片变化发灰问题
UIButton的类型如果选择了System类型,那么设置背景图后,点击的效果是图片发灰,而不是默认的那种图片变淡黑色效果,需要用customer类型就好了.
- java web 学习 --第七天(Java三级考试)
第六天的学习内容如下:http://www.cnblogs.com/tobecrazy/p/3462244.html application application对象的方法与应用: ① setA ...