jQuery

jQuery

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

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

示例：

• $(this).hide() - 隐藏当前元素
• $("p").hide() - 隐藏所有p段落
• $("p.test").hide() - 隐藏所有 class="test" 的p段落
• $("#test").hide() - 隐藏所有 id="test" 的元素
• $("h1,h2,h3,h4,h5").css("color","blue") - 设置多种标签使用一种样式

节点选择

层级选择器使用

$("ul li").css();//获取ul中的所有li子节点
$("ul > li").css();//获取ul的直接子li节点  
$("ul + li").css();//紧邻ul后的第一个li节点  
$("ul ~ li").css();//获取ul后所有兄弟li节点 

基本筛选选择器

  :fisrt//获取第一个元素
  $("ul li:first").css();//获取ul中第一个li

  :not//去除所有与给定选择器匹配的元素
  $("ul li:not(:checked)");//查找所有未选中的input元素

  :last//获取最后一个元素
  $("ul li:last").css();//获取ul中最后一个li

  :even//匹配所有索引值为偶数的元素，从0开始计数
  $("ul li:even").css();//获取ul中的偶数li元素，第1行开始为0，偶数

  :odd//匹配所有索引值为奇数的元素，从0开始计数
  $("ul li:odd").css();//获取ul中的奇数li元素
  
  :eq//匹配一个给定索引值的元素,从0开始,第一行为0
  $("ul li:eq(1)");

  :gt//匹配所有大约给定索引值的元素，从第0行开始
  $("ul li:gt(0)");
  
  :it //匹配所有小于给定索引值的元素,从0开始计数  
  $("ul li:it(2)");
  
  :lang //选择指定语言的所有元素
  /*:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。
  例如，选择器$("div:lang(en)")将匹配
 and 
（和他们的后代
），但不包括
*/
  $("ul li:lang(it)");

  :header //匹配h1,h2,h3之类的标题元素
  $(":header").css("background","#EEE);

  :animated //选择当前的动画元素 
  $(":animated");

  :focus //匹配当前获取焦点的元素
  
  :root //选择该文档的根元素
  //在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是元素。

内容选择器

    :contains(text) //匹配包含给定文本的元素
    //查找所有包含"John"的div元素
    $("div:contains('John')");
    
    :empty //匹配所有不包含子元素或者文本的空元素
    $("td:empty");

    :has(selector) //匹配含有选择器所匹配的元素的元素,selector:一个用于筛选的选择器
    //给所有包含p元素的div元素添加一个test类
    $("div:has(p)").addClass("test");

    :parent //匹配含有子元素或者文本的元素
    //查找所有含有子元素或者文本的td元素
    $("td:parent");

可见性

    :hidden //匹配所有不可见元素，或者type为hidden的元素
    //查找隐藏的tr
    $("tr:hidden");
    
    :visible //匹配所有的可见元素
    $("tr:visible");    

属性

    [attribute] //匹配包含给定属性的元素。
    //查找所有含有id属性的div元素
    $("div[id]");

    [attribute=value] //匹配给定的属性是某个特定值的元素
    $("input[name='uname']");

    [attribute!=value] //匹配所有不含有指定的属性，或者属性不等于特定值的元素
    $("input[name!='uname']");

    [attribute^=value] //匹配给定的属性是以某些值开始的元素
    //查找所有name属性值中包含news的input元素
    $("input[name^='news']");

    [attribute$=value] //匹配给定的属性是以某些值结尾的元素
    //查找所有name以'letter'结尾的input元素
    $("input[attribute$='letter']");

    [attribute*=value] //匹配给定的属性是以包含某些值的元素
    //查找所有name包含'man'的input元素
    $("input[name*='man']");

    [attrSel1][attrSel2][attrSelN] //复合属性选择器，需要同时满足多个条件时使用
    //找到所有含有id属性，并且它的name属性是以man结尾的input元素
    $("input[id][name$='man']");

子元素

:first-child //匹配第一个子元素，为每个父元素匹配一个子元素
$("ul li:first-child");

:first-of-type
//查找作为父元素的span类型子元素中的"长子"的span标签
$("span:first-of-type");

:last-child //匹配每个父元素的一个子元素

:last-of-tupe

:nth-child(2) //匹配父元素下的第N个子或奇偶元素，从1开始
//在每个ul中查找第2个li
$("ul li:nth-child(2)");

:nth-last-child(n|even|odd|formula) //选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
//倒数第几个子元素
/*
n 匹配子元素序号 必须是整数，从1开始而不是0
even 匹配所有偶数元素
odd 匹配所有技术元素
formula 使用特殊公式如(an+b)进行选择，例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素
*/

:nth-last-of-type(n|even|odd|formula)
//选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

:nth-of-type(n|even|odd|formula)//选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。

:only-child //如果某个元素是父元素中唯一的子元素，那将会被匹配
//在ul中查找是唯一子元素的li
$("ul li:only-child");

:only-of-type //选择所有没有兄弟元素，且具有相同的元素名称的元素。

表单

:input //匹配所有input，textarea，select和button元素
:text //匹配所有的单行文本框
:password //匹配所有密码框
:radio //匹配所有的单选按钮
:checkbox //匹配所有的复选框
:submit //匹配所有提交按钮
:image //匹配所有图像域
:rest //匹配所有重置按钮
:button //匹配所有按钮
:file //匹配所有文件域

表单对象属性

:enabled //匹配所有可用元素
:disabled //匹配所有不用元素
:checked //匹配所有选中的被选中的元素(复选框、单选框等，select中的option，对于select元素来说，获取选中推荐使用 :selected)
:selected //匹配所有选中的option元素

jQuery对象访问

each(callback) //以每一个匹配的元素作为上下文来执行一个函数
size() //jQuery对象中元素的个数，与length返回值相同
length() //jQuery对象中元素的个数
selector() //返回传给jQuery()的原始选择器，确定查询的选择器
context //返回传个jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
get([index]) //取得其中一个匹配的元素。
/*[index] 取得第index个位置上的元素
get() 取得所有匹配的DOM元素集合*/

index([selector|element]) //搜素匹配的元素，并返回相应的索引值，从0开始计数

数据缓存

data([key],[value]) //在元素上存放或读取数据，返回jQuery对象
removeData([name|list]) //在元素上移除存放的数据

属性选择器

姓名：

年龄：

电话：

邮箱：

地址：

---

属性

属性

attr(name|properties|key,value|fn) //设置或返回被选元素的属性值
name: 属性名称
properties: 作为属性的"名/值对"对象
key,value: 属性名称，属性值
key,function(index,attr): 
1:属性名称。
2:返回属性值的函数,第一8个参数为当前元素的索引值，第二个参数为原先的属性值。

removeAttr(name) //从每一个匹配的元素中删除一个属性

prop(name|properties|key,value|fn)  //获取在匹配元素集中的第一个元素的属性值

removeProp(name) //删除prop()方法设置的属性集

CSS类

addClass(class|fn) //为每个匹配的元素添加指定的类名
removeClass([class|fn]) //从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw]) //如果存在(不存在)就删除(添加)一个类

HTML代码/文本/值

html([val|fn]) //取得或设置第一个匹配元素的html内容。
text([val|fn]) //取得或设置所有匹配元素的内容。
val([val|fn|arr]) //获取或设置匹配元素的当前值

文档处理

append(content|fn) //向每个匹配的元素内容追加内容