前端之 JQuery

一.基本选择器

1.#id

概述:

根据给定的ID匹配一个元素。

使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\。 参见示例。

参数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> ]

2.element

概述:

根据给定的元素标签名匹配所有元素

参数element:

一个用于搜索的元素。指向 DOM 节点的标签名。

需求：

查找一个 DIV 元素。

实例：

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3.class  

概述:

根据给定的css类名匹配元素。

参数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> ]

 4.* 

概述:

匹配所有元素

多用于结合上下文来搜索。

需求：

找到每一个元素

实例：

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

 5.selector1,selector2,selectorN

概述:

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

参数:

制定多个select选择器

需求：

找到匹配任意一个类的元素

实例：

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

二.层级选择器

1.ancestor descendant 

概述:

在给定的祖先元素下匹配所有的后代元素

参数:

ancestor：任何有效选择器

descendant：用以匹配元素的选择器，并且它是第一个选择器的后代元素

需求：

找到表单中所有的 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" />, <input name="newsletter" /> ]

 2.parent > child 

概述:

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

参数:

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" /> ]

 

 3.prev ~ siblings

概述:

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

参数:

pre: 任何有效选择器 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" /> ]

 三.筛选器

1.children([expr])

概述:

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

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

参数:

用以过滤子元素的表达式

需求:

查找DIV中的每个子元素。

实例1：

HTML 代码:

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

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

实例2：

需求：在每个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> ]

 

2.next([expr]) 

概述:

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

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

参数:

用于筛选的表达式

需求:

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

实例1：

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> ]

实例2：

需求：找到每个段落的后面紧邻的同辈元素中类名为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> ]

 3.nextAll([expr]) 

概述:

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

可以用表达式过滤

参数:

用来过滤的表达式

需求:

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

实例1：

HTML 代码: 

<div></div><div></div><div></div><div></div>

jQuery 代码:

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

结果:

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

4. parent([expr]) 

概述:

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

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

参数:

用来筛选的表达式

需求:

查找每个段落的父元素

实例1：

HTML 代码: 

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

jQuery 代码:

$("p").parent()

结果:

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

实例2：

需求：

查找段落的父元素中每个类名为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> ]

 5.prev([expr])

概述:

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

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

参数:

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

需求:

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

实例1：

HTML 代码: 

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

jQuery 代码:

$("p").prev()

结果:

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

实例2：

需求：

找到每个段落紧邻的前一个同辈元素中类名为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> ]

 6.prevall([expr])

概述:

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

可以用表达式过滤。

参数:

用于过滤的表达式

需求:

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

实例1：

HTML 代码: 

<div></div><div></div><div></div><div></div>

jQuery 代码:

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

结果:

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

 四.属性

prop(n|p|k,v|f)

概述:

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

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

参数:

name:  属性名称

选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");

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

禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
  disabled: true
});

key,vale:属性名称，属性值

禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

key,function(index,attr):

通过函数来设置所有页面上的复选框被选中.
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

1:属性名称。

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

 5.JQuery CSS相关

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

概述:

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

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

参数:

name:要访问的属性名称 或 一个或多个CSS属性组成的一个数组 

取得第一个段落的color样式属性的值。
$("p").css("color"); 

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

将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });

name,value：属性名,属性值

将所有段落字体设为红色
$("p").css("color","red");

name,function(index,value)：

1:属性名

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

 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

 

 2.scrollTop([val])

概述:

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

参数:

val:设定垂直滚动条值

实例1：

HTML 代码: 

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

 

　无参数：获取第一段相对滚动条顶部的偏移

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
有参数val:设置相对滚动条顶部的偏移

　　$("div.demo").scrollTop(300);

结果:

<p>Hello</p><p>scrollTop: 0</p>

 6.文档处理

1. 内部插入：append(content|fn)：

概述:

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

参数:

content:要追加到目标中的内容

function(index,html):返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

实例1：

需求：

向所有段落中追加一些HTML标记。

HTML 代码: 

<p>I would like to say: </p>

jQuery 代码:

$("p").append("<b>Hello</b>");

结果:

[ <p>I would like to say: <b>Hello</b></p> ] 

 2.删除

1）empty()

概述:删除匹配的元素集合中所有的子节点。

实例1：

需求：

把所有段落的子元素（包括文本节点）删除

HTML 代码: 

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果：

<p></p>

 

 2） remove([expr])

概述:

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

参数:

 用于筛选元素的jQuery表达式

实例1：

需求：从DOM中把所有段落删除

HTML 代码:

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

jQuery 代码:

$("p").remove();

结果:

how are

实例2：

需求：从DOM中把带有hello类的段落删除

HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove(".hello");

结果:

how are <p>you?</p>