jQuery

负有jQuery详细使用验证请见:http://www.php100.com/manual/jquery/

 

jQuery的功力是操作浏览器html,从而达到用户的可视化效果,根据职能可分为三大类:

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

$符号:$就约等于jQuery那一个模块
$(.class) = jQuery(.class)

 

 1、找

1.1选择器

基本:

#id

用于搜索的,通过成分的 id 属性中加以的值

jQuery 1jQuery 2

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

#id

 element(标签)

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

jQuery 3jQuery 4

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

element

.class

二个用来搜索的类。一个要素得以有多个类,只要有三个契合就能被匹配到。

jQuery 5jQuery 6

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

class

组成选拔器:

空格:  层级关系

逗号:and,多项匹配

 

属性:

[attribute]

匹配包蕴给定属性的要素。

jQuery 7jQuery 8

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

attribute

[attribute=value]

分外给定的习性是某些特定值的元素

jQuery 9jQuery 10

 1 描述:
 2 查找所有 name 属性是 newsletter 的 input 元素
 3 
 4 HTML 代码:
 5 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
 6 <input type="checkbox" name="newsletter" value="Cold Fusion" />
 7 <input type="checkbox" name="accept" value="Evil Plans" />
 8 
 9 jQuery 代码:
10 $("input[name='newsletter']").attr("checked", true);
11 
12 结果:
13 [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

attribute=value

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

[attribute!=value]

  匹配全数不包罗钦赐的天性,也许性质不等于特定值的元素。

[attribute^=value]

  匹配给定的性质是以有些值开首的成分

[attribute$=value]

  匹配给定的性格是以某个值结尾的成分

[attribute*=value]

  匹配给定的性质是以含有有个别值的成分

 

 

子元素:

:nth-child

合营其父成分下的第N个子或奇偶成分

‘:eq(index)’ 只很是三个要素,而以此将为每2个父成分匹配子成分。

: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)

jQuery 11jQuery 12

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

:nth-child

:first-child   匹配第三个子成分

**:last-child   匹配最终二个子成分**

**:only-child  假诺有些成分是父成分中唯一的子成分,那将会被匹配,要是父成分中蕴藏别的因素,那将不会被匹配。**

 

表单:

依附于Input标签里的习性

写法:   $(“:text”) =
$(“input[type=text]”)

:input

合作全体input, textarea,
select 和 button 成分

jQuery 13jQuery 14

 1 描述:
 2 查找所有的input元素,下面这些元素都会被匹配到。
 3 HTML 代码:
 4 <form>
 5     <input type="button" value="Input Button"/>
 6     <input type="checkbox" />
 7 
 8     <input type="file" />
 9     <input type="hidden" />
10     <input type="image" />
11 
12     <input type="password" />
13     <input type="radio" />
14     <input type="reset" />
15 
16     <input type="submit" />
17     <input type="text" />
18     <select><option>Option</option></select>
19 
20     <textarea></textarea>
21     <button>Button</button>
22 
23 </form>
24 jQuery 代码:
25 $(":input")
26 结果:
27 [ 
28     <input type="button" value="Input Button"/>,
29     <input type="checkbox" />,
30 
31     <input type="file" />,
32     <input type="hidden" />,
33     <input type="image" />,
34 
35     <input type="password" />,
36     <input type="radio" />,
37     <input type="reset" />,
38 
39     <input type="submit" />,
40     <input type="text" />,
41     <select><option>Option</option></select>,
42 
43     <textarea></textarea>,
44     <button>Button</button>,
45  ]

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button   匹配全数按钮

jQuery 15jQuery 16

 1 描述:
 2 查找所有按钮.
 3 
 4 HTML 代码:
 5 <form>
 6   <input type="text" />
 7   <input type="checkbox" />
 8   <input type="radio" />
 9   <input type="image" />
