jquery选择器 直观实验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"><!-- Source is http://training.learningjquery.com/select-css.html -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Selectors</title>
<link rel="stylesheet" href="http://codylindley.com/jqueryselectors/select.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://codylindley.com/jqueryselectors/select.js" type="text/javascript"></script>
<script src="http://codylindley.com/jqueryselectors/jquery.DOMWindow.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<p style="margin:0;"><small>Original lab by <a href="http://www.learningjquery.com/" target="_blank" >Karl Swedberg</a> Enhanced by <a href="http://www.codylindley.com">Cody Lindley</a>. FYI (ie6 != supported)</small></p>
<div class="section">
<h1>jQuery Selectors</h1>
<div class="domtree">
<h3>Toggle Button = <code>$('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast');</code></h3>
<p><a href="http://www.codylindley.com/jqueryselectors/jqueryselectors.zip" title="Download This Lab" rel="">Download This Lab</a></p>
<div id="myid">This sentence is in <code><div id="myid"></code>. It is followed by a horizontal rule.</div>
<hr />
<p>This is a paragraph, which means it is wrapped in <code><p></code> <span>and</span> <code></p></code>. Those "p" tags in the previous sentence are formatted as <code><code></code>.</p>
<ul>
<li>This is the first list item (<code><li></code>) in an unordered list (<code><ul></code>). </li>
<li>This is the second list item. It has a <a rel="self" title="Learning jQuery blog" href="/archives/jquery-links.htm">link</a> in it.</li>
<li class="myclass otherclass">This is the third list item. It has a <code>class</code> of "myclass otherclass"</li>
<li>This is the fourth list item. It has <strong>strong</strong> text and <em>em</em>phasized <em>text</em>.
<ul>
<li>second-level list item 1</li>
<li>second-level list item 2</li>
</ul>
</li>
</ul>
<p class="myclass"><code><p class="myclass"></code>This is another paragraph. It has class="myclass" Otherwise, nothing <strong>special</strong> about it at all.</p>
<p>This is a paragraph, which means it is wrapped in <code><p></code> and <code></p></code>. Those "p" tags in the previous sentence are formatted as <code>.</p>
<form action="examples_submit" method="get" accept-charset="utf-8">
<div class="left">
<div><input type="text" value="text input" /></div>
<div><input type="text" value="disabled text input" disabled="disabled" /></div>
<div><input type="password" name="password" value="password" /></div>
<div><select>
<option>select list w/ options</option>
<option>another option</option>
<option>a third option</option>
</select>
</div>
</div>
<textarea class="left" rows="5" cols="20">This is a textarea</textarea>
<div><select size="5" style="margin-left:10px">
<option>select list w/ options</option>
<option selected="selected">another option</option>
<option>a third option</option>
</select></div>
<div class="clear-left"><label for="radio1">
<input class="left" name="radiobtn" type="radio" id="radio1" value="checkedradio" checked="checked" />
Radio Checked
</label>
<label class="left clear-left" for="radio2">
<input class="left" id="radio2" name="radiobtn" type="radio" value="not" />
Radio Not Checked
</label>
<label class="left clear-left" for="check1">
<input class="left" id="check1" name="checkbx" type="checkbox" value="checked" checked="checked" />
Checkbox Checked
</label>
<label class="left clear-left" for="check2">
<input class="left" id="check2" name="checkbx" type="checkbox" value="not" />
Checkbox Not Checked
</label>
<label class="left clear-left" for="check3">
<input class="left" id="check3" name="checkbx" type="checkbox" value="not" />
Another checkbox Not Checked
</label>
</div>
<div class="left clear-left"><input type="submit" value="Submit input" /></div>
<div class="left"><input type="button" value="Button input" /></div>
<div class="left"><input type="reset" value="Reset input" /></div>
<div class="left"><input type="image" src="select-form_files/image.gif" value="Image input" /></div>
<div class="left"><button>Button button</button></div>
<div class="left clear-left"><input type="file" name="fileinput" value="file input" id="fileinput" /></div>
</form>
</div>
<div class="example">
<h3>Enter Your Own Selectors ( example: li:nth-child(2) )</h3>
<textarea rows="3" id="customInput" style="width:250px;">li:nth-child(2)</textarea>
<input type="submit" value="toggle" id="toggleCustom" />
</div>
<div class="example">
<h3>Basics</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">code</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/element#element" />
<div class="sample-code">$('<span class="querystring">#myid</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/id#id" />
<div class="sample-code">$('<span class="querystring">.myclass</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/class#class" />
<div class="sample-code">$('<span class="querystring">*</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/all" />
<div class="sample-code">$('<span class="querystring">code, #myid, .myclass</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/multiple#selector1selector2selectorN" />
</div>
</div>
<div class="example">
<h3>Hierarchy</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">div code</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/descendant#ancestordescendant" />
<div class="sample-code">$('<span class="querystring">li > ul</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/child#parentchild" />
<div class="sample-code">$('<span class="querystring">strong + em</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/next#prevnext" />
<div class="sample-code">$('<span class="querystring">strong ~ em</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/siblings#prevsiblings" />
</div>
</div>
<div class="example">
<h3>Basic Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li:first</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/first" />
<div class="sample-code">$('<span class="querystring">li:last</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/last" />
<div class="sample-code">$('<span class="querystring">li:not(li:first)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/not#selector" />
<div class="sample-code">$('<span class="querystring">li:even</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/even" />
<div class="sample-code">$('<span class="querystring">li:odd</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/odd" />
<div class="sample-code">$('<span class="querystring">li:eq(1)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/eq#index" />
<div class="sample-code">$('<span class="querystring">li:gt(2)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/gt#index" />
<div class="sample-code">$('<span class="querystring">li:lt(2)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/lt#index" />
<div class="sample-code">$('<span class="querystring">:header</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/header" />
<div class="sample-code">$('<span class="querystring">:animated</span>')</div>
<input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/animated" />
</div>
</div>
<div class="example">
<h3>Content Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li:contains(second-level)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/contains#text" />
<div class="sample-code">$('<span class="querystring">:empty</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/empty" />
<div class="sample-code">$('<span class="querystring">li:has(a)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/has#selector" />
<div class="sample-code">$('<span class="querystring">p:parent</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/parent" />
</div>
</div>
<div class="example">
<h3>Visibility Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">:hidden</span>')</div>
<input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/hidden" />
<div class="sample-code">$('<span class="querystring">:visible</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/visible" />
</div>
</div>
<div class="example">
<h3>Attribute Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li[class]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeHas#attribute" />
<div class="sample-code">$('<span class="querystring">a[rel="self"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeEquals#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[rel!="nofollow"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeNotEqual#attributevalue" />
<div class="sample-code">$('<span class="querystring">[class^="my"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeStartsWith#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[title$="blog"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[href*="zip"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeContains#attributevalue" />
<div class="sample-code">$('<span class="querystring">a[rel][href][title$="blog"]</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/attributeMultiple#attributeFilter1attributeFilter2attributeFilterN" />
</div>
</div>
<div class="example">
<h3>Child Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">li:nth-child(even)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:nth-child(odd)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:nth-child(2)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:nth-child(2n)</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/nthChild#index" />
<div class="sample-code">$('<span class="querystring">li:first-child</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/firstChild" />
<div class="sample-code">$('<span class="querystring">li:last-child</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/lastChild" />
<div class="sample-code">$('<span class="querystring">code:only-child</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/onlyChild" />
</div>
</div>
<div class="example">
<h3>Forms</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">:input</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/input" />
<div class="sample-code">$('<span class="querystring">:text</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/text" />
<div class="sample-code">$('<span class="querystring">:password</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/password" />
<div class="sample-code">$('<span class="querystring">:radio</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/radio" />
<div class="sample-code">$('<span class="querystring">:checkbox</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/checkbox" />
<div class="sample-code">$('<span class="querystring">:submit</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/submit" />
<div class="sample-code">$('<span class="querystring">:image</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/image" />
<div class="sample-code">$('<span class="querystring">:reset</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/reset" />
<div class="sample-code">$('<span class="querystring">:button</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/button" />
<div class="sample-code">$('<span class="querystring">:file</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/file" />
<div class="sample-code">$('<span class="querystring">:hidden</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/hidden" />
</div>
</div>
<div class="example">
<h3>Form Filters</h3>
<div class="content">
<div class="sample-code">$('<span class="querystring">input:enabled</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/enabled" />
<div class="sample-code">$('<span class="querystring">:disabled</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/disabled" />
<div class="sample-code">$('<span class="querystring">:checked</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/checked" />
<div class="sample-code">$('<span class="querystring">:selected</span>')</div>
<input type="submit" value="toggle" /><input type="submit" value="documentation" title="http://docs.jquery.com/Selectors/selected" />
</div>
</div>
</div> <!-- end of section -->
</div>
<div id="ad">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=codylindley" id="_carbonads_js"></script>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-162561-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
jquery选择器 直观实验的更多相关文章
- JavaScript（15）jQuery 选择器
jQuery 选择器 选择器同意对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器同意通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器同意对 ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
随机推荐
- Java中的引用：强引用、软引用、弱引用、幻象引用（虚引用）
Java语言中,除了原始数据类型的变量(八大基本数据类型),其他都是引用类型,指向各种不同的对象. 理解引用对于我们掌握Java对象生命周期和JVM内部相关机制都是有帮助的. 不同的应用类型,不同之处 ...
- 前端调用接口得到的数据跟postman跑出来的数据里数字部份不相等
昨天碰到这样一个场景,调用后端接口返回的数据发现所有数据都是正常的,只有一个商品ID的最后两位是错的,每一个商品都是,导致无法进行商品的上下架和删除, 经过查资料发现: 浏览器解析数字的坑,一旦超出一 ...
- flask中的蓝图实现模块化的应用
Blueprint 蓝图的基本设想是当它们注册到应用上时,它们记录将会被执行的操作. 当分派请求和生成从一个端点到另一个的 URL 时,Flask 会关联蓝图中的视图函数. 简单来说,Blueprin ...
- redis集群步骤(windows环境)
注:原文转自 https://blog.csdn.net/zsg88/article/details/73715947 ,仅用作为方便查阅 一 所需软件:Redis.Ruby语言运行环境.Redis的 ...
- BurpSuite—-Scanner模块(漏洞扫描)
一.简介 Burp Scanner 是一个进行自动发现 web 应用程序的安全漏洞的工具.它是为渗透测试人员设计的,并且它和你现有的手动执行进行的 web 应用程序半自动渗透测试的技术方法很相似. 使 ...
- node从搭建运行项目整体流程
1. 初始化配置基本信息: npm init (自定义配置) npm init -y (一切配置采用默认值) 在当前目录产生package.json文件,有一个dependencies用来记录该项目所 ...
- JQuery补充——获取与设置表单值
//写jQuery代码时注意前面一定要记得加$(function(){});,在文档加载完成后进行代码的编写 使用jQuery的表单对象属性来选择被选中的项::checked,详见文档选择器部分 根据 ...
- 20155231 2016-2017-2《Java程序设计》课程总结
20155231 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:师生关系 预备作业2:优秀技能经验 预备作业3:虚拟机linux初接触 第一周作业:认识 ...
- 20155321 2016-2017-2 《Java程序设计》第十周学习总结
20155321 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 网络概览 局域网和广域网:局域网通常限定在一个有效的地理区域之内,广域网由许多局域网组成.最 ...
- 【转载】C/C++杂记：深入理解数据成员指针、函数成员指针
原文:C/C++杂记:深入理解数据成员指针.函数成员指针 1. 数据成员指针 对于普通指针变量来说,其值是它所指向的地址,0表示空指针.而对于数据成员指针变量来说,其值是数据成员所在地址相对于对象起始 ...