python学习笔记-Day15 -jquery常用知识-CSDN博客

jquery常用知识点

向html中导入jquery

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

jquery语法

jquery语法是为了选取和操作html元素编制的

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

例：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

jquery选择器

#id 选择器根据给定的id匹配一个元素，如果选择器中包含特殊字符需用两个斜杠（//）进行转义

例查找 ID 为"myDiv"的元素。

        HTML 代码:        
        <div id="notMe"><p>id="notMe"</p></div>
        <div id="myDiv">id="myDiv"</div>
        jQuery 代码:
        $("#myDiv");
        结果:
        [ <div id="myDiv">id="myDiv"</div> ]

element 选择器根据给定的元素名匹配所有元素
例查找一个 DIV 元素。

        HTML 代码:
        <div>DIV1</div>
        <div>DIV2</div>
        <span>SPAN</span>
        jQuery 代码:
        $("div");
        结果:
        [ <div>DIV1</div>, <div>DIV2</div> ]

.class 选择器根据给定的类匹配元素。
例查找所有类是 "myClass" 的元素.

        HTML 代码:        
        <div class="notMe">div class="notMe"</div>
        <div class="myClass">div class="myClass"</div>
        <span class="myClass">span class="myClass"</span>
        jQuery 代码:
        $(".myClass");
        结果:
        [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* 选择器匹配所有元素

HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$("*")
结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

parent > child 在给定的父元素下匹配所有的子元素

描述:
匹配表单中所有的子级input元素。
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]

prev + next 匹配所有紧接在 prev 元素后的 next 元素

描述:
匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]

prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素

描述:
找到所有与表单同辈的 input 元素
HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")
结果:
[ <input name="none" /> ]

:first

V1.0概述
获取第一个元素
示例
描述:
获取匹配的第一个元素
HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jQuery 代码:
$('li:first');
结果:

:last()
V1.0概述
获取最后个元素
示例
描述:
获取匹配的最后个元素
HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jQuery 代码:
$('li:last')
结果:
[ <li>list item 5</li> ]

:eq(index)

概述

匹配一个给定索引值的元素

参数

indexNumberV1.0

从 0 开始计数

示例

描述:
查找第二行
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]

:gt(index)

概述

匹配所有大于给定索引值的元素

参数

indexNumberV1.0

从 0 开始计数

示例

描述:

查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:gt(0)")
结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

:lt(index)

概述

匹配所有小于给定索引值的元素

参数

indexNumberV1.0

从 0 开始计数

示例

描述:
查找第一第二行，即索引值是0和1，也就是比2小
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:lt(2)")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

:not(selector)

概述

去除所有与给定选择器匹配的元素

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

参数

selectorSelectorV1.0

用于筛选的选择器

示例

描述:

查找所有未选中的 input 元素

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代码:
$("input:not(:checked)")
结果:
[ <input name="apple" /> ]

[attribute]

概述

匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

参数

attributeStringV1.0

属性名

示例

描述:
查找所有含有 id 属性的 div 元素
HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]

[attribute=value]

概述

匹配给定的属性是某个特定值的元素

参数

attributeStringV1.0

属性名

valueStringV1.0

属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。

[attribute!=value]

概述

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

此选择器等价于:not([attr=value])<br>要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

[attribute^=value]

概述

匹配给定的属性是以某些值开始的元素

[attribute$=value]

概述

匹配给定的属性是以某些值结尾的元素

[attribute*=value]

概述

匹配给定的属性是以包含某些值的元素

[selector1][selector2][selectorN]

V1.0概述

复合属性选择器，需要同时满足多个条件时使用。

示例

描述:

查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

:input

匹配所有 input, textarea, select 和 button 元素

示例

描述:
查找所有的input元素，下面这些元素都会被匹配到。
HTML 代码:
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="p_w_picpath" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
jQuery 代码:
$(":input")
结果:
[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,
    <input type="file" />,
    <input type="hidden" />,
    <input type="p_w_picpath" />,
    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,
    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,
    <textarea></textarea>,
    <button>Button</button>,
    ]