10   <input type="file" />
11   <input type="submit" />
12   <input type="reset" />
13   <input type="password" />
14   <input type="button" />
15   <select><option/></select>
16   <textarea></textarea>
17   <button></button>
18 </form>
19 
20 jQuery 代码:
21 $(":button")
22 
23 结果:
24 [ <input type="button" />,<button></button> ]

:button

:file

:hidden

 

表单对象属性

:checked  
  匹配全数入选的被选凉月素(复选框、单选框等,不包蕴select中的option)

jQuery 17jQuery 18

 1 描述:
 2 查找所有选中的复选框元素
 3 
 4 HTML 代码:
 5 <form>
 6   <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
 7   <input type="checkbox" name="newsletter" value="Weekly" />
 8   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
 9 </form>
10 
11 jQuery 代码:
12 $("input:checked")
13 
14 结果:
15 [ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

:checked

:enabled
   匹配全部可用成分

:display
   匹配全体不可用成分

:selected
   匹配全体入选的option成分

 

1.2筛选

 过滤

eq(index|-index)

赢得第N个因素  与接纳器里面包车型客车eq类似,都以从0算起。

不同:筛选的.eq(1) 是平头门类  而挑选的 ”:eq(1)“ 是字符串

在为一个函数字传送参数时,筛选的平头传参格局就不难很多,而采取器的字符串供给拼接

jQuery 19jQuery 20

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

eq

hasClass

检查当前的因素是或不是带有有个别特定的类,假设有,则赶回true,不然false

map(callback)   

将一组成分转换到别的数组(不论是还是不是是成分数组) callback(给各种成分执行的函数)

您能够用那个函数来确立二个列表,不论是值、属性依旧CSS样式,只怕其余特别方式。那都可以用’$.map()’来便宜的树立。

jQuery 21jQuery 22

 1 描述:点击编辑,获取其他标签里的值
 2 
 3 html代码:
 4 <table>
 5         <thead></thead>
 6         <tbody>
 7             <tr>
 8                 <td>1</td>
 9                 <td>2</td>
10                 <td>3</td>
11                 <td onclick="get_prev(this);">编辑</td>
12             </tr>
13         </tbody>
14 </table>
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         }

map(callback)

 

 查找

children([expr])

拿到叁个暗含匹配的要素集合中每3个成分的全体子成分的成分集合。

能够透过可选的表明式来过滤所匹配的子元素。注意:parents()将追寻全体祖辈成分,而children()只考虑子成分而不考虑全体后代成分。

jQuery 23jQuery 24

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

children

find(expr|obj|ele)

招来全体与钦定表明式匹配的因素。那些函数是找出正在处理的要素的后人成分的好法子。

享有搜索都重视jQuery表明式来成功。那么些表明式能够行使CSS1-3的取舍器语法来写。

jQuery 25jQuery 26

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

find

next([expr])

得到一个涵盖匹配的成分集合中每1个因素紧邻的背后同辈成分的因素集合。

 那个函数只回去前边那多少个紧邻的同辈成分,而不是前面全部的同辈成分(能够使用nextAll)。能够用三个可选的表明式举办筛选。

jQuery 27jQuery 28

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

next

nextAll([expr])

招来当前成分之后有所的同辈成分。

能够用表达式过滤

jQuery 29jQuery 30

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

nextAll

nextUntill

找寻当前成分之后全部的同辈成分,直到境遇匹配的不得了成分停止。

jQuery 31jQuery 32

 1 描述:
 2 给#term-2后面直到dt前的元素加上红色背景
 3 HTML 代码:
 4 <dl>
 5   <dt>term 1</dt>
 6   <dd>definition 1-a</dd>
 7   <dd>definition 1-b</dd>
 8   <dd>definition 1-c</dd>
 9   <dd>definition 1-d</dd>
10 
11   <dt id="term-2">term 2</dt>
12   <dd>definition 2-a</dd>
13   <dd>definition 2-b</dd>
14   <dd>definition 2-c</dd>
15 
16   <dt>term 3</dt>
17   <dd>definition 3-a</dd>
18   <dd>definition 3-b</dd>
19 </dl>
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 1
27 definition 1-a
28 definition 1-b
29 definition 1-c
30 definition 1-d
31 term 2
32 definition 2-a
33 definition 2-b
34 definition 2-c
35 term 3
36 definition 3-a
37 definition 3-b

