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节点必须以“#”开头. 例如: ...
随机推荐
- ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 框架 前面我们使用了 N 多个章节, ...
- 构建自己的PHP框架（ORM）
完整项目地址:https://github.com/Evai/Aier 我们选择 Laravel 的 illuminate/database 作为我们的 ORM 包. 在本系列教程里,每一个 Comp ...
- React路由配置
React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...
- docker端口映射或启动容器时报错Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen
现象: [root@localhost ~]# docker run -d -p 9000:80 centos:httpd /bin/sh -c /usr/local/bin/start.shd5b2 ...
- JS trim函数
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- JDK源码阅读——LinkedList实现
1 继承结构图 LinkedList是List的另一种实现.继承自AbstractSequentialList 2 数据结构 LinkedList与ArrayList不同的是LinkedList底层使 ...
- Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化.最常见的是flash的动画,还有GIF动态图片. 动画的主要元素 时 ...
- HTTP的请求方法一共有9种，有OPTIONS, HEAD, GET, POST等等（消息头有图，十分清楚）
请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源] GET方法用来请求已被URI识别的资源.指定的资源经服务器端解析后 ...
- html send mail
<html> <body> <script> var formattedBody = "FirstLine \n Second Line \n Third ...
- 在Visual Studio 2017中找不到.NET Framework 4.6.2
原文 https://blogs.msdn.microsoft.com/benjaminperkins/2017/03/23/net-framwork-4-6-2-not-in-visual-stud ...