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节点必须以“#”开头. 例如: ...
随机推荐
- Java文件运用
1.使用java修改文件内容: package fileopt; import java.io.BufferedReader; import java.io.BufferedWriter; impor ...
- c#调用ffmpeg嵌入srt/ass字幕提示Unable to open xxx.srt......
最近接触到c#调用ffmpeg嵌入srt/ass字幕,碰到一个错误困扰了很久 Unable to open xxx.srt Error initializing filter 'subtitles' ...
- net share列出了Windows的默认共享（包括C盘）
另外还有单独开启办法: 开启共享方法: 命令行方式:net share 博客=F:\娱乐\种子 我设置了一个名为“博客”的共享,路径为:“F:\娱乐\种子”. GUI方式:找到“F:\娱乐”的“种子” ...
- C++ Boost库简介（一些自己的感受）
boost是一个准标准库,相当于STL的延续和扩充,它的设计理念和STL比较接近,都是利用泛型让复用达到最大化.不过对比STL,boost更加实用.STL集中在算法部分,而boost包含了不少工具类, ...
- Delphi Android ActivityManager（提供了接口, 利用它可以方便的对Memory, Processes, Task, Service 等进行管）
ActivityManager: 对Activity交互提供了接口, 利用它可以方便的对Memory, Processes, Task, Service 等进行管理,. 这里对Delphi接口进行 ...
- 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果
原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...
- 一个 Qt 显示图片的控件（继承QWidget，使用QPixmap记录图像，最后在paintEvent进行绘制，可缩放）
Qt 中没有专门显示图片的控件,通常我们会使用QLabel来显示图片.但是QLabel 显示图片的能力还是有点弱.比如不支持图像的缩放一类的功能,使用起来不是很方便.因此我就自己写了个简单的类. 我这 ...
- Waveform基于JavaScript的开源多声道音乐波形编辑器
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- Delphi Thread.Queue与Synchronize的区别（差别: Synchronize是阻塞，Queue是非阻塞）
前话: 其实大家要学会看源码, 我接下来要说的这些东东,与其等别人讲,还不如自己搞几个代码试一下,印象还深刻点 TThread.Queue和TThread.Synchronize的区别, 效果上:二 ...
- Windows下获取逻辑cpu数量和cpu核数量
代码可在Windows NT下正常运行 具体API说明请参照如下文档: GetLogicalProcessorInformation 点击打开链接 点击打开链接 点击打开链接 typedef BOOL ...