nextUtill

prev([expr])  向上匹配**

prevAll([expr])

prevUntill

parent([expr])

收获二个含有着全数匹配成分的绝无仅有父成分的因素集合。

您能够使用可选的表达式来筛选。

jQuery 33jQuery 34

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

parent

parents([expr])

收获3个涵盖着独具匹配成分的上代成分的因素集合(不包括根成分)。能够通过3个可选的表明式实行筛选。

jQuery 35jQuery 36

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

parents

parentsUtill

招来当前因素的享有的父辈成分,直到遇见匹配的万分元素截止。

jQuery 37jQuery 38

 1 描述:
 2 查找item-a的祖先,但不包括level-1
 3 HTML 代码:
 4 <ul class="level-1">
 5   <li class="item-i">I</li>
 6   <li class="item-ii">II
 7     <ul class="level-2">
 8       <li class="item-a">A</li>
 9       <li class="item-b">B
10         <ul class="level-3">
11           <li class="item-1">1</li>
12           <li class="item-2">2</li>
13           <li class="item-3">3</li>
14         </ul>
15       </li>
16       <li class="item-c">C</li>
17     </ul>
18   </li>
19   <li class="item-iii">III</li>
20 </ul>
21 jQuery 代码:
22 $('li.item-a').parentsUntil('.level-1')
23     .css('background-color', 'red');

parentsUtill

siblings([expr])

得到二个涵盖匹配的成分集合中每1个因素的有着唯一同辈成分的因素集合。能够用可选的表明式举办筛选。

jQuery 39jQuery 40

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

siblings

 

1.3jQuery中的循环:

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

  函数体;

})

字典为卓越的列表

jQuery 41jQuery 42

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

列表循环

jQuery 43jQuery 44

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)**

安装或回到被选成分的属性值。

jQuery 45jQuery 46

 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 });

attr

removeAttr(name)

从每三个一双两好的因素中剔除2脾质量

jQuery 47jQuery 48

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

removeAttr

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

取得在协作的因素集中的率先个要素的属性值。(复选框)

jQuery 49jQuery 50

 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: true
10 });
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 });

prop

removeProp(name)

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

 

 

CSS类:

addClass(class|fn)  为每一种匹配的因素添加钦赐的类名。

removeClass(clss|fn)  从具有匹配的成分中除去全部大概钦点的类。

toggleClass(class|fn[,sw])   

若是存在(不存在)就删除(添加)3个类。

jQuery 51jQuery 52

 1 参数class 描述:
 2 为匹配的元素切换 'selected' 类
 3 jQuery 代码:
 4 $("p").toggleClass("selected");
 5 参数class,switch 描述:
 6 每点击三下加上一次 'highlight' 类
 7 HTML 代码:
 8 <strong>jQuery 代码:</strong>
 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 });

toggleClass

 

HTML代码/文本/值:

text([val|fn])

得到具有匹配成分的始末。    

结果是由全数匹配成分包涵的文件内容结缘起来的文本。那些格局对HTML和XML文书档案都使得。

jQuery 53jQuery 54

 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     });

text

html([val|fn])

收获第②个匹配成分的html内容。这么些函数不可能用来XML文书档案。但能够用于XHTML文书档案。

在多个 HTML 文书档案中, 大家可以使用 .html() 方法来得到任意一个要素的故事情节。
若是选拔器匹配多于叁个的成分,那么唯有第二个匹配成分的 HTML
内容会被拿走。

jQuery 55jQuery 56

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

html

val(val)

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

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

jQuery 57jQuery 58

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

val

