jQuery选择器(子元素过滤选择器)第七节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ //选取子元素, 需要在选择器前添加一个空格. $("div.one :nth-child(2)").css("background", "#ffbbaa"); }); $("#btn2").click(function(){ $("div.one :first-child").css("background", "#ffbbaa"); }); $("#btn3").click(function(){ $("div.one :last-child").css("background", "#ffbbaa"); }); $("#btn4").click(function(){ $("div.one :only-child").css("background", "#ffbbaa"); }); }); </script> </head> <body> <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/> <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"> </div> <div id="mover">正在执行动画的div元素.</div> </body> </html>
jQuery选择器(子元素过滤选择器)第七节的更多相关文章
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- 过滤选择器first与子元素过滤选择器first-child的区别
1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...
- JQuery表单元素过滤选择器
此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...
- jquery子元素过滤选择器
:nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始: //偶数行 //$('li:nth-child(even)').addClass ...
- 008 jquery过滤选择器-----------(子元素过滤选择器)
1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- jQuery中的子(后代)元素过滤选择器(四、六):nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jquery 子元素筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- Jquery | 基础 | jQuery表单对象属性过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...
随机推荐
- css控制div强制换行
div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...
- Scaffolding Template on Asp.Net Core Razor Page
Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...
- 快速双边滤波 附完整C代码
很早之前写过<双边滤波算法的简易实现bilateralFilter>. 当时学习参考的代码来自cuda的样例. 相关代码可以参阅: https://github.com/johng12/c ...
- http://codeforces.com/contest/610/problem/D
D. Vika and Segments time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 【NOIP】OpenJudge - 15-03:雇佣兵
#include<stdio.h>//雇佣兵 int main() { ; scanf("%d%d%d",&M,&N,&X); n=N; m=M ...
- zoj3211dream city dp 斜率
Dream City Time Limit: 1 Second Memory Limit:32768 KB JAVAMAN is visiting Dream City and he see ...
- 【MVC】MvcPager分页及边界传递数据示例
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Pyquery API中文版
Pyquery的用法与jQuery相同,可以直接参考jQuery API学习.
- SqlBulkCopy效率低下原因分析
看到标题 应该会奇怪 SqlBulkCopy 为什么会效率低下 场景:接手项目 数据库SQLSERVER2008R2, 目前有一张流水表单表数据超过4亿,表中建有索引,有其他模块对这个表进行查询操作 ...
- 关于python如果没有numpy模块如何处理
1.在python中,你在python的shell输入>>>import numpy 但是编译器告诉你没有numpy库,这时候你就要导入python库,那么如何导入呢 2.收下访问h ...