weixin_33896726
weixin_33896726

jQuery学习笔记（一）

JQuery官方网站是www.//jquery.com/。可以下载最新版的JQuery文件。

 

JQuery的代码风格

JQuery库中 $是 JQuery 的一种简写 $("#foo") 与 jQuery("#foo") 等价

链式操作风格，行为和内容分离。

 

JQuery对象和DOM对象

  • DOM对象

var domObj = document.getElementById("id");//获得DOM对象

var ObjHTML = domObj.innerHTML; //使用Javascript 中的属性---innerHTML 

  • jQuery对象

jquery对象就是通过jquery包装DOM对象后产生的对象。

 $("#foo").html(); //获取id为foo的元素内的 html 代码。

 

var $variable = jQuery对象

 

var variable = DOM对象
  • JQuery对象转成DOM对象

1.

var $cr = $("#cr"); //jquery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked) //检测这个checkedbox是否被选中了

 

2.

var $cr = $("#cr"); //jquery对象
var cr = $cr.get(0); //DOM对象
alert（cr.checked）//检测这个checkbox是否被选中了
  • DOM对象转成jQuery对象
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象

 

 

jQuery选择器 （jQuery 选择器大全）

CSS选择器找到元素后是添加样式，而jquery选择器找到元素后是添加行为

  • 基本选择器

通过元素id、class和标签名等来查找DOM元素。

选择器 描述 返回 示例
#id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素
element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的

元素
* 匹配所有元素 集合元素 $("*")选取所有元素

selector1,selector2,....

selectorN

将每个选择器匹配到的元素合并后

一起返回

 集合元素

$("div,span,p,myClass")选取所有

,

和拥有class为myClass的

标签的一组元素

 

 

 

 

 

 

 

 

 

 

  • 层次选择器
选择器 描述 返回 示例
$("ancestor descendant") 选取ancestor元素里的所有descendant（后代）元素 集合元素 $("div span")选取
里所有的元素
$("parent>child")

选取parent元素下的child（子）元素，

与$("ancestor descendant")有区别，

$("ancestor descendant")选择的是后代元素

 集合元素

 $("div>span")选取

元素下元素名是

的子元素
 $("prev+next")  选取紧接在prev元素后的next元素 集合元素

$(".one+div")选取class为one的

下一个

同辈元素

  $("prev~siblings") 选取prev元素之后的所有siblings元素 集合元素

 $("#two~div")选取id为two的元素后面的

所有

同辈元素

 

 

 

 

 

 

 

 

 

 

 

  • 过滤选择器

通过特定的过滤规则筛选出所需的DOM元素，与CSS中伪类选择器语法相同都以（：）开头。

根据不同过滤规则分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器。

   1.基本过滤选择器

选择器 描述 返回 示例
:first 选取第一个元素 单个元素

$("tr:first")返回所有tr元素的第一个tr元素，

它仍然被保存在集合中
:last 选取最后一个元素 单个元素

$("tr:last")返回所有tr元素的最后一个tr元素，

它仍然被保存在集合中
:not（selector） 去除所有与给定选择器匹配的元素 集合元素

$("input:not(.myClass)")选取class不是

myClass的元素
:even

选取所有元素中偶数的元素,

索引从0开始

 集合元素 $("input:even")选取索引是偶数的元素
:odd

选取所有元素中奇数的元素，

索引从0开始

 集合元素 $("input:odd")选取索引是奇数的元素
:eq(index)

选取指定索引的元素，

索引从0开始

 集合元素 $("input:eq(1)")选取索引等于1的元素
:gt(index)

选取索引大于index的元素，

索引从0开始

 集合元素

$("input:gt(1)")选取索引大于1的元素

（*大于1，而不包括1）
:lt(index)

选取索引小于index的元素，

索引从0开始

 集合元素

$("input:li(1)")选取索引小于1的元素

（*小于1，而不包括1）
:header 选取所有的标题元素，如h1、h2等 集合元素 $(":header")选取网页中所有的

.

...
:animated 选取当前正在执行的所有动画元素 集合元素 $("div:animated")选取正在执行动画的
元素
:focus 选取当前获取焦点的元素 集合元素 $(‘:focus’)选取当前获取焦点的元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  2.内容过滤选择器

