( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\jQuery\jquery_01.php on line 23
Call Stack
#TimeMemoryFunctionLocation
10.0000389112{main}( )...\jquery_01.php:0
( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\jQuery\jquery_01.php on line 23
Call Stack
#TimeMemoryFunctionLocation
10.0000389112{main}( )...\jquery_01.php:0
( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\jQuery\jquery_01.php on line 23
Call Stack
#TimeMemoryFunctionLocation
10.0000389112{main}( )...\jquery_01.php:0

标签名

$("tag")

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素 ①，即<p>，颜色变红

我是段落元素 ②，即<p>，颜色变红

我是行内元素，即<span>，颜色不变

我是段落元素 ①，即<p>，颜色变红

我是段落元素 ②，即<p>，颜色变红

我是行内元素，即<span>，颜色不变
  • <p>我是段落元素 ①，即 &lt;p>，颜色变红</p>
  • <p>我是段落元素 ②，即 &lt;p>，颜色变红</p>
  • <span>我是行内元素，即 &lt;span>，颜色不变</span>

( 注意：&lt;p>在浏览器渲染的时候会变成<p>，只作为字符串来处理，而不是元素名 )

  • $("p").css("color","#f00");

ID

$("#ID")

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，ID="Red"，颜色变红

我是段落元素，ID 属性无，颜色不变

我是段落元素，ID="Red"，颜色变红

我是段落元素，ID 属性无，颜色不变

  • <p id="Red">我是段落元素，ID="Red"，颜色变红</p>
  • <p>我是段落元素，ID 属性无，颜色不变<p>
  • $("#Red").css("color","#f00");

类名

$(".class")

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，class="Red"，颜色变红

我是段落元素，class 属性无，颜色不变

我是段落元素，class="Red"，颜色变红

我是段落元素，class 属性无，颜色不变

  • <p class="Red">我是段落元素，class="Red"，颜色变红</p>
  • <p>我是段落元素，class 属性无，颜色不变<p>
  • $(".Red").css("color","#f00");

一次获取多个元素

$("tag,tag,tag…")

$("#ID,#ID,#ID…")

$(".class,.class,.class…")

$("tag,#ID,.class…")

相似方法：$("selector").filter(":first,:eq(6),.red");

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素 ①，不设属性，颜色不变

我是段落元素 ②，id="P2"，颜色不变

我是段落元素 ③，class="Red"，颜色不变

我是行内元素 ①，不设属性，颜色不变

我是行内元素 ②，id="Span2"，颜色不变

我是行内元素 ③，class="Red"，颜色不变

我是链接元素 ①，不设属性，颜色不变

我是链接元素 ②，id="A2"，颜色不变

我是链接元素 ③，class="Red"，颜色不变

我是段落元素 ①，不设属性，颜色不变

我是段落元素 ②，id="P2"，颜色不变

我是段落元素 ③，class="Red"，颜色不变

我是行内元素 ①，不设属性，颜色不变

我是行内元素 ②，id="Span2"，颜色不变

我是行内元素 ③，class="Red"，颜色不变

我是链接元素 ①，不设属性，颜色不变

我是链接元素 ②，id="A2"，颜色不变

我是链接元素 ③，class="Red"，颜色不变

  • <p> 我是段落元素 ①，不设属性，颜色不变 </p>
  • <p id="P2"> 我是段落元素 ②，id="P2"，颜色不变 </p>
  • <p class="Red"> 我是段落元素 ③，class="Red"，颜色不变 </p>
  • <span> 我是行内元素 ①，不设属性，颜色不变 </span><br>
  • <span id="S2"> 我是行内元素 ②，id="Span2"，颜色不变 </span><br>
  • <span class="Red"> 我是行内元素 ③，class="Red"，颜色不变 </span><br>
  • <a> 我是链接元素 ①，不设属性，颜色不变 </a><br>
  • <a id="A2"> 我是链接元素 ②，id="A2"，颜色不变 </a><br>
  • <a class="Red"> 我是链接元素 ③，class="Red"，颜色不变 </a><br>
  • $("p,span,a").css("color","#fbc");
  • $("#P2,#S2,#A2").css("color","#f69");
  • $(".Red").css("color","#f00");

通过层次关系

$("祖先 子孙")：相当于 $("selector").find();

$("父 > 子")：相当于 $("selector").children();

$("前 + 后")：相当于 $("selector").next();

$("兄 ~ 弟")：相当于 $("selector").siblings();


通过元素属性值

语法 说明
$("tag[attribute]") 获取拥有指定属性的元素
$("tag[attribute=value]") 获取拥有指定属性且设定值一致的元素
$("tag[attribute!=value]") 获取拥有指定属性且设定值不一致的元素
$("tag[attribute^=value]") 获取拥有指定属性且设定值最初部分一致的元素
$("tag[attribute$=value]") 获取拥有指定属性且设定值最后部分一致的元素
$("tag[attribute*=value]") 获取拥有指定属性且设定值中包含指定字符串的的元素
  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，id="turnfalse"，title="点击弹出对话框"，颜色不变

我是段落元素，id="turnCyan1"，颜色为青色1

我是段落元素，id="turnCyan2"，颜色为青色2

我是段落元素，id="TurnCyan3"，颜色为青色3

我是段落元素，id="turnBlue1"，颜色为蓝色1

我是段落元素，id="turnBlue2"，颜色为蓝色2

我是段落元素，id="turnfalse"，title="点击弹出对话框"，颜色不变

我是段落元素，id="turnCyan1"，颜色为青色1

我是段落元素，id="turnCyan2"，颜色为青色2

我是段落元素，id="TurnCyan3"，颜色为青色3

我是段落元素，id="turnBlue1"，颜色为蓝色1

我是段落元素，id="turnBlue2"，颜色为蓝色2

  • <p id="turnfalse" title="点击弹出对话框">我是段落元素，id="turnfalse"，title="点击弹出对话框"，颜色不变</p>
  • <p id="turnCyan1">我是段落元素，id="turnCyan1"，颜色为青色1</p>
  • <p id="turnCyan2">我是段落元素，id="turnCyan2"，颜色为青色2</p>
  • <p id="TurnCyan3">我是段落元素，id="TurnCyan3"，颜色为青色3</p>
  • <p id="turnBlue1">我是段落元素，id="turnBlue1"，颜色为蓝色1</p>
  • <p id="turnBlue2">我是段落元素，id="turnBlue2"，颜色为蓝色2</p>
  • $("p[title]").click(function(){alert("只有含有 title 属性的 <p> 元素才能弹出对话框。");});
  • $("p[id=turnCyan1]").css("color","#7ac0e4");
  • $("p[id=turnCyan2]").css("color","#35aae7");
  • $("p[id^=Turn]").css("color","#069be8");
  • $("p[id$=Blue1]").css("color","#1875dd");
  • $("p[id*=Blue2]").css("color","#054792");

通过过滤器

过滤器是 jQuery 模拟 CSS 中的伪类（如 a:hover{…}），因为 IE6/7/8 对 CSS 伪类不支持，所以很大程度上导致了开发者的生疏感，不过值得庆幸的是，jQuery 对此做了很好的支持。

查看 CSS 伪类：http://t.mb5u.com/css3

1. 基本过滤器

过滤方式说明
$("tag:first")获取元素集合中的第一个元素
$("tag:last")获取元素集合中的最后一个元素
$("tag:even")获取元素集合中的偶数序号的元素
$("tag:odd")获取元素集合中的奇数序号的元素
$("tag:nth-child(n)")获取元素集合中的第 n 个元素 （从1开始，基于父元素计算）
$("tag:eq(index)")获取元素集合中的指定序号的元素（从0开始，基于元素集合计算）
$("tag:lt(index)")获取元素集合中的指定序号前的元素
$("tag:gt(index)")获取元素集合中的指定序号后的元素
$("tag:not(expr)")获取元素集合中的除了指定元素外的元素
$("tag:header")获取标题元素，h1~h6
$("tag:animated")获取正在执行动画的元素
$("tag:focus")获取当前拥有焦点的元素

2， 内容过滤器

过滤规则：检测是否包含子元素或文本内容上。

过滤方式说明
$("tag:contains(text)")获取元素集合中的包含指定字符串的元素
$("tag:has(selector)")获取元素集合中的拥有子元素的元素
$("tag:empty")获取元素集合中的空元素，不包括任何文本、子元素（包括空元素）
$("tag:parent")获取元素的父元素

3. 可见性过滤器

过滤方式说明
$("tag:visible")获取元素集合中的可见元素
$("tag:hidden")获取元素集合中的隐藏元素

4. 子元素过滤器

过滤方式说明
$("tag:first-child")获取每个父元素中的第一个子元素
$("tag:last-child")获取每个父元素中的最后一个子元素
$("tag:only-child")获取只包含一个元素的父元素
$("tag:nth-child(index)")获取指定索引的元素（索引从1开始）
方法说明
.size()获取元素集合中的元素总数（= $("selector").length）
.get(index)获取元素集合中的指定序号的元素，省略参数则返回一个数组
.eq(index)获取元素集合中的指定序号的元素（相当于.get(index)）
.slice(start,[end])获取元素集合中指定范围的元素
.index(element)返回该元素在元素集合中的序列号，无则返回-1
.filter(expr)获取元素集合中的除了指定序号外的元素
.is(expr)获取元素集合中与表达式一致的元素
.has(expr)判断元素集合中是否含有指定的元素，返回值为布尔值
.prev([expr])获取前一个同辈元素
.prevAll([expr])获取前面所有的同辈元素
.next([expr])获取下一个同辈元素
.nextAll([expr])获取后面所有的同辈元素
.prevUntil([expr])从自身开始，在同辈元素中往上查找，遇到非指定元素选定，遇到指定元素则停止选定
.nextUntil([expr])从自身开始，在同辈元素中往上查找，遇到非指定元素选定，遇到指定元素则停止选定
.siblings([expr])获取所有的同辈元素
.parent([expr])获取元素的父元素
.parents([expr])获取元素的所有祖先元素
.children([expr])获取元素的子元素
.first([expr])获取元素集合中的第一个子元素
.last([expr])获取元素集合中的最后一个子元素
.not([expr])获取除了指定元素外的元素集合
.end()结束本元素链，返回到前一个元素
.andSelf()合并命令链内的最近产生的两个包装集，两个都会生效

实例：

.eq(index)

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素 ①，index=0，颜色不变

我是段落元素 ②，index=1，颜色不变

我是段落元素 ③，index=2，颜色变红

我是段落元素 ④，index=3，颜色不变

我是段落元素 ⑤，index=4，颜色不变

我是段落元素 ①，index=0，颜色不变

我是段落元素 ②，index=1，颜色不变

我是段落元素 ③，index=2，颜色变红

我是段落元素 ④，index=3，颜色不变

我是段落元素 ⑤，index=4，颜色不变

  • <p>我是段落元素 ①，index=0，颜色不变</p>
  • <p>我是段落元素 ②，index=1，颜色不变</p>
  • <p>我是段落元素 ③，index=2，颜色变红</p>
  • <p>我是段落元素 ④，index=3，颜色不变</p>
  • <p>我是段落元素 ⑤，index=4，颜色不变</p>
  • 代码一：$("p:eq(2)").css("color","#f00");
  • 代码二：$("p").eq(2).css("color","#f00");
  • （表格中的其他伪类用法与此相似，不做赘述）

.end()

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，将会被克隆，克隆体颜色不变

我是段落元素的对比，jQuery 不使用 .end() 方法，克隆体颜色变红

我是段落元素，将会被克隆，克隆体颜色不变

我是段落元素的对比，jQuery 不使用 .end() 方法，克隆体颜色变红

  • <p id="BeenClone01">我是段落元素，将会被克隆，克隆体颜色不变</p>
  • <p id="BeenClone02">我是段落元素的对比，jQuery 不使用 .end() 方法，克隆体颜色变红</p>
  • $("#BeenClone01").clone().insertAfter("#BeenClone01").end().css("color","#f00");
  • $("#BeenClone02").clone().insertAfter("#BeenClone02").css("color","#f00");

.andSelf()

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，将会被克隆，我和克隆体颜色均变

我是段落元素，将会被克隆，我和克隆体颜色均变

  • <p id="BeenClone03">我是段落元素，将会被克隆，克隆体颜色不变</p>
  • $("#BeenClone03").clone().insertAfter("#BeenClone03").andSelf().css("color","#f00");

.next()

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，添加了 .next() 行为，下个元素变红

我是段落元素

我是段落元素

我是段落元素，添加了 .next() 行为，下个元素变红

我是行内元素

我是段落元素

我是段落元素，添加了 .next("p") 行为，下个元素变红

我是段落元素

我是段落元素

我是段落元素，添加了 .next("p") 行为，下个元素不变红

我是行内元素

我是段落元素

我是段落元素，添加了 .next() 行为，下个元素变红

我是段落元素

我是段落元素

我是段落元素，添加了 .next() 行为，下个元素变红

我是行内元素

我是段落元素

我是段落元素，添加了 .next("p") 行为，下个元素变红

我是段落元素

我是段落元素

我是段落元素，添加了 .next("p") 行为，下个元素不变红

我是行内元素

我是段落元素

  • <p>我是段落元素，添加了 .next() 行为，下个元素变红</p>
  • <p>我是段落元素</p>
  • <p>我是段落元素</p>
  • <p>我是段落元素，添加了 .next() 行为，下个元素变红</p>
  • <span>我是行内元素</span>
  • <p>我是段落元素</p>
  • <p>我是段落元素，添加了 .next("p") 行为，下个元素变红</p>
  • <p>我是段落元素</p>
  • <p>我是段落元素</p>
  • <p>我是段落元素，添加了 .next("p") 行为，下个元素不变红</p>
  • <span>我是行内元素</span>
  • <p>我是段落元素</p>
  • $("p").eq(0).next().css("color","red");
  • $("p").eq(0).next().css("color","red");
  • $("p").eq(0).next("p").css("color","red");
  • $("p").eq(0).next("p").css("color","red");

.nextAll()

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，添加了 .nextAll() 行为，以下各类同级元素会变红

我是段落元素

我是行内元素

我是段落元素

我是超链接元素中的段落元素

我是段落元素，添加了 .nextAll("p") 行为，以下多个同级段落元素会变红

我是段落元素

我是行内元素

我是段落元素

我是超链接元素中的段落元素

我是段落元素，添加了 .nextAll() 行为，以下各类同级元素会变红

我是段落元素

我是行内元素

我是段落元素

我是超链接元素中的段落元素

我是段落元素，添加了 .nextAll("p") 行为，以下多个同级段落元素会变红

我是段落元素

我是行内元素

我是段落元素

我是超链接元素中的段落元素
  • <p>我是段落元素，添加了 .nextAll() 行为，以下各类同级元素会变红</p>
  • <p>我是段落元素</p>
  • <p>我是行内元素</p>
  • <p>我是段落元素</p>
  • <a href="#"> <p> 我是超链接元素中的段落元素 </p> </a>
  • <p>我是段落元素，添加了 .nextAll("p") 行为，以下各类同级元素会变红</p>
  • <p>我是段落元素</p>
  • <p>我是行内元素</p>
  • <p>我是段落元素</p>
  • <a href="#"> <p> 我是超链接元素中的段落元素 </p> </a>
  • $("p").eq(0).nextAll().css("color","red");
  • $("p").eq(0).nextAll("p").css("color","red");

.nextUntil()

  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码

我是段落元素，添加了 .nextUntil("a") 行为，以下各类同级元素会变红，除非遇到指定的 超链接元素

我是段落元素 p

我是标题元素 H3

我是行内元素 span
我是超链接元素 a

我是段落元素 p

我是段落元素，添加了 .nextUntil("a") 行为，以下各类同级元素会变红，除非遇到指定的 超链接元素

我是段落元素 p

我是标题元素 H3

我是行内元素 span
我是超链接元素 a

我是段落元素 p

  • <p>我是段落元素，添加了 .nextUntil("a") 行为，以下各类同级元素会变红，除非遇到指定的 超链接元素</p>
  • <p>我是段落元素 p</p>
  • <h3>我是标题元素 H3</h3>
  • <span>我是行内元素 span</span>
  • <a href="#">我是超链接元素 a</a>
  • <p>我是段落元素 p</p>
  • $("p").eq(0).nextUntil("a").css("color","red");

获取表单元素

语法说明
:input获取所有表单元素
:radio获取单选按钮元素
:checkbox获取多选按钮元素
:text获取text属性的元素
:password获取password属性的元素
:button获取button属性的元素或button标签
:image获取image属性的元素
:file获取file属性的元素
:submit获取submit属性的元素
:reset获取reset属性的元素
:enabled获取可输入的元素
:disabled获取不可输入的元素
:checked获取选中状态的元素
:selected获取下拉框选中状态的元素

显示框架
显示框架
显示框架
显示框架