jQuery

所有jQuery详细使用说明请见：http://www.php100.com/manual/jquery/

 

jQuery的作用是操作浏览器html，从而达到用户的可视化效果，按照功能可分为三大类:

• 找
  • 选择器
  • 筛选
• 操作
  • 属性
  • css
  • 文档
• 其它
  • 时间
  • Ajax
  • json
  • ......

$符号：$就相当于jQuery这个模块 $(.class) = jQuery(.class)

 

 1、找

1.1选择器

基本：

#id

用于搜索的，通过元素的 id 属性中给定的值

1 查找 ID 为"myDiv"的元素。 2 HTML 代码: 3 
      
       
id="notMe"
      
 4 
      
       id="myDiv"
      
 5  6 jQuery 代码: 7 $("#myDiv"); 8  9 结果:10 [ 
      
       id="myDiv"
      
 ]

 element(标签)

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

1 描述: 2 查找一个 DIV 元素。 3  4 HTML 代码: 5 
      
       DIV1
      
 6 
      
       DIV2
      
 7 SPAN 8  9 jQuery 代码:10 $("div");11 12 结果:13 [ 
      
       DIV1
      
, 
      
       DIV2
      
 ]

.class

一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

1 描述: 2 查找所有类是 "myClass" 的元素. 3  4 HTML 代码: 5 
      
       div class="notMe"
      
 6 
      
       div class="myClass"
      
 7 span class="myClass" 8  9 jQuery 代码:10 $(".myClass");11 12 结果:13 [ 
      
       div class="myClass"
      
, span class="myClass" ]

组合选择器：

空格：  层级关系

逗号：and，多项匹配

 

属性：

[attribute]

匹配包含给定属性的元素。

1 描述: 2 查找所有含有 id 属性的 div 元素 3  4 HTML 代码: 5 
      
        6   
       
Hello!
 7 
      
 8 
      
 9 10 jQuery 代码:11 $("div[id]")12 13 结果:14 [ 
      
 ]

[attribute=value]

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

1 描述: 2 查找所有 name 属性是 newsletter 的 input 元素 3  4 HTML 代码: 5  6  7  8  9 jQuery 代码:10 $("input[name='newsletter']").attr("checked", true);11 12 结果:13 [ ,  ]

以此类推其它的几个属性:

[attribute！=value]

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

[attribute^=value]

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

[attribute$=value]

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

[attribute*=value]

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

 

 

子元素：

：nth-child

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0算起的！

可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

1 描述: 2 在每个 ul 查找第 2 个li 3  4 HTML 代码: 5 
      
        6   
       
John
 7   
       
Karl
 8   
       
Brandon
 9 
      
10 
      
       11   
       
Glen
12   
       
Tane
13   
       
Ralph
14 
      
15 16 jQuery 代码:17 $("ul li:nth-child(2)")18 19 结果:20 [ 
Karl
,   
Tane
 ]

：first-child   匹配第一个子元素

：last-child   匹配最后一个子元素

：only-child  如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。

 

表单：

专属于Input标签里的属性

写法：   $(":text") = $("input[type=text]")

：input

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

1 描述: 2 查找所有的input元素，下面这些元素都会被匹配到。 3 HTML 代码: 4 
      
        5     
        6     
        7  8     
        9     
       10     
       11 12     
       13     
       14     
       15 16     
       17     
       18     
       Option19 20     
       21     
       Button22 23 
      
24 jQuery 代码:25 $(":input")26 结果:27 [ 28     ,29     ,30 31     ,32     ,33     ,34 35     ,36     ,37     ,38 39     ,40     ,41     Option,42 43     ,44     Button,45  ]

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button   匹配所有按钮

1 描述: 2 查找所有按钮. 3  4 HTML 代码: 5 
      
        6   
        7   
        8   
        9   
       10   
       11   
       12   
       13   
       14   
       15   
       16   
       17   
       18 
      