jQuery 59jQuery 60

 1 html代码
 2     <div>
 3         <select  id="name">
 4             <option value="1">男</option>
 5             <option value="2">女</option>
 6         </select>
 7         <input type="button" onclick="GetValue();"/>
 8     </div>
 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         }

select.val

 

 

1.5 CSS

 

CSS

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

做客匹配成分的体制属性。

jQuery 61jQuery 62

 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   });

CSS

 

位置

scrollTop([val])

得到匹配成分相对滚动条顶部的晃动。

jQuery 63jQuery 64

 1 <body>
 2 
 3     <input type="button" onclick="GoBacktop();" value="返回顶部"/>
 4     <div id="content" style="height: 200px;width:500px; overflow: auto;">
 5         <p>ww</p>
 6         <p>ww</p>
 7         <p>ww</p>
 8         <p>ww</p>
 9         <p>ww</p>
10         <p>ww</p>
11         <p>ww</p>
12         <p>ww</p>
13         <p>ww</p>
14         <p>ww</p>
15         <p>ww</p>
16         <p>ww</p>
17         <p>ww</p>
18         <p>ww</p>
19         <p>ww</p>
20         <p>ww</p>
21         <p>ww</p>
22         <p>ww</p>
23     </div>
24 
25     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
26     <script type="text/javascript">
27 
28     function GoBacktop(){
29 //        设置id=content的元素滚动条顶部距离为0
30         $('#content').scrollTop(0);
31 
32 //        设置浏览器的滚动条顶部距离为0
33 //        $(window).scrollTop(0);
34     }
35 
36     </script>

scrollTop

scrollLeft([val])

赢得匹配成分相对滚动条左侧的偏移。

offset([coordinates])

取得匹配成分在当前视口的相对偏移。相对整个页面的职责

jQuery 65jQuery 66

 1 获取第二段的偏移量:
 2 
 3 <body>
 4     <div style="height: 1500px;"></div>
 5     <div id="d1">wwwwwww</div>
 6     <!--浏览器默认会有一个边距为8px-->
 7 
 8 
 9     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
10     <script type="text/javascript">
11 
12         var w = $('#d1').offset();
13         console.log(w);
14 
15     </script>
16 </body>
17 
18 结果:
19 left: 8
20 top: 1508
21 
22 
23 
24 
25 参数coordinates 描述:
26 获取第二段的偏移
27 HTML 代码:
28 <p>Hello</p><p>2nd Paragraph</p>
29 
30 jQuery 代码:
31 $("p:last").offset({ top: 10, left: 30 });

offset

position()

赢得匹配成分相对父成分的晃动。

jQuery 67jQuery 68

 1 获取id=d2的标签相对父标签的偏移量:
 2 
 3     <div style="height: 1500px;"></div>
 4     <div style="padding: 50px; position: relative;">
 5         <div id="d2" >aaaaaaa</div>
 6     </div>
 7 
 8     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10 
11         var w = $('#d2').position();
12         console.log(w);
13 结果:
14 {top: 50, left: 50}

position

 

 

1.6事件

事件

$(window).scroll()

设置页面加载后,每2次滚动滑轮就接触事件

jQuery 69jQuery 70

 1 <body>
 2 
 3     <div>
 4         <div style="height: 500px";>
 5             <h1>第一章</h1>
 6         </div>
 7 
 8         <div style="height: 1500px;">
 9             <h1>第二章</h1>
10         </div>
11 
12         <div style="height: 2000px;" >
13             <h1>第三章</h1>
14         </div>
15     </div>
16 
17 
18     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
19     <script type="text/javascript">
20 
21 //        当页面加载时,就会注册事件,滚动滑轮就会触发事件
22 
23         $(function () {
24             $(window).scroll(function() {
25                 console.log(123);
26             })
27         })
28         
29     </script>
30 </body>

window.scroll

 

 1.7文书档案处理

个中插入

append(content|fn)

向种种匹配的成分内部追加内容。

jQuery 71jQuery 72

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

append

appendTo(content)

把富有匹配的成分追加到另多个点名的成分成分集合中。