:text

匹配所有的单行文本框

:password

匹配所有密码框

:radio

匹配所有单选按钮

:checkbox

匹配所有复选框

:submit

匹配所有提交按钮

:button

匹配所有按钮

:file

匹配所有文件域

each(callback)

概述

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

参数

callback Function

对于每个匹配的元素所要执行的函数

示例
描述:
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
结果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery对象，可以使用 $(this) 函数。
HTML 代码:
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>
jQuery 代码:
$("img").each(function(){
  $(this).toggleClass("example");
});
描述:
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>
jQuery 代码:
$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

length

jQuery 对象中元素的个数。

当前匹配的元素个数。 <span title="Core/size">size</span> 将返回相同的值。

示例

描述:
计算文档中所有图片数量
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").length;
结果:
2

size()

V1.0概述

jQuery 对象中元素的个数。

这个函数的返回值与 jQuery 对象的'<span title="Core/length">length</span>' 属性一致。

示例
描述:
计算文档中所有图片数量
HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>
jQuery 代码:
$("img").size();
结果:
2

################################

属性

attr(name|properties|key,value|fn)

概述

设置或返回被选元素的属性值。

参数

nameStringV1.0

属性名称

propertiesMapV1.0

作为属性的“名/值对”对象

key,valueString,ObjectV1.0

属性名称，属性值

key,function(index, attr)String,FunctionV1.1

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

示例

参数name 描述:

返回文档中所有图像的src属性值。

jQuery 代码:

$("img").attr("src");

参数properties 描述:

为所有图像设置src和alt属性。

jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:

为所有图像设置src属性。

jQuery 代码:

$("img").attr("src","test.jpg");

参数key,回调函数描述:

把src属性的值设置为title属性的值。

jQuery 代码:

$("img").attr("title", function() { return this.src });

removeAttr(name)

概述

从每一个匹配的元素中删除一个属性

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);

1.7版本在IE6下已支持删除disabled。

参数

nameStringV1.0

要删除的属性名

示例

描述:

将文档中图像的src属性删除

HTML 代码:

jQuery 代码:

$("img").removeAttr("src");

结果:

[ <img /> ]

prop(name|properties|key,value|fn)

概述

获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数

nameStringV1.6

属性名称

propertiesMapV1.6

作为属性的“名/值对”对象

key,valueString,ObjectV1.6

属性名称，属性值

key,function(index, attr)String,FunctionV1.6

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

示例

参数name 描述:

选中复选框为true，没选中为false

jQuery 代码:

$("input[type='checkbox']").prop("checked");

参数properties 描述:

禁用页面上的所有复选框。

jQuery 代码:

$("input[type='checkbox']").prop({

disabled: true

});

参数key,value 描述:

禁用和选中所有页面上的复选框。

jQuery 代码:

$("input[type='checkbox']").prop("disabled", false);

$("input[type='checkbox']").prop("checked", true);

参数key,回调函数描述:

通过函数来设置所有页面上的复选框被选中。

jQuery 代码:

$("input[type='checkbox']").prop("checked", function( i, val ) {

return !val;

});

removeProp(name)

概述

用来删除由.prop()方法设置的属性集

参数

propertyNameStringV1.6

要删除的属性名

示例

描述:

设置一个段落数字属性，然后将其删除。

HTML 代码:

jQuery 代码:

var $para = $("p");

$para.prop("luggageCode", 1234);

$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");

$para.removeProp("luggageCode");

$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

结果:

The secret luggage code is: 1234. Now the secret luggage code is: undefined.

addClass(class|fn)

概述

为每个匹配的元素添加指定的类名。

参数

classStringV1.0

一个或多个要添加到元素中的CSS类名，请用空格分开

function(index, class)FunctionV1.4

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

为匹配的元素加上 'selected' 类

jQuery 代码:

