Jquery | 基础 | 慕课网 | 基本筛选选择器
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>基本筛选器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
<div class="div">
<p>div:first</p>
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>:odd</p>
</div>
<div class="div">
<p>:even</p>
</div>
<div class="div">
<p>div:last</p>
<p>:odd</p>
</div>
</div>
<script type="text/javascript">
//找到第一个div
$(".div:first").css("color", "#CD00CD");
</script> <script type="text/javascript">
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
</script> <script type="text/javascript">
//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even").css("border", "3px groove red");
</script> <script type="text/javascript">
//:odd 选择所引值为奇数的元素，从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
</script> <h3>:eq/:gt/:lt</h3>
<div class="left">
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:lt(3)</p>
</div>
<div class="aaron">
<p>:eq(2)</p>
</div>
<div class="aaron">
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
<div class="aaron">
<p>:gt(3)</p>
</div>
</div>
<script type="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
</script> <script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
</script> <script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
</script> <h3>:not</h3>
<div class="left">
<div>
<input type="checkbox" name="a" />
<p>Aaron</p>
</div>
<div>
<input type="checkbox" name="b" />
<p>慕课</p>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<p>其他</p>
</div>
</div>
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked) + p").css("background-color", "#CD00CD");
</script>
</body> </html>
实验课：
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>使用jQuery子元素过滤选择器</title>
<style type="text/css">
body{font-size:12px;text-align:center}
ul{width:241px;list-style-type:none;padding:0px}
ul li{height:23px;width:60px;line-height:23px;
float:left;border-top:solid 1px #eee;
border-bottom:solid 1px #eee;margin-bottom:5px
}
.GetFocus{width:58px;border:solid 1px #666;
background-color:#eee}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
//增加每个父元素下的第二个子元素类别
$("li:nth-child(2)").addClass("GetFocus");
})
$("#button2").click(function(){
//增加每个父元素下的第一个子元素类别
$("li:nth-child(1)").addClass("GetFocus");
})
$("#button3").click(function(){
//增加每个父元素下的最后一个子元素类别
$("li:last-child").addClass("GetFocus");
})
$("#button4").click(function(){
//增加每个父元素下只有一个子元素类别
$("li:only-child").addClass("GetFocus");
})
}) </script>
</head>
<body>
<ul>
<li>Item 1-0</li>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-0</li>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul>
<ul>
<li>Item 3-0</li>
</ul>
<button id="button1">增加每个父元素下的第二个子元素类别</button>
<button id="button2">增加每个父元素下的第一个子元素类别</button>
<button id="button3">增加每个父元素下的最后一个子元素类别</button>
<button id="button4">增加每个父元素下只有一个子元素类别</button> </body>
</html>
Jquery | 基础 | 慕课网 | 基本筛选选择器的更多相关文章
- Jquery | 基础 | 慕课网 | 层级选择器
选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...
- Jquery | 基础 | 慕课网 | 类选择器
原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...
- Jquery | 基础 | 慕课网 | （*选择器）
原生JS var elements1 = document.getElementsByTagName('*'); JQ var elements2 = $("*"); <!D ...
- Jquery | 基础 | 慕课网 | 元素选择器
getElementsByTagName方法得到页面所有的<div>元素 var divs = document.getElementsByTagName('div'); 与 同样的效果, ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
- 【总结整理】JQuery基础学习---样式篇
进入官方网站获取最新的版本 http://jquery.com/download/ 中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...
- JQuery基础修炼-样式篇
jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...
- Web前端JQuery基础
JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...
- 慕课网4-2 编程练习：jQuery祖先后代选择器小案例
4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...
随机推荐
- javascript判断一个变量或对象是否存在
判断一个变量或对象是否存在,是一种常用的操作.我这里收集了几种. //1. 最常用的一种方法.if(typeof v == 'undefined'){ console.log("v is u ...
- 第一讲：使用html5——canvas绘制奥运五环
<html> <head> <title>初识canvas</title> </head> <body> <canvas ...
- Phoenix（SQL On HBase）安装和使用报告
一.为什么使用Phoenix二.安装Phoenix2.1 兼容问题?2.2 编译CDH版本的Phoenix2.3 安装Phoenix到CDH环境中三.Phoenix的使用3.1 phoenix的4种调 ...
- What is the difference between message queue pattern and publish-subscribe?
What is the difference between message queue pattern and publish-subscribe? - Quora https://www.quor ...
- A JavaScript library for reading EXIF meta data from image files.
exif-js/exif-js: JavaScript library for reading EXIF image metadata https://github.com/exif-js/exif- ...
- C语言文件读写Demo
CIODemo.c #include <stdio.h> #include <time.h> #define INPUT_BUFFER_SIZE 100 * 1024 int ...
- 创建Material Design风格的Android应用--应用主题
本人全部文章首先公布于个人博客,欢迎关注,地址:http://blog.isming.me 昨天正式公布了android 5,同一时候android developer站点也更新了,添加了创建Mate ...
- luogu3373 【模板】线段树2
题目大意: 已知一个数列,你需要进行下面三种操作:1.将某区间每一个数乘上x2.将某区间每一个数加上x3.求出某区间每一个数的和 本线段树的标记是个二元组:add和mul,其代表将一个线段中的每一个点 ...
- 没有该栏目数据可能缓存文件(data/cache/inc_catalog_base.inc)没有更新请检查是否有写入权限
dedecms系统搬家后或在系统还原后,重新更新栏目或文件的时候,有时会出现这样的错误提示:没有该栏目数据可能缓存文件(data/cache/inc_catalog_base.inc)没有更新请检查是 ...
- Ntrip通讯协议1.0
Ntrip通讯协议1.0 1 什么是Ntrip? CORS(Continuously Operating Reference Stations)就是网络基准站,通过网络收发GPS差分数据.用户访问CO ...