实际上,使用那一个主意是颠倒了健康的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

jQuery 73jQuery 74

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

appendTo

prepend(content)

向各类匹配的成分内部前置内容。

那是向具有匹配成分内部的开首处插入内容的特级方法。

jQuery 75jQuery 76

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

prepend

prependTo(content)

把具备匹配的成分前置到另二个、钦定的因素成分集合中。

实际,使用这些点子是颠倒了健康的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

jQuery 77jQuery 78

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

prependTo

 

外表插入

after(content|fn)

在各样匹配的因素之后插入内容

jQuery 79jQuery 80

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

after

before(content|fn)

在各类匹配的成分此前插入内容

insertAfter(content)

把持有匹配的成分插入到另多个、钦赐的因素成分集合的背后。

实在,使用那一个办法是颠倒了健康的$(A).after(B)的操作,即不是把B插入到A前边,而是把A插入到B前边。

jQuery 81jQuery 82

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

insertAfter

insertBefore(content)

把全部匹配的成分插入到另一个、钦命的因素成分集合的前头。

骨子里,使用那几个形式是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前边,而是把A插入到B前面。

 

删除

empty()

去除匹配的元素集合中拥有的子节点。

jQuery 83jQuery 84

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

empty

remove([expr])

从DOM中删去全数匹配的成分。

jQuery 85jQuery 86

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

remove

detach([expr])

jQuery 87jQuery 88

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

detach

 

复制

clone([Even[,deepEven]])

仿造匹配的DOM成分并且选中那一个克隆的副本。

在想把DOM文书档案凉月素的副本添加到其余职位时那个函数分外管用。

jQuery 89jQuery 90

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

clone

 

1.8插件 

jQuery.extend(object)

扩展jQuery对象自小编。用来在jQuery命名空间上增添新函数。

jQuery 91jQuery 92

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); // => 2
9 jQuery.max(4,5); // => 5

extend

一般扩大jQuery会用自实施函数添加

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

二种方法执行格局一样:

1 <script src="js/jquery-1.8.2.min.js"></script>
2 <script src="chenchao.js"></script>
3 <script >
4     var ret = $.chenchao();
5     console.log(ret);
6 
7 </script>

 

 

 

 二 、一些任何的知识点

2.1获得JS中的全局变量

window[‘变量名’]

jQuery 93jQuery 94

 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为字典里的值            

windown

 

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

parseInt(‘123’)

 

 2.3二种绑定事件措施

dom绑定

jQuery 95jQuery 96

1 HTML代码:
2 <a onclick="AddCondition()">This is Dom bing event!</a>
3 
4 jQurey代码:
5 function AddCondition(){
6             函数体
7         }

Dom绑定事件

jQurey绑定

当批量对某一类标签定义事件时选取

jQuery 97jQuery 98

 1 HTML代码:
 2 <div id="js1">This is jQuery bind event!</div>
 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绑定事件

 

 

 

 

jQuery各样示例:

jQuery 99

jQuery 100jQuery 101

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 
14     <div>
15         <div>
16             <div  onclick="Chang(this);">菜单一</div>
17             <div class="content">
18                 <div>1</div>
19                 <div>2</div>
20                 <div>3</div>
21             </div>
22         </div>
23 
24         <div>
25             <div  onclick="Chang(this);">菜单二</div>
26             <div class="content hide">
27                 <div>11</div>
28                 <div>22</div>
29                 <div>33</div>
30             </div>
31         </div>
32 
33         <div>
34             <div  onclick="Chang(this);">菜单三</div>
35             <div class="content hide">
36                 <div>111</div>
37                 <div>222</div>
38                 <div>333</div>
39             </div>
40         </div>
41     </div>
42 
43     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
44     <script type="text/javascript">
45 
46         function Chang(arg){
47 //            $(arg) $(this)就可以使用jQuery的方法了,相当于点击的标签,this是js的参数
48 //            $(arg).next()  当前标签的下一个兄弟标签
49 //            $(arg).parent()  当前标签的父标签
50 //            $(arg).parent().siblings()当前标签父标签的兄弟标签
51 //            find('.content')  找出正在处理的元素的后代元素
52 //            $(arg).next().show();
53 //            $(arg).parent().siblings().find('.content').hide()
54             $(arg).next().removeClass('hide');
55             $(arg).parent().siblings().find('.content').addClass('hide')
56         }
57 
58     </script>
59 
60 
61 
62 </body>
63 </html>

