第一章 认识jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
jQuery代码风格 $(document).ready( function (){ //... }); 简化 $( function (){ //... }); jQuery对象转DOM对象 var $id = $( "#id" ); //jQuery对象 var id = $id[0]; //DOM对象 $id.get(0); DOM对象转jQuery对象 var id = document.getElementById( "id" ); //DOM对象 var $id = $(id); //jQuery对象 |
第二章 jQuery选择器
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
基本选择器 $( "*" ) //所有元素 $( "#lastname" ) //id="lastname" 的元素 $( ".intro" ) //所有 class="intro" 的元素 $( "p,span" ) //所有 <p> ,<span>元素 层次选择器 $( "ancestor descendant" ) //$("div span")选取<div>里的所有<span>元素 $( "parent > child" ) //$("div > span")选取<div>元素下元素名是<span>的子元素 $( 'prev + next' ) //$('.one + div')选取.one的下一个<div>元素 $( 'prev~sibilings' ) //$('#two~div')选取#two的元素后面的所有<div>兄弟元素 基本过滤选择器 :first //$("div:first")选取所有<div>元素中第一个<div>元素 :last //$("div:last")选取所有<div>元素中最后一个<div>元素 :not(selector) //$("input:not(.myClass)")选取class不是myClass的<input>元素 :even //$("input:even")选取索引是偶数的<input>元素 :odd //$("input:odd")选取索引是奇数的<input>元素 :eq(index) //$("input:eq(1)")选取索引等于1的<input>元素 :gt(index) //$("input:gt(1)")选取索引大于1的<input>元素 :lt(index) //$("input:lt(1)")选取索引小于1的<input>元素 :header //$(":header")所有标题元素<h1> - <h6> :animated //$("div:animated")选取所有执行动画的<div>元素 内容过滤选择器 :contains(text) //$("div:contains('W3School')") 选取包含'W3School'的<div>元素 :empty //$("div:empty")选取无子(元素)节点的<div>元素 :has(selector) //$("div:has(p)")选取含有<p>元素的<div>元素 :parent //$("div:parent")选取拥有子元素的<div>元素 可见性过滤选择器 :hidden //$("p:hidden") 所有隐藏的 <p> 元素 :visible //$("table:visible") 所有可见的表格 属性过滤选择器 [attribute] //$("div[id]")选取拥有属性id的<div>元素 [attribute=value] //$("div[title=test]")选取title="test"的<div>元素 [attribute!=value] //$("div[title!=test]")选取title不等于"test"的<div>元素 [attribute^=value] //$("div[title^=test]")选取title以"test"开始的<div>元素 [attribute$=value] //$("div[title^=test]")选取title以"test"结束的<div>元素 [attribute*=value] //$("div[title^=test]")选取title含有"test"的<div>元素 子元素过滤选择器 :nth-child //选取每个父元素下的第index个子元素或者奇偶元素 :first-child //$(“ul li:first-child”)选取的是每个<ul>中第1个<li> :last-child //$(“ul li:last-child”)选取的是每个<ul>中最后1个<li> :only-child //$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素 表单对象属性过滤选择器 $( ":enabled" ) //所有激活的 input 元素 $( ":disabled" ) //所有禁用的 input 元素 $( ":selected" ) //所有被选取的 input 元素 $( ":checked" ) //所有被选中的 input 元素 表单选择器 选取对应的所有元素 :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 选择器中的空格 $( "div :hidden" ) //带空格的 选取<div>里的隐藏元素 $( "div:hidden" ) //不带空格的 选取隐藏的<div> |
第三章 jQuery中的DOM操作
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
DOM操作分3方面 DOM Core ,HTML-DOM ,CSS-DOM $(html) //创建html代码 插入节点 append() //元素内部追加新元素 appendTo() //$(A) .append(B)将A追加到B中 也可以用来移动元素 prepend() //元素前置内容 prependTo() //$(A).prependTo(B)将A前置到B中 after() //元素后面插入内容 insertAfter() //$(A).insertAfter(B)元素后面插入内容 before() //元素前面插入内容 insertBefore() //$(A).insertBefore(B)元素前面插入内容 删除节点 remove() //删除节点 empty() //清空节点里的内容 复制节点 clone() //true含义是复制元素的同时复制元素绑定的事件 替换节点 replaceWith() //$("p").replaceWith("<strong>123</strong>"); replaceAll() //$("<strong>123</strong>").replaceAll("p"); 包裹节点 wrap() //$("strong").wrap("<b></b>") <b><strong></strong></b> wrapAll() // wrapInner() //$("strong").wrapInner("<b></b>") <strong><b></b></strong> 属性操作 attr() //添加修改属性 $("p").attr("属性","值") removeAttr() //删除属性 样式操作 addClass() //追加样式 removeClass() //移除样式 hasClass() //判断是否含有样式 有true 没有false 切换样式 toggle() //交替一组动作 $toggleBtn.toggle( function (){ //显示元素 }, function (){ //隐藏代码 }) toggleClass() //重复切换样式 $( "p" ).toggleClass( "class" ); 设置获取html 文本和值 html() //获取或者修改元素的html代码 text() //获取或者修改元素的内容 val() //设置和获取元素的值 可以选中select checkbox radio focus() //获得焦点 blur() //失去焦点 遍历节点 children() //取得匹配元素的子元素集合 next() //取得后面紧邻的同辈元素 prev() //取得前面紧邻的同辈元素 siblings() //前后的同辈元素 closest() find() filter() nextAll() prevAll() parent() parents() CSS-DOM操作 css() $( "p" ).css( "color" ) //获取<p>元素的样式颜色 $( "p" ).css( "color" , "red" ) //设置<p>元素的样式颜色 $( "p" ).css({ "fontSize" : "12px" , "color" : "#999" }) //同时设置字体大小和颜色 height() width() offset() //获取元素在当前视窗的相对偏移 var offset=$( "p" ).offset(); var left=offset.left; var top=offset.top; position() //获取元素属性为relative或absolute的父节点的相对偏移 scrollTop() //元素的滚动条距顶端的距离 scrollLeft() //元素的滚动条距左侧的距离 |
上一篇:用js实现在桌面上创建快捷方式
讨论数量:0