jQuery入门——选择器
jQuery选择器可以分为四类：基础选择器，层级选择器，属性选择器，过滤选择器
基础选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
</style>
<script type="text/javascript" src="../js/jQuery-3.2.1.js"></script>
<script type="text/javascript">
/*
基本选择器：
1.交集(AB) 一个元素，必须保证AB两个属性同时具备。
$("input[name]").css("color", "red");
2.并集 (A,B,C) 满足任何一个逗号的分区都会被锁定
$("div,span").css("color", "red");
3.全局
$("*").css("color", "red");
*/
$(function() {
//交集选择器
//$("ul#second").css("color", "red");
//并集选择器
//$("ul#second,div").css("color", "red");
//html
$("*").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li class="myred">上海</li>
<li class="myred">北京</li>
<li id="gz">广州</li>
</ul> <ul id="second">
<li class="myred">上海</li>
<li class="myred">北京</li>
<li id="gz">广州</li>
</ul>
<div>我是div</div> </body>
</html>
层级选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style type="text/css">
</style>
<script type="text/javascript" src="../js/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
//后代:子元素的子元素也可以被锁定到
//$("html body ul li").css("color","red"); //子选择器 直接子元素
$("#bigbox>p>span").css("color","red"); //相邻选择器 + 直接相邻，一般是后一个
//$("ul+div").css("color","red"); //同辈 ~ 与family同辈的所有div,不包含family
//$("#family~div").css("color", "red");
});
</script>
</head>
<body>
<div id="family">
<div id="father"></div>
<div id="mother"></div>
<div id="samllthree"></div>
</div>
<div>
一个div
</div>
<ul>
<li class="myred">上海</li>
<li class="myred">北京</li>
<li id="gz">广州</li>
</ul>
<div id="bigbox">
<p>我是p标签
<span>一个span</span>
</p>
<div id="small">我是小的div</div>
</div>
<p>我是小武，我骄傲，我傲娇</p>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
</style>
<script type="text/javascript" src="../js/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
//选择指定属性的值是指定值的元素
$("[href='baidu.com']").css("color","red");
//选择指定属性是以给定元素结尾的元素
$("[href$='Driver']").css("color","red");
//选择指定属性具有包含一个给定的子字符串的元素
$("[href*='com']").css("color", "red");
//选择指定属性就是以给定字符串开始的元素
$("[href^='com']").css("color", "red");
});
</script>
</head>
<body>
<a href="baidu.com">去百度</a>
<a href="com.mysql.jdbc.Driver">新浪</a>
<p href="com.mysql.jdbc.Driver">我是p</p>
</body>
</html>
过滤选择器：这就比较多了，总的来说就是以":"开头的选择器，下面举几个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤选择器</title>
<style type="text/css">
</style>
<script type="text/javascript" src="../js/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
//基本过滤选择器 first last odd even
//$("li:odd").css("color","red");
/* $("li:eq(2)").css("color","red"); */
// $("li").eq(2).css("color","red");
/* $("li:gt(2)").css("color","red"); */
//$(":header").css("color","red");
/* $("[name=txtName]").focus();
$(":focus").css("color","red"); */
$("#run").click(function() {
$("div:not(:animated)").animate({
width : "+=200"
}, );
});
$("#show").click(function() {
$(":hidden").show();
});
});
</script>
</head>
<body>
<ul>
<li>农村包围城市</li>
<li>武装夺取政权</li>
<li>敌进我退，敌退我扰，敌疲我打</li>
<li>农村包围城市</li>
<li>武装夺取政权</li>
<li>敌进我退，敌退我扰，敌疲我打</li>
</ul>
<h2>过滤选择器专题</h2>
<input name="txtName" value="五一假期，我要学习" />
<input type="hidden" value="我是隐藏的input" />
<input type="button" id="show" value="点我显示一个p" />
<!-- 伪造隐藏元素 -->
<p style="display: none;">我是隐藏的</p>
<button id="run">Run</button>
<div style="width: 200px; height: 200px; border: 1px solid red;">我是div</div>
</body>
</html>
jQuery入门——选择器的更多相关文章
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（3）事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（4）jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- 第一百六十二节，jQuery入门介绍
jQuery入门 学习要点: 1.什么是 jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本 I ...
- JQuery入门篇
JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...
随机推荐
- 编译wxWidgets —— windows、vc71、bcc32、MinGW与命令行
编译wxWidgets —— windows.vc71.bcc32.MinGW与命令行 http://www.diybl.com/course/3_program/vc/vc_js/20071226/ ...
- Apache和Tomcat的整合
1.web架构 首先上图,解释web通用架构 通常情况下分为三大块 : ★ Web server : 通常情况下由 Apache Http Server . IBM Http Server .I ...
- .net 模拟发起HTTP请求（用于上传文件）
用C#在服务端发起http请求,附上代码一 /// <summary> /// 文件帮助类 /// </summary> public class FileHelper { / ...
- React学习（1）——constructor
constructor(props) { super(props); this.state = { orderNo: "001", wid: 6 }; } constructor: ...
- 安装在谷歌axure小工具
下载插件 第一步 第二步 第三步 第四步 版权声明:本文博客原创文章.博客,未经同意,不得转载.
- aspnetboilerplate && .net core 使用原生sql
利用aspnetboilerplate提供的工具类IDbContextProvider private readonly IDbContextProvider<XXXDbContext> ...
- SQL Server 阻止组件 xp_cmdshell
错误信息描述 消息 15281,级别 16,状态 1,过程 xp_cmdshell,第 1 行SQL Server 阻止了对组件 'xp_cmdshell' 的 过程 'sys.xp_cmdshell ...
- jquery 克隆div 复制div 克隆元素 复制元素
代码: $('.div1').clone() 定义和用法 clone() 方法生成被选元素的副本,包含子节点.文本和属性. 语法 $(selector).clone(includeEvents) 参数 ...
- vxworks下libpcap的移植
linux下的libpcap应用能够成熟的使用在第三方的应用中,但基于vxworks开发的项目中需要使用libpcap的部分功能则无相应的实现. 研究了下libpcap向vxworks的移植,并且小有 ...
- Android Xposed框架出现java.lang.IllegalAccessError: Class ref in pre-verified class resolved to unexpected implementation问题
第一次玩Xposed框架,按照多个demo的格式写了一个demo发现死活不进入 public abstract void handleLoadPackage(LoadPackageParam lppa ...