$("p").addClass("selected");

$("p").addClass("selected1 selected2");

回调函数描述:

给li加上不同的class

HTML 代码:

<ul>

<li>Hello</li>

</ul>

jQuery 代码:

$('ul li:last').addClass(function() {

return 'item-' + $(this).index();

});

removeClass([class|fn])

概述

从所有匹配的元素中删除全部或者指定的类。

参数

classStringV1.0

一个或多个要删除的CSS类名，请用空格分开

function(index, class)FunctionV1.4

此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例

参数class 描述:

从匹配的元素中删除 'selected' 类

jQuery 代码:

$("p").removeClass("selected");

参数class 描述:

删除匹配元素的所有类

jQuery 代码:

$("p").removeClass();

回调函数描述:

删除最后一个元素上与前面重复的class

jQuery 代码:

$('li:last').removeClass(function() {

return $(this).prev().attr('class');

});

toggleClass(class|fn[,sw])

概述

如果存在（不存在）就删除（添加）一个类。

参数

classStringV1.0

CSS类名

class,switchString,BooleanV1.3

1:要切换的CSS类名.

2:用于决定元素是否包含class的布尔值。

switchBooleanV1.4

用于决定元素是否包含class的布尔值。

function(index, class,switch)[, switch] Function,BooleanV1.4

1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

2: 一个用来判断样式类添加还是移除的 boolean 值。

示例

参数class 描述:

为匹配的元素切换 'selected' 类

jQuery 代码:

$("p").toggleClass("selected");

参数class,switch 描述:

每点击三下加上一次 'highlight' 类

HTML 代码:

<strong>jQuery 代码:</strong>

jQuery 代码:

var count = 0;

$("p").click(function(){

$(this).toggleClass("highlight", count++ % 3 == 0);

});

回调函数描述:

根据父元素来设置class属性

jQuery 代码:

$('div.foo').toggleClass(function() {

if ($(this).parent().is('.bar') {

return 'happy';

} else {

return 'sad';

}

});

html([val|fn])

概述

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

参数

valStringV1.0

用于设定HTML内容的值

function(index, html)FunctionV1.4

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

示例

无参数描述:

返回p元素的内容。

jQuery 代码:

$('p').html();

参数val 描述:

设置所有 p 元素的内容

jQuery 代码:

$("p").html("Hello <b>world</b>!");

回调函数描述:

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(n){

return "这个 p 元素的 index 是：" + n;

});

text([val|fn])

概述

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

参数

valStringV1.0

用于设置元素内容的文本

function(index, text)FunctionV1.4

此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

示例

无参数描述:

返回p元素的文本内容。

jQuery 代码:

$('p').text();

参数val 描述:

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

回调函数描述:

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

$("p").text(function(n){

return "这个 p 元素的 index 是：" + n;

});

val([val|fn|arr])

概述

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

参数

valStringV1.0

要设置的值。

function(index, value)FunctionV1.4

此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

arrayArray<String>V1.0

用于 check/select 的值

示例

无参数描述:

获取文本框中的值

jQuery 代码:

$("input").val();

参数val 描述:

设定文本框的值

jQuery 代码:

$("input").val("hello world!");

回调函数描述:

设定文本框的值

jQuery 代码:

$('input:text.items').val(function() {

return this.value + ' ' + this.className;

});

参数array 描述:

设定一个select和一个多选的select的值

HTML 代码:

<option>Single</option>

<option>Single2</option>

</select>

<option selected="selected">Multiple</option>

<option>Multiple2</option>

<option selected="selected">Multiple3</option>

</select><br/>

<input type="checkbox" value="check1"/> check1

<input type="checkbox" value="check2"/> check2

<input type="radio" value="radio1"/> radio1

<input type="radio" value="radio2"/> radio2

jQuery 代码:

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check2", "radio1"]);

css(name|pro|[,val|fn])

概述

访问匹配元素的样式属性。

参数

nameStringV1.0

要访问的属性名称