19 20 jQuery 代码:21 $(":button")22 23 结果:24 [ , ]

:file

:hidden

 

表单对象属性

：checked     匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

1 描述： 2 查找所有选中的复选框元素 3  4 HTML 代码: 5 
      
        6   
        7   
        8   
        9 
      
10 11 jQuery 代码:12 $("input:checked")13 14 结果:15 [ ,  ]

:enabled    匹配所有可用元素

:display    匹配所有不可用元素

:selected    匹配所有选中的option元素

 

1.2筛选

 过滤

eq(index|-index)

获取第N个元素  与选择器里面的eq类似，都是从0算起。

不同：筛选的.eq(1) 是整数类型  而选择的 ”:eq(1)“ 是字符串

在为一个函数传参数时，筛选的整数传参方式就简单很多，而选择器的字符串需要拼接

1 参数index描述: 2 获取匹配的第二个元素 3  4 HTML 代码: 5 
 This is just a test.
 
 So is this
 6  7 jQuery 代码: 8 $("p").eq(1) 9 10 结果:11 [ 
 So is this
 ]12 13 14 参数-index描述:15 获取匹配的第二个元素16 17 HTML 代码:18 
 This is just a test.
 
 So is this
19 20 jQuery 代码:21 $("p").eq(-2)22 23 结果:24 [ 
 This is just a test.
 ]

hasClass

检查当前的元素是否含有某个特定的类，如果有，则返回true,否则false

map(callback)   

将一组元素转换成其他数组（不论是否是元素数组） callback(给每个元素执行的函数)

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

1 描述：点击编辑，获取其他标签里的值 2  3 html代码： 4 
       
         5         
 6         
          7             
           8                 
 9                 
10                 
11                 
12             
13         
14 
        
        
         
          
1
          
2
          
3
          
编辑
         
        
       
