jQuery学习1

1.

jQuery方法的连缀

 

$("<li>+name+</li>").click(function(){

  

     showText(this);

 

}).appendTo("#"+type);

 

function showText(liNode)

{

    alert($(liNode).text());

 

}

 

2

1)基本选择器:

$("span,#two")

返回的是并集

返回是的:选择 所有的 span 元素和id为two的元素

2)

属性选择器:

$("div[id][name$='man']")

返回的是交集

例如:

 

找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

HTML 代码:

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

jQuery 代码:

$("input[id][name$='man']")

结果:

[ <input id="letterman" name="new-letterman" /> ]

3)

基本过滤选择器:

 

• :first
• :last
• :not
• :even
• :odd
• :eq
• :gt
• :lt
• :header
• :animated

$("div:first"):返回第一个div元素

$("div:not(.one)"):返回class不为one的div元素

$("div:even"):返回偶数行的div元素

$("div:gt(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> ]

4)内容选择器:

$("div:contains('di')")

$("div:empty")

$("div:has(.mini)")

$("div:parent") 等于 $("div:not(:empty)")  

如:选择含有子元素(或者文本元素)的div元素

$("#btn4").click(function(){
     $("div:parent").css("background", "#ffbbaa");
     //$("div:not(:empty)").css("background", "#ffbbaa");
    });

5)层级选择器:看一下帮助文档

  
  
ancestor descendant   :爷爷可以取爸爸和取孙子
parent > child        :父子关系，取不了孙子
prev + next 	    :	如下代码所示
prev ~ siblings       :匹配 prev 元素之后的所有 siblings 元素(所有prev之后的siblings兄弟都可以取)

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