jQuery最基础最全面的选择器大览
一、基本选择器
1.标签选择器 （element）:根据给定的标签名匹配元素
eg:$("h2")选取所有h2元素 --- 返回元素集合
2.类选择器 （.class）:根据给定的class匹配元素
eg:$(".title")选取所有class为title的元素 --- 返回元素集合
3.ID选择器 （#id） :根据给定的id匹配元素
eg:$("#title")选取id为title的元素 --- 返回单个元素
4.并集选择器 （select1,select2,...,selectorN）:将每一个选择器匹配的元素合并后一起返回
eg:$("div,p,.title")选取所有div、p和拥有class为title的元素 ---返回元素集合
5.交集选择器 （element.class或element#id）:匹配指定class或id的某元素或元素集合(若在同一个页面中指定id的元素返回值,则一定是单个元素;若指 定class的元素,则可以是单个元素,也可以是元素集合)
eg:$("h2.title")选取所有拥有class为title的h2元素 ---返回单个元素或元素集合
6.全局选择器 （*） :匹配所有元素
eg:$("*")选取所有的元素 ---返回集合元素
二、层次选择器
1.后代选择器 （ancestor descendant）选取ancestor元素里所有descendant元素
2.子选择器 （parent>child） 选取parent元素下的child（子）元素
3.相邻元素选择器 （prev+next） 选取紧邻prev元素之后的next元素
4.同辈元素选择器 （prev~sibings） 选取prev元素之后的所有sibings（同辈）元素
*案例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上机练习1</title>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("p").click(function () {
//后代
$(".txt_box .current").css("background", "#6FF");
//子集
$("p>span").css("background", "#F9F");
//相邻
$("h1+p").css("background", "#F06");
//同辈
$("strong~span").css("color", "#00C");
});
});
</script>
</head>
<body>
<h1>英雄联盟</h1>
<p>《英雄联盟》,简称LOL</p>
<p>由<strong>Riot Game</strong>开发,为3D竞技场战游戏,其<span>主创团队由实力强劲的
<strong>魔兽争霸</strong>
系列游戏多人即时对战自定义地图开发团队
</span>
<a href="#">更多详情</a>
</p>
<h2>目录</h2>
<ul class="txt_box">
<li class="current">开发团队</li>
<li>游戏周边</li>
<li>游戏介绍</li>
<li>游戏需求</li>
<li>游戏背景</li>
</ul>
</body>
</html>
三、属性选择器
1.[attribute] :选取包含给定属性的元素
//改变含有title属性的h2元素的背景颜色
eg:$("h2[title]").css("background","red");
2.[attribute=value]:选取等于给定属性是某个特定值得元素
//改变class属性的值为odds的元素的背景颜色
eg:$("class=pdds").css("backround","red");
3.[attribute!=value] :选取不等于给定属性是某个特定值的元素
//改变id属性的值不为odds的元素的背景颜色
eg:$("#id!=pdds").css("backround","red");
4.[attribute^=value] :选取给定属性是以某特定值开始的元素
//改变title属性的值以h开头的元素的背景颜色
eg:$("title^=h").css("background","red");
5.[attribute$=value]:选取给定属性是以某些特定值结尾的元素
//改变title属性的值中以jp结尾的元素的背景颜色
eg:$("title$=jp").css("backround","red");
6.[attribute*=value] :选取给定属性是包含某些值的元素
//改变title属性的值中含有s的元素的背景颜色
eg:$("title*=s").css("backround","red");
7.[selector][selector2][selectorN] :选取满足多个条件的复合属性的元素
//改变包含class属性,且title属性的值中含有y的<li>元素的背景颜色
eg:$("li[class][title*=y]").css("background","red");
四、基本过滤选择器
1.:first :选取第一个元素 --- 返回单个元素
2.:last : 选取第一个元素 --- 返回单个元素
3.:not(selector):选取去除所有与给定选择器匹配的元素 --- 返回集合元素
4.:even :选取索引是偶数的所有元素（索引index均从0开始） --- 返回集合元素
5.:odd :选取索引是奇数的所有元素 --- 返回集合元素
6.:eq : 选取索引等于index的元素--- 返回单个元素
7.:gt : 选取索引大于index的元素 --- 返回集合元素
8.:lt : 选取索引小于index的元素 --- 返集合单元素
9. :header : 选取所有标题的元素,如h1~h6
10. :focus : 选取当前获取焦点的元素
//$(":focus").css("background", "red");
五、可见性过滤选择器
1.:visible :选取所有可见的元素 --- 返回集合元素
2.:hidden :选取所有隐藏的元素 --- 返回集合元素
3.其中,显示方法为--show()、隐藏方法为hide()。
* 案例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上机练习3</title>
<style type="text/css">
h1 {
color: green;
}
ul {
margin-left: -40px;
font-size:30px;
color:gray;
}
li {
list-style:none;
}
span {
font-size: 22px;
color: red;
}
</style>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" >
$(function () {
$("li:even").css("background", "#CCC");
$("li:eq(2)").css("background", "#FF99CC");
$("li:gt(5)").hide();
$("#hid").click(function () {
$("li:hidden").show();
});
$("#xid").mouseover(function () {
$("li:visible").show();
});
$("#xid").mouseover(function () {
$("li:hidden").show();
});
$("#xid").mouseout(function () {
$("li:gt(5)").hide();
});
});
</script>
</head>
<body>
<h1>淘宝,发现更多生活,<strong>快乐</strong>就在你身边</h1>
<ul>
<li>近期热门........<span><a href="#" id="xid">（更多）</a></span></li>
<li>言语之庭</li>
<li>斯托克</li>
<li>宿醉</li>
<li>巨人捕手杰克</li>
<li>副作用</li>
<li>血肉之躯</li>
<li>七号房的礼物</li>
<li>惊声尖笑</li>
</ul>
<a href="#" id="hid">更多排名</a>>
</body>
</html>
jQuery最基础最全面的选择器大览的更多相关文章
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
[DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用 jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- jquery总结01-基本概念和选择器
dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom var div = doc ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解
JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...
- 新知识：JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
- jQuery之基础核心（demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- jQuery -- 光阴似箭（一）：初见 jQuery -- 基本用法，语法，选择器
jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...
随机推荐
- from表单如果未指定action，submit提交时候会执行当前url
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- C#水晶报表，窗体不显示，闪退
一.问题说明 由于VS2008以后水晶报表不在集成,要用的话需要单独下载. 这里注意如果是用在C#窗体程序里的话一定要下载exe文件,安装msi文件的话VS工具栏里找不到水晶报表控件的.如果你的是64 ...
- 我的基于asp.net mvc5 +mysql+dapper+easyui 的Web开发框架（1）数据库访问（0）
一.数据库访问 概述 1. 数据库使用mysql,orm采用dapper框架.dapper框架应用简单,只是需要自己手写sql语句,但是对于像我这样写了多年sql语句的人来说,这应该不算问题,个人还是 ...
- 给hadoop新手的一封信：Hadoop入门自学及对就业的帮助
学习指南,刚接触这个确实有点懵逼,感觉还有很多东西要学要看,自己要逐渐构造成一个框架的体系. 附上一个学习博客地址: http://www.cnblogs.com/mephisto/p/4835386 ...
- 使用Lucene索引和检索POI数据
1.简介 关于空间数据搜索,以前写过<使用Solr进行空间搜索>这篇文章,是基于Solr的GIS数据的索引和检索. Solr和ElasticSearch这两者都是基于Lucene实现的,两 ...
- 4 Best Time to Buy and Sell Stock III_Leetcode
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 【积累篇：他山之石，把玉攻】Mime 类型列表
按照内容类型排列的 Mime 类型列表 类型/子类型 扩展名 application/envoy evy application/fractals fif application/futurespla ...
- .NET Remoting 应用实例
前言 项目中运用到.NET Remoting ,前段时间也看了下.NET Remoting的相关资料,感觉自己应该动手写个实例来梳理下对.NET Remoting认识和理解,不足的地方请大家指正. 简 ...
- weibform中Application、ViewState对象和分页
Application: 全局公共变量组 存放位置:服务器 特点:所有访问用户都是访问同一个变量,但只要服务器不停机,变量一直存在于服务器的内存中,不要使用循环大量的创建Application对象,可 ...
- echarts中显示效果option中必有的属性
写一个最简单的效果让option中不可缺少的属性. var option = { xAxis:[ //x轴,数组对象,其下至少有一个对象 {.....} ], yAxis:[//y轴,数组对象,其下可 ...