左边隐藏菜单

 

jQuery 102

jQuery 103jQuery 104

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .model{
  8             position: fixed;
  9             left: 50%;
 10             top: 50%;
 11             width: 400px;
 12             height: 300px;
 13             background-color: #ddd;
 14             margin-left: -200px;
 15             margin-top: -150px;
 16         }
 17         .hide{
 18             display: none;
 19         }
 20     </style>
 21 
 22 </head>
 23 <body>
 24 
 25     <table border="1">
 26         <thead></thead>
 27         <tbody>
 28             <tr>
 29                 <td>1</td>
 30                 <td>2</td>
 31                 <td>3</td>
 32                 <td onclick="GetPrev(this);">编辑</td>
 33                 </tr>
 34             <tr>
 35                 <td>111</td>
 36                 <td>222</td>
 37                 <td>333</td>
 38                 <td onclick="GetPrev(this);">编辑</td>
 39                 </tr>
 40             <tr>
 41                 <td>1111</td>
 42                 <td>2222</td>
 43                 <td>3333</td>
 44                 <td onclick="GetPrev(this);">编辑</td>
 45                 </tr>
 46         </tbody>
 47 
 48     </table>
 49 
 50     <div id="dialog" class="model hide">
 51         <form action="" method="get">
 52             <p>主机名:<input type="text" id="hostname" value="123123" /></p>
 53             <p>IP:<input type="text" id="ip" value="192.168.1.1" /></p>
 54             <p>端口:<input type="text" id="port" value="3306" /></p>
 55             <input type="submit"  onclick="return SubmitForm()" value="提交"/>
 56             <input type="button" onclick="cancel()" value="取消"/>
 57         </form>
 58 
 59     </div>
 60 
 61     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
 62     <script type="text/javascript">
 63 
 64 
 65 //        1.弹出框
 66 //        2.取出表格中的数据
 67 //        3.将表格数据填充到弹出框中
 68         function GetPrev(ths){
 69             var list=[];
 70             $.each($(ths).prevAll(),function(i){
 71 //                i=每个元素的索引值
 72 //                var item = $(ths).prevAll()[i];
 73                 var text = $($(ths).prevAll()[i]).text();
 74                 list.push(text);
 75                     });
 76             var new_list = list.reverse();
 77             $('#hostname').val(new_list[0]);
 78             $('#ip').val(new_list[1]);
 79             $('#port').val(new_list[2]);
 80             $('#dialog').removeClass('hide');
 81         }
 82 
 83         function cancel(){
 84             $('#dialog').addClass('hide');
 85         }
 86 
 87 
 88         function SubmitForm(){
 89 //            1.获取表单中的值
 90 //            2.判断值是否为空
 91         var ret=true;
 92 //            遍历所有的input,只要有空值,就将ret设置为false
 93 //            $('input[type="text"]')
 94         $(':text').each(function(){
 95 //            $(this) 要循环的每一个元素
 96             var value = $(this).val();
 97         if(value.trim().length == 0){
 98             $(this).css('border-color','red');
 99             ret = false
100         }else{
101             $(this).css('border-color','green');
102         }
103 
104             });
105         return ret;
106 }
107 
108 
109     </script>
110 </body>
111 </html>

弹出提交框

 

 jQuery 105

