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节点必须以“#”开头. 例如: ...
随机推荐
- NS2网络模拟(7)-homework03.tcl
1: #NS2_有线部分\homework03.tcl 2: 3: #Create a simulator object 4: set ns [new Simulator] 5: 6: #Define ...
- top(k,n)—db kernel队解题思路
0. 比赛 公司里的第三届XX中间件性能挑战赛 我和另外两个P5组队参加,队名为"db kernel".最后获得了第八,应该是P5里的最高排名. 以下简单扼要地介绍一下题目,以及我 ...
- 逻辑回归原理介绍及Matlab实现
原文:逻辑回归原理介绍及Matlab实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/laobai1015/article/details/781 ...
- Invalid default value for 'created_at'
https://github.com/laravel/framework/issues/15144 https://stackoverflow.com/questions/30555844/larav ...
- 怎么样 javascript / js 在 建立map
设定map道路(它是非常有用的json履行) var a = {}; a["key1"] = "value1"; a["key2"] = & ...
- 带参跳转其他controller
public class GoToOtherController : Controller { public ActionResult Index() { var vm = new GetValueF ...
- Web前端开发人员实用Chrome插件收集
越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...
- CentOS 7.3 源码安装apache 2.4.16配置基于域名的虚拟主机
主配置文件末尾添加一条配置: [root@vm2 ~]# vim /usr/local/apache/conf/httpd.conf Include conf/vhosts.conf 在conf目录下 ...
- android studio中使用9-patch报错mergeDebugResource及Duplicate resources错误处理
由于项目中新导入了两张图片,进行9-patch之后,文件名称包含XXXX.9.png , 而android studio 对资源文件的名称有要求仅支持[A-Z][a-z][0-9]格式 而XXX.9 ...
- centos7 防火墙问题
centos从7开始默认用的是firewalld,这个是基于iptables的,虽然有iptables的核心,但是iptables的服务是没安装的.所以你只要停止firewalld服务即可:sudo ...