选择器 描述 返回 示例
:contains(text) 选取包含text文本内容的元素 集合元素 $("div:contains('我')")选取含有文本“我“的
元素
:empty 选取不包含子元素或者文本节点的空元素 集合元素

 $("div：empty")选取不包含子元素（包括文本元素）

空元素
:has(sselector) 选取含有选择器所匹配的元素的元素 集合元素

$("div:has(p)")选取含有

元素的

元素

:parent 选取含有子元素或文本节点的元素 集合元素

 $("div:parent")选取拥有子元素（包括文本元素）

的

元素

 

 

 

 

 

 

 

 

 

 

   3.可见性过滤选择器

选择器 描述 返回 示例
:hidden
 选取所有不可见元素 集合元素

$(":hidden"）选取所有不可见的元素。包括,

和
等

元素。如果只想选取元素，可以使用$(”input:hidden“)
:visiable
 选择所有可见元素 集合元素

 $("div:visible")选取所有可见的

元素

 

 

 

 

 

 

 

   4.属性过滤选择器

 

选择器 描述 返回 示例
[attribute] 选取拥有此属性的元素 集合元素

$("div[id]")选取拥有属性id的元素
[attribute=value] 选取指定属性值为value的所有元素 集合元素

$("div[title=test]")选取属性title为”test“的

元素
[attribute!=value] 选取属性值不为value的所有元素 集合元素

$("div[title！=test]")选取属性title不等于”test“的

元素

（没有属性title的）
[attribute^=value] 选取属性值以value开始的所有元素 集合元素 $("div[title^=test]")选取属性title以”test“为开头的
元素
[attribute$=value] 选取属性值以value结束的所有元素 集合元素 $("div[title$=test]")选取属性title以”test“为结束的
元素
[attribute*=value] 选取属性值包含value的所有元素 集合元素 $("div[title*=test]")选取属性title含有”test“的
元素
[attribute|=value]

选取属性等于给定字符串或以该字符串为前缀

（该字符串后跟一个连字符”_“）的元素

 集合元素

$("div[title|=”en“]")选取属性title等于en或以en为前缀

（该字符串后跟一个连字符‘_’）的元素
[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 集合元素

$("div[title~="uk"]")选取属性title用空格分隔的值中包含

字符uk的

元素

[attribute 1][attribute 2]

[attribute N]

用属性选择器合并成一个复合属性选择器

，满足多个条件。每选择一次，缩小一次范围

 集合元素

$("div[id][title$='test']")选取属性id,并且属性”test“以“test”

结束的

元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  5.子元素过滤器

 

选择器 描述 返回 示例

:nth-child

(index/even/

odd/equation)

 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 集合元素

:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且

:nth-child（index）中index从1开始，而:eq(index)从0开始
:first-child
 选取每个父元素的第一个子元素 
集合元素

:first只返回单个元素，而:first-child选择符将为每个

父元素匹配第一个子元素

（ex：$("ul li:first-child");选取每个

    中第一个
  • 元素）
:last-child 选取每个父元素的最后一个子元素 集合元素

:last只返回单个元素，而:last-child选择符将为每个

父元素匹配最后一个子元素

（ex：$("ul li:last-child");选取每个

    中最后一个
  • 元素）
:only-child

如果某个元素是它父元素中惟一的子元素，

那么将会被匹配。如果父元素中含有其他元素，则不会被匹配

 集合元素 $("ul li:only-child")在
    中选取是惟一子元素的
  • 元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

// :nth-child()选择器

a) nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。
b) nth-child(2)：能选取每个父元素下的索引值为 2 的元素。
c) nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数的元素。 (n从1开始)
d) nth-child(3n + 1)：能选取每个父元素下的索引值是 3n + 1的元素。(n从1开始)

 

  6.表单对象属性过滤选择器

选择器 描述 返回 示例
:enable 选取所有可用元素 集合元素 $("#form1:enabled");选取id为“form1”的表单内所有可用元素
:disabled 选取所有不可用元素 集合元素 $("#form2:dissabled");选取id为“form2”的表单内所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框） 集合元素 $("input:checked");选取所有被选中的元素
:selected 选取所有被选中的选项元素（下拉列表） 集合元素 $("selecct option:selected");选取所有被选中的选项元素

 

 

 

 

 

  • 表单选择器

a) “:input”，选取所有、