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节点必须以“#”开头. 例如: ...
随机推荐
- c#调api串口通讯
原文:c#调api串口通讯 在调试ICU通信设备的时候,由于串口通信老出现故障,所以就怀疑CF实现的SerialPort类是否有问题,所以最后决定用纯API函数实现串口读写. 先从网上搜索相关代码(关 ...
- html5 页面元素插件
1. 滚动条 jquery.nicescroll 正常引用方式: 设置区域高度 var bodyHeight = $(document.body).height(); $("#XXXXXXX ...
- debian 下py2.7 安装mysql模块
先安装pip 然后用pip安装 setuptools 安装模块的时候会报错 python setup.py install sh: mysql_config: command not found Tr ...
- Angular常用指令
安装Node 先去Node官网下载并安装Node.js Install the Angular CLI(安装Angular CLI) npm install -g @angular/cli Creat ...
- ABP缓存示例
private readonly ICacheManager _cacheManager; public ProgrammeManage(ICacheManager cacheManager) { _ ...
- AngularJS 页面计算
<div ng-app="multipliedCaculateApp" ng-controller="multipliedCaculateController as ...
- Halcon程序导出运行的方法
1 在Halcon中打开程序,如clip.hdev: 2 文件->导出 设置使用导出模板,使用UTF-8编码: 3 导出cs文件 4 新建Winform程序 5 在工具栏中点右键->选择项 ...
- Windows证书的生成导出以及使用证书验证文件是否被修改
本文介绍了如何使用Windows自带的证书生成器生成,导出,使用证书.并以验证文件是否被修改举例 1．证书相关辅助类 public sealed class DataCertificate { #re ...
- XAML的命名空间 - CSDN博客
原文:XAML的命名空间 - CSDN博客 一个最简单的XAML例子 <Window x:Class="WpfApplication1.MainWindow" xmlns=& ...
- WPF X:Shared概述 - CSDN博客
原文:WPF X:Shared概述 - CSDN博客 一.含义 X:Shared用于指定请求资源时创建实例的两种方式. X:Shared = "true"(默认):表示所有请求都是 ...