jQuery 106jQuery 107

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <input type="button" onclick="CheckAll()" value="全选"/>
10 <input type="button" onclick="CheckReverse()" value="反选"/>
11 <input type="button" onclick="CheckCancel()" value="取消"/>
12 
13 
14 <table border="1">
15     <thead></thead>
16     <tbody id="tb1">
17         <tr>
18             <td><input type="checkbox"/></td>
19             <td>l1</td>
20         </tr>
21         <tr>
22             <td><input type="checkbox"/></td>
23             <td>l2</td>
24         </tr>
25         <tr>
26             <td><input type="checkbox"/></td>
27             <td>l3</td>
28         </tr>
29     </tbody>
30 
31 </table>
32 
33 
34 
35 
36 
37 
38     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
39     <script type="text/javascript">
40 
41 
42         function CheckAll(){
43 //            $('#tb1').find(':checkbox').attr('checked','checked');
44             $('#tb1').find(':checkbox').prop('checked',true);
45         }
46         function CheckReverse(){
47             $('#tb1').find(':checkbox').each(function () {
48                 if($(this).prop('checked')){
49                     $(this).prop('checked',false);
50                 }else{
51                     $(this).prop('checked',true);
52                 }
53             });
54         }
55         function CheckCancel(){
56             $('#tb1').find(':checkbox').prop('checked',false);
57         }
58     </script>
59 </body>
60 </html>

复选框

 

 

jQuery 108

 

jQuery 109jQuery 110

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .bu{
 8             font-weight:bolder;
 9             position: fixed;
10             top: 20px;
11             left: 200px;
12             color: azure;
13             background-color: cornflowerblue;
14         }
15     </style>
16 </head>
17 <body>
18     <div id="current" class="bu"></div>
19 
20     <div>
21         <div class="chapter" style="height: 500px";>
22             <h1>第一章</h1>
23         </div>
24 
25         <div class="chapter" style="height: 1500px;">
26             <h1>第二章</h1>
27         </div>
28 
29         <div class="chapter" style="height: 20px;" >
30             <h1>第三章</h1>
31         </div>
32     </div>
33 
34 
35 
36     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
37     <script type="text/javascript">
38 
39 //        当页面加载时,就会注册事件,滚动滑轮就会触发事件
40 
41     $(function () {
42         $(window).scroll(function () {
43 //            获取窗体滚动条离顶部高度
44             var scroll_top = $(window).scrollTop();
45             var list = [];
46 //            循环每一个章节,获取每个章节距离窗体顶部的距离,并添加到列表中
47             $.each($('.chapter'), function (i) {
48                 var current_offsettop = $($('.chapter')[i]).offset().top;
49                 list.push(current_offsettop);
50             });
51 
52 //            循环列表中每一个章节的距顶高度,如果滚轮的距顶高度+窗口的高度=页面总高度
53 //            说明已经拉到最底部,直接显示最后章节
54 //            如果滚轮的下拉高度大于每一章节的距顶高度,显示当前章节
55             $.each(list, function (i) {
56                 if (scroll_top+$(window).height() == $(document).height()){
57                     $('#current').text($('.chapter').last().text());
58                     return
59                 }
60                 if (scroll_top>list[i]){
61                     $('#current').text($($('.chapter')[i]).text());
62                 }
63             });
64         })
65     })
66         
67     </script>
68 </body>
69 </html>

章节滚动

 

 jQuery 111

jQuery 112jQuery 113

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="search_conditions">
 9         <div class="condition">
10             <a onclick="AddCondition(this,'#search_conditions')"> + </a>
11             <input />
12         </div>
13     </div>
14 
15 
16     <script src="js/jquery-1.8.2.min.js"></script>
17     <script >
18         function AddCondition(ths,conditions){
19             var  clon = $(ths).parent().clone();
20             clon.children(':first').text('-').attr('onclick','RemoveCondition(this,"#search_conditions")');
21             $(conditions).append(clon);
22         }
23         function RemoveCondition(ths,conditions){
24             $(ths).parent().remove();
25         }
26     </script>
27 </body>
28 </html>

克隆搜索框

 

 

 

相关文章

网站地图xml地图