15 16 17 jQuery代码：18 19 function get_prev(arg){20 //            $(arg).siblings()所有兄弟;21 //            循环多个标签中的每一个标签22 //            每一个标签被循环时，都会执行map内部的函数，并获取其返回值23 //            将所有的返回值都封装在一个数组（列表）中24 //            返回列表25 26 //            $(this) 相当于当前循环的每一个标签27             var list= $(arg).siblings().map(function(){28 29                 return $(this).text();30             });31             console.log(list[0],list[2]);32         }

 

 查找

children([expr])

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

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

1 描述: 2 查找DIV中的每个子元素。 3  4 HTML 代码: 5 
Hello
       
        Hello Again
       
And Again
 6  7 jQuery 代码: 8 $("div").children() 9 10 结果:11 [ Hello Again ]12 13 14 描述:15 在每个div中查找 .selected 的类。16 17 HTML 代码:18 
       
        Hello
        
Hello Again
        
And Again
       
19 20 jQuery 代码:21 $("div").children(".selected")22 23 结果:24 [ 
Hello Again
 ]

find(expr|obj|ele)

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

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

1 描述: 2 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。 3  4 HTML 代码: 5 
Hello, how are you?
 6  7 jQuery 代码: 8 $("p").find("span") 9 10 结果:11 [ Hello ]

next([expr])

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

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

1 描述: 2 找到每个段落的后面紧邻的同辈元素。 3  4 HTML 代码: 5 
Hello
Hello Again
       
        And Again
       
 6  7 jQuery 代码: 8 $("p").next() 9 10 结果:11 [ 
Hello Again
, 
       
        And Again
       
 ]12 13 描述:14 找到每个段落的后面紧邻的同辈元素中类名为selected的元素。15 16 HTML 代码:17 
Hello
Hello Again
       
        And Again
       
18 19 jQuery 代码:20 $("p").next(".selected")21 22 结果:23 [ 
Hello Again
 ]

nextAll([expr])

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

可以用表达式过滤

1 描述: 2 给第一个div之后的所有元素加个类 3  4 HTML 代码: 5 
        
        
        
        
 6  7 jQuery 代码: 8 $("div:first").nextAll().addClass("after"); 9 10 结果:11 [ 
        
, 
        
, 
        
 ]

nextUntill

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

1 描述: 2 给#term-2后面直到dt前的元素加上红色背景 3 HTML 代码: 4 
        
          5   
         
          term 1
         
 6   
         
          definition 1-a
         
 7   
         
          definition 1-b
         
 8   
         
          definition 1-c
         
 9   
         
          definition 1-d
         
10 11   
         
          term 2
         
12   
         
          definition 2-a
         
13   
         
          definition 2-b
         
14   
         
          definition 2-c
         
15 16   
         
          term 3
         
17   
         
          definition 3-a
         
18   
         
          definition 3-b
         
19 
        
20 jQuery 代码:21 $('#term-2').nextUntil('dt').css('background-color', 'red');22       23 var term3 = document.getElementById("term-3");24 $("#term-1").nextUntil(term3, "dd").css("color", "green");25 结果:26 term 127 definition 1-a28 definition 1-b29 definition 1-c30 definition 1-d31 term 232 definition 2-a33 definition 2-b34 definition 2-c35 term 336 definition 3-a37 definition 3-b

prev([expr])  向上匹配

prevAll([expr])

prevUntill

parent([expr])

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

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

1 描述: 2 查找每个段落的父元素 3  4 HTML 代码: 5 
         
          
Hello
          
Hello
         
 6  7 jQuery 代码: 8 $("p").parent() 9 10 结果:11 [ 
         
          
Hello
          
Hello
         
]12 13 14 描述:15 查找段落的父元素中每个类名为selected的父元素。16 17 HTML 代码:18 
         
          
Hello
         
         
          
Hello Again
         
19 20 jQuery 代码:21 $("p").parent(".selected")22 23 结果:24 [ 
         
          
Hello Again
         
 ]

parents([expr])

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

1 描述: 2 找到每个span元素的所有祖先元素。 3  4 HTML 代码: 5 
         
          
Hello
          Hello Again
         
 6  7 jQuery 代码: 8 $("span").parents() 9 10 11 描述:12 找到每个span的所有是p元素的祖先元素。13 14 jQuery 代码:15 $("span").parents("p")

parentsUtill

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

1 描述: 2 查找item-a的祖先，但不包括level-1 3 HTML 代码: 4 
         
           5   
          
I
 6   
          
II 7     
           
             8       
            
A
 9       
            
B10         
             
              11           
              
1
12           
              
2
13           
              
3
14         
             
15       
16       
            
C
17     
           
18   
19   
          
III
20 
         
21 jQuery 代码:22 $('li.item-a').parentsUntil('.level-1')23     .css('background-color', 'red');

siblings([expr])

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

1 描述: 2 找到每个div的所有同辈元素。 3 HTML 代码: 4 
Hello
         
          Hello Again
         
And Again
 5 jQuery 代码: 6 $("div").siblings() 7 结果: 8 [ 
Hello
, 
And Again
 ] 9 描述:10 找到每个div的所有同辈元素中带有类名为selected的元素。11 HTML 代码:12 
         
          Hello
         
Hello Again
And Again
13 jQuery 代码:14 $("div").siblings(".selected")15 结果:16 [ 
Hello Again
 ]

 

1.3jQuery中的循环：

$.each(列表数据,function(){

　　函数体;

})

字典为特殊的列表

1 var a = [11,22,33,44]2 3 $.each(a,function(item){4          console.log(a[item]);5 })6 7 a 要循环的列表8 function(ele){}   把列表a中每个循环到的元素去执行function函数9 item: 代表列表中每个循环到的元素的索引值index

1 var d = {'k1':'v1','k2':'v2','k3':'v3'}2 3 $.each(d,function(key,value){4          console.log(key,value);5 })6 7 d 要循环的字典8 function(key,value){}   把字典d中每个循环到的key,value去执行方法9 key,value: 代表字典中每个k,v的值

 

$(列表数据).each(function(){

　　函数体;

　　$(this) = 要循环的每一项

}) 

 

 

1.4属性

属性

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

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

1 参数name 描述: 2 返回文档中所有图像的src属性值。 3  4 jQuery 代码: 5 $("img").attr("src"); 6  7 参数properties 描述: 8 为所有图像设置src和alt属性。 9 10 jQuery 代码:11 $("img").attr({ src: "test.jpg", alt: "Test Image" });12 13 参数key,value 描述:14 为所有图像设置src属性。15 16 jQuery 代码:17 $("img").attr("src","test.jpg");18 19 参数key,回调函数 描述:20 把src属性的值设置为title属性的值。21 22 jQuery 代码:23 $("img").attr("title", function() { return this.src });

removeAttr(name)

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

1 描述: 2 将文档中图像的src属性删除 3  4 HTML 代码: 5  6  7 jQuery 代码: 8 $("img").removeAttr("src"); 9 10 结果:11 [  ]

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

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

复选框)