propertiesMapV1.0

要设置为样式属性的名/值对

name,valueString, NumberV1.4

属性名,属性值

name,function(index, value)String,FunctionV1.0

1:属性名

2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

示例

参数name 描述:

取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");

参数properties 描述:

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$("p").css({ color: "#ff0011", background: "blue" });

参数name,value 描述:

将所有段落字体设为红色

jQuery 代码:

$("p").css("color","red");

参数name,回调函数描述:

逐渐增加div的大小

jQuery 代码:

$("div").click(function() {

$(this).css({

width: function(index, value) {

return parseFloat(value) * 1.2;

height: function(index, value) {

return parseFloat(value) * 1.2;

}

});

eq(index|-index)

概述

获取第N个元素

参数

indexIntegerV1.1.2

一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

-indexIntegerV1.4

一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

示例

参数index描述:

获取匹配的第二个元素

HTML 代码:

jQuery 代码:

$("p").eq(1)

结果:

[ <p> So is this</p> ]

参数-index描述:

获取匹配的第二个元素

HTML 代码:

jQuery 代码:

$("p").eq(-2)

结果:

[ <p> This is just a test.</p> ]

first()

V1.4概述

获取第一个元素

示例

描述:

获取匹配的第一个元素

HTML 代码:

<ul>

</ul>

jQuery 代码:

$('li').first()

结果:

[ <li>list item 1</li> ]

last()

V1.4概述

获取最后个元素

示例

描述:

获取匹配的最后个元素

HTML 代码:

<ul>

</ul>

jQuery 代码:

$('li').last()

结果:

[ <li>list item 5</li> ]

children([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

参数

exprStringV1.0

用以过滤子元素的表达式

示例

描述:

查找DIV中的每个子元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

描述:

在每个div中查找 .selected 的类。

HTML 代码:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:

$("div").children(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

closest(expr,[con]|obj|ele)

概述

jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

closest对于处理事件委托非常有用。

参数

exprString,ArrayV1.3

用以过滤元素的表达式。jQuery 1.4开始，也可以传递一个字符串数组，用于查找多个元素。

expr,[context]StringV1.4

expr：用以过滤子元素的表达式

context：DOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

jQuery object objectV1.6

一个用于匹配元素的jQuery对象

elementDOMElementV1.6

一个用于匹配元素的DOM元素。

示例

描述:

展示如何使用clostest查找多个元素

HTML 代码:

jQuery 代码:

$("li:first").closest(["ul", "body"]);

结果:

[ul, body]

描述:

展示如何使用clostest来完成事件委托。

HTML 代码:

<ul>

<li><b>Click me!</b></li>

<li>You can also <b>Click me!</b></li>

</ul>

jQuery 代码:

$(document).bind("click", function (e) {

$(e.target).c

find(expr|obj|ele)

概述

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数

exprStringV1.0

用于查找的表达式

jQuery object objectV1.6

一个用于匹配元素的jQuery对象

elementDOMElementV1.6

一个DOM元素

示例

描述:

从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:

<p><span>Hello</span>, how are you?</p>

jQuery 代码:

$("p").find("span")

结果:

[ <span>Hello</span> ]

next([expr])

概述

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

参数

exprStringV1.0

用于筛选的表达式

示例

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

描述:

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

nextAll([expr])

概述

查找当前元素之后所有的同辈元素。

可以用表达式过滤

参数

exprStringV1.2

用来过滤的表达式

示例

描述:

给第一个div之后的所有元素加个类

HTML 代码:

jQuery 代码:

$("div:first").nextAll().addClass("after");

结果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

nextUntil([exp|ele][,fil])

概述

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。

参数

[expr][,filter]String,StringV1.4

expr: 用于筛选祖先元素的表达式。

filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]DOMElement,StringV1.6

element: 用于筛选祖先元素的DOM元素。

filter: 一个字符串，其中包含一个选择表达式匹配元素。

示例

描述:

给#term-2后面直到dt前的元素加上红色背景

HTML 代码:

<dl>

<dd>definition 1-a</dd>

<dd>definition 1-b</dd>

<dd>definition 1-c</dd>

<dd>definition 1-d</dd>

<dd>definition 2-a</dd>

<dd>definition 2-b</dd>

<dd>definition 2-c</dd>

<dd>definition 3-a</dd>

<dd>definition 3-b</dd>

</dl>

jQuery 代码:

$('#term-2').nextUntil('dt').css('background-color', 'red');

var term3 = document.getElementById("term-3");

$("#term-1").nextUntil(term3, "dd").css("color", "green");

结果:

term 1

definition 1-a

definition 1-b

definition 1-c

definition 1-d

term 2

definition 2-a

definition 2-b

definition 2-c

term 3

definition 3-a

definition 3-b

parent([expr])

概述

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

参数

exprStringV1.0

用来筛选的表达式

示例

描述:

查找每个段落的父元素

HTML 代码:

<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:

$("p").parent()

结果:

[ <div><p>Hello</p><p>Hello</p></div>]

描述:

查找段落的父元素中每个类名为selected的父元素。

HTML 代码:

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

jQuery 代码:

$("p").parent(".selected")

结果:

[ <div class="selected"><p>Hello Again</p></div> ]

parents([expr])

概述

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

参数

exprStringV1.0

用于筛选祖先元素的表达式

示例

描述:

找到每个span元素的所有祖先元素。

HTML 代码:

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

jQuery 代码:

$("span").parents()

描述:

找到每个span的所有是p元素的祖先元素。

jQuery 代码:

$("span").parents("p")

parentsUntil([exp|ele][,fil])

概述

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

参数

[expr][,filter]String,StringV1.4

expr: 用于筛选祖先元素的表达式

filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]DOMElement,StringV1.6

element:用于筛选祖先元素的DOM元素

filter: 一个字符串，其中包含一个选择表达式匹配元素。

示例

描述:

查找item-a的祖先，但不包括level-1

HTML 代码:

<li class="item-ii">II

<li class="item-b">B

</ul>

</li>

</ul>

</li>

</ul>

jQuery 代码:

$('li.item-a').parentsUntil('.level-1')

.css('background-color', 'red');

c([expr])

概述

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

参数

exprStringV1.0

用于筛选前一个同辈元素的表达式

示例

描述:

找到每个段落紧邻的前一个同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("p").prev()

结果:

[ <div><span>Hello Again</span></div> ]

描述:

找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("p").prev(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

prevAll([expr])

概述

查找当前元素之前所有的同辈元素

可以用表达式过滤。

参数

exprStringV1.2

用于过滤的表达式

示例

描述:

给最后一个之前的所有div加上一个类

HTML 代码:

jQuery 代码:

$("div:last").prevAll().addClass("before");

结果:

[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

prevUntil([exp|ele][,fil])

概述

查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。

参数

[expr][,filter]String,StringV1.4

expr: 用于筛选祖先元素的表达式

filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]DOMElement,StringV1.6

element:用于筛选祖先元素的DOM元素

filter: 一个字符串，其中包含一个选择表达式匹配元素。

示例

描述:

给#term-2前面直到dt前的元素加上红色背景

HTML 代码:

<dl>

<dd>definition 1-a</dd>

<dd>definition 1-b</dd>

<dd>definition 1-c</dd>

<dd>definition 1-d</dd>

<dd>definition 2-a</dd>

<dd>definition 2-b</dd>

<dd>definition 2-c</dd>

<dd>definition 3-a</dd>

<dd>definition 3-b</dd>

</dl>

jQuery 代码:

$('#term-2').prevUntil('dt').css('background-color', 'red');

siblings([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

参数

exprStringV1.0

用于筛选同辈元素的表达式

示例

描述:

找到每个div的所有同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

描述:

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("div").siblings(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

转载于:https://blog.51cto.com/timesnotes/1745489