1 参数name 描述: 2 选中复选框为true，没选中为false 3 jQuery 代码: 4 $("input[type='checkbox']").prop("checked"); 5 参数properties 描述: 6 禁用页面上的所有复选框。 7 jQuery 代码: 8 $("input[type='checkbox']").prop({ 9   disabled: true10 });11 参数key,value 描述:12 禁用和选中所有页面上的复选框。13 jQuery 代码:14 $("input[type='checkbox']").prop("disabled", false);15 $("input[type='checkbox']").prop("checked", true);16 参数key,回调函数 描述:17 通过函数来设置所有页面上的复选框被选中。18 jQuery 代码:19 $("input[type='checkbox']").prop("checked", function( i, val ) {20   return !val;21 });

removeProp(name)

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

 

 

CSS类：

addClass(class|fn)  为每个匹配的元素添加指定的类名。

removeClass(clss|fn)  从所有匹配的元素中删除全部或者指定的类。

toggleClass(class|fn[,sw])   

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

1 参数class 描述: 2 为匹配的元素切换 'selected' 类 3 jQuery 代码: 4 $("p").toggleClass("selected"); 5 参数class,switch 描述: 6 每点击三下加上一次 'highlight' 类 7 HTML 代码: 8 jQuery 代码: 9 jQuery 代码:10   var count = 0;11   $("p").click(function(){12       $(this).toggleClass("highlight", count++ % 3 == 0);13   });14 回调函数 描述:15 根据父元素来设置class属性16 jQuery 代码:17 $('div.foo').toggleClass(function() {18   if ($(this).parent().is('.bar') {19     return 'happy';20   } else {21     return 'sad';22   }23 });

 

HTML代码/文本/值：

text([val|fn])

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

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

1 无参数 描述: 2 返回p元素的文本内容。 3  4 jQuery 代码: 5 $('p').text(); 6  7 参数val 描述: 8 设置所有 p 元素的文本内容 9 10 jQuery 代码:11 $("p").text("Hello world!");12 13 回调函数 描述:14 使用函数来设置所有匹配元素的文本内容。15 16 jQuery 代码:17 $("p").text(function(n){18     return "这个 p 元素的 index 是：" + n;19     });

html([val|fn])

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

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

1 无参数 描述: 2 返回p元素的内容。 3 jQuery 代码: 4 $('p').html(); 5 参数val 描述: 6 设置所有 p 元素的内容 7 jQuery 代码: 8 $("p").html("Hello world!"); 9 回调函数描述:10 使用函数来设置所有匹配元素的内容。11 jQuery 代码:12 $("p").html(function(n){13     return "这个 p 元素的 index 是：" + n;14     });

val(val)

取出input,select,textarea标签中输入的值,

参数为空时为取值，参数存在时为设置值

1 $('#hostname').val(new_list[0]);2 $('#ip').val(new_list[1]);3 $('#port').val(new_list[2]);

1 html代码 2     
         
           3         
           4             男 5             女 6          7         
           8     
         
 9 10 11 jQuery代码：12         function GetValue(){13 //            获取id=name 下value的值14             var w = $('#name').val();15 //            获取id=name下option[value=2]的内容16             var s = $('#name option[value=2]').text();17             console.log(w);18             console.log(s);19         }

 

 

1.5 CSS

 

CSS

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

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

1 参数name 描述: 2 取得第一个段落的color样式属性的值。 3 jQuery 代码: 4 $("p").css("color"); 5 参数properties 描述: 6 将所有段落的字体颜色设为红色并且背景为蓝色。 7 jQuery 代码: 8 $("p").css({ color: "#ff0011", background: "blue" }); 9 参数name,value 描述:10 将所有段落字体设为红色11 jQuery 代码:12 $("p").css("color","red");13 参数name,回调函数 描述:14 逐渐增加div的大小15 jQuery 代码:16   $("div").click(function() {17     $(this).css({18       width: function(index, value) {19         return parseFloat(value) * 1.2;20       }, 21       height: function(index, value) {22         return parseFloat(value) * 1.2;23       }24     });25   });

 

位置

scrollTop([val])

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

1  2  3      4     
         
           5         
          
ww
 6         
          
ww
 7         
          
ww
 8         
          
ww
 9         
          
ww
10         
          
ww
11         
          
ww
12         
          
ww
13         
          
ww
14         
          
ww
15         
          
ww
16         
          
ww
17         
          
ww
18         
          
ww
19         
          
ww
20         
          
ww
21         
          
ww
22         
          
ww
23     
         
24 25     26     

scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。

offset([coordinates])

获取匹配元素在当前视口的相对偏移。相对整个页面的位置

1 获取第二段的偏移量： 2  3  4     
         
 5     
         
          wwwwwww
         
 6     
          7  8  9     10     16 17 18 结果：19 left: 820 top: 150821 22 23 24 25 参数coordinates 描述:26 获取第二段的偏移27 HTML 代码:28 
Hello
2nd Paragraph
29 30 jQuery 代码:31 $("p:last").offset({ top: 10, left: 30 });

position()

获取匹配元素相对父元素的偏移。

1 获取id=d2的标签相对父标签的偏移量： 2  3     
         
 4     
         
           5         
          
           aaaaaaa
          
 6     
         
 7  8      9     

 

 

1.6事件

事件

$(window).scroll()

设置页面加载后，每一次滚动滑轮就触发事件

1  2  3     
         
           4         
          
            5             
           
第一章
 6         
          
 7  8         
          
            9             
           
第二章
10         
          
11 12         
          
           13             
           
第三章
14         
          
15     
         
16 17 18     19     30 

 

 1.7文档处理

内部插入

append(content|fn)

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

1 向所有段落中追加一些HTML标记。 2  3 HTML 代码: 4 
I would like to say: 
 5  6 jQuery 代码: 7 $("p").append("Hello"); 8  9 结果:10 [ 
I would like to say: Hello
 ]

appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

1 描述: 2 把所有段落追加到ID值为foo的元素中。 3 HTML 代码: 4 
I would like to say: 
 5 
         
         
 6 jQuery 代码: 7 $("p").appendTo("div"); 8 结果: 9 
         
          
I would like to say: 
         
10 
         
          
I would like to say: 
         
11 描述:12 新建段落追加div中并加上一个class13 HTML 代码:14 
         
         
15 jQuery 代码:16  $("
")17    .appendTo("div")18    .addClass("test")19    .end()20    .addClass("test2");21 结果:22 
         
          
         
23 
         
          
         

prepend(content)

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

1 描述: 2 向所有段落中前置一些HTML标记代码。 3 HTML 代码: 4 
I would like to say: 
 5 jQuery 代码: 6 $("p").prepend("Hello"); 7 结果: 8 [ 
HelloI would like to say: 
 ] 9 描述:10 将一个DOM元素前置入所有段落11 HTML 代码:12 
I would like to say: 
13 
I would like to say: 
14 Hello15 Good Bye16 jQuery 代码:17 $("p").prepend( $(".foo")[0] );18 结果:19 
HelloI would like to say: 
20 
HelloI would like to say: 
21 Hello22 Good Bye23 描述:24 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。25 HTML 代码:26 
I would like to say: 
Hello27 jQuery 代码:28 $("p").prepend( $("b") );29 结果:30 
HelloI would like to say: 

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

1 描述: 2 把所有段落追加到ID值为foo的元素中。 3  4 HTML 代码: 5 
I would like to say: 
           
 6  7 jQuery 代码: 8 $("p").prependTo("#foo"); 9 10 结果:11 
           
            
I would like to say: 
           

 

外部插入

after(content|fn)

在每个匹配的元素之后插入内容

1 描述: 2 在所有段落之后插入一些HTML标记代码。 3 HTML 代码: 4 
I would like to say: 
 5 jQuery 代码: 6 $("p").after("Hello"); 7 结果: 8 
I would like to say: 
Hello 9 描述:10 在所有段落之后插入一个DOM元素。11 HTML 代码:12 Hello
I would like to say: 
13 jQuery 代码:14 $("p").after( $("#foo")[0] );15 结果:16 
I would like to say: 
Hello17 描述:18 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。19 HTML 代码:20 Hello
I would like to say: 
21 jQuery 代码:22 $("p").after( $("b") );23 结果:24 
I would like to say: 
Hello

before(content|fn)

在每个匹配的元素之前插入内容

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

1 描述:2 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同3 HTML 代码:4 
I would like to say: 
            
             Hello
            
5 jQuery 代码:6 $("p").insertAfter("#foo");7 结果:8 
            
             Hello
            
I would like to say: 

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

 

删除

empty()

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

1 把所有段落的子元素（包括文本节点）删除 2  3 HTML 代码: 4 
Hello, Person and person
 5  6 jQuery 代码: 7 $("p").empty(); 8  9 结果:10 

remove([expr])

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

1 从DOM中把所有段落删除 2 HTML 代码: 3 
Hello
 how are 
you?
 4 jQuery 代码: 5 $("p").remove(); 6 结果: 7 how are 8 描述: 9 从DOM中把带有hello类的段落删除10 HTML 代码:11 
Hello
 how are 
you?
12 jQuery 代码:13 $("p").remove(".hello");14 结果:15 how are 
you?

detach([expr])

1 描述: 2 从DOM中把所有段落删除 3  4 HTML 代码: 5 
Hello
 how are 
you?
 6  7 jQuery 代码: 8 $("p").detach(); 9 10 结果:11 how are12 13 描述:14 从DOM中把带有hello类的段落删除15 16 HTML 代码:17 
Hello
 how are 
you?
18 19 jQuery 代码:20 $("p").detach(".hello");21 22 结果:23 how are 
you?

 

复制

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

1 描述: 2 克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。 3 HTML 代码: 4 Hello
, how are you?
 5 jQuery 代码: 6 $("b").clone().prependTo("p"); 7 结果: 8 Hello
Hello, how are you?
 9 描述:10 创建一个按钮，他可以复制自己，并且他的副本也有同样功能。11 HTML 代码:12 Clone Me!13 jQuery 代码:14 $("button").click(function(){15   $(this).clone(true).insertAfter(this);16 });

 

1.8插件 

jQuery.extend(object)

扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

1 在jQuery命名空间上增加两个函数。2 jQuery 代码:3 jQuery.extend({4   min: function(a, b) { return a < b ? a : b; },5   max: function(a, b) { return a > b ? a : b; }6 });7 结果:8 jQuery.min(2,3); // => 29 jQuery.max(4,5); // => 5

一般扩展jQuery会用自执行函数添加

1 jQuery 代码：2 (function (arg) {3     arg.extend({4         "chenchao": function () {5             return 12345;6         }7     });8 })(jQuery);

两种方式执行方法一样：

1 2 3 

 

 

 

 2、一些其它的知识点

2.1获取JS中的全局变量

window[‘变量名’]

1 STATUS = [ 2     {'id':1,'text':"在线"}, 3     {'id':2,'text':"离线"} 4 ]; 5  6 BUSINESS = [ 7     {'id':1,'text':"二手车"}, 8     {'id':2,'text':"大保健"}, 9     {'id':3,'text':"车商城"}10 ];11 12 传参的形式获取变量：13 var all_val = window[“STATUS”]14 var all_val = window[“BUSINESS”]15 16 17 如果要获取变量里的值可以循环：18 19 $.each(all_val, function (index,value) {20                    value.text;21                     value.id;22                 });23 24 index为all_val值得索引25 value为字典里的值

 

2.2将字符串类型的数字，转换为数字类型

parseInt('123')

 

 2.3三种绑定事件方法

dom绑定

1 HTML代码：2 This is Dom bing event!3 4 jQurey代码:5 function AddCondition(){6             函数体7         }

jQurey绑定

当批量对某一类标签定义事件时使用

1 HTML代码： 2 
         
          This is jQuery bind event!
         
 3  4  5 jQuery代码： 6  7 //        当doc文档加载完毕之后，自动执行此处代码 8         $(function () { 9 10 //            第一种绑定11             $('#js1').click(function () {12                 alert($(this).text());13             });14 15 //            第二种绑定16             $('#js1').bind("click", function () {17                 alert($(this).text());18             })19         });

 

 

 

 

jQuery各种示例：

1  2  3  4     
        5      6     11 12 13 14     
       
        15         
        
         16             
         
          菜单一
         
17             
         
          18                 
          
           1
          
19                 
          
           2
          
20                 
          
           3
          
21             
         
22         
        
23 24         
        
         25             
         
          菜单二
         
26             
         
          27                 
          
           11
          
28                 
          
           22
          
29                 
          
           33
          
30             
         
31         
        
32 33         
        
         34             
         
          菜单三
         
35             
         
          36                 
          
           111
          
37                 
          
           222
          
38                 
          
           333
          
39             
         
40         
        
41     
       
42 43     44     59 60 61 62 63 

 

1   2   3   4     
         5       6      21  22  23  24  25     
       
         26         
 27         
          28             
           29                 
 30                 
 31                 
 32                 
 33                 
 34             
           35                 
 36                 
 37                 
 38                 
 39                 
 40             
           41                 
 42                 
 43                 
 44                 
 45                 
 46         
 47  48     
        
        
         
          
1
          
2
          
3
          
编辑
         
         
          
111
          
222
          
333
          
编辑
         
         
          
1111
          
2222
          
3333
          
编辑
         
        
       
 49  50     
       
         51         
        
          52             
         
主机名：
 53             
         
IP：
 54             
         
端口：
 55             
          56             
          57         
        
 58  59     
       
 60  61      62     110 111 

 

 

1  2  3  4     
        5      6  7  8  9 10 11 12 13 14 
       
        15     
16     
         17         
          18             
19             
20         
21         
          22             
23             
24         
25         
          26             
27             
28         
29     
30 31 
        
        
         
          
          
l1
         
         
          
          
l2
         
         
          
          
l3
         
        
       
32 33 34 35 36 37 38     39     59 60 

 

 

 

1  2  3  4     
        5      6     16 17 18     
       
19 20     
       
        21         
        
         22             
         
第一章
23         
        
24 25         
        
         26             
         
第二章
27         
        
28 29         
        
         30             
         
第三章
31         
        
32     
       
33 34 35 36     37     68 69 

 

 

1  2  3  4     
        5      6  7  8     
       
         9         
        
         10             
          + 11             
         12         
        
13     
       
14 15 16     17     27 28