jQuery学习笔记,共享+备份一下:)
中间主要是用自己的方式予以记录,看不明白的地方还请见谅,也欢迎向我提出:P
1
/**//******************************
2
* jQuery学习笔记
3
* @author Linvo
4
******************************/
5
6
/**//*=========
7
2009-1-14
8
=========*/
9
$() = $(document)
10
11
//实现window.onload()效果
12
$().ready(
13
function()
{
14
//需要执行的内容
15
}
16
);
17
18
//获取DOM元素(返回值为jQuery对象)
19
$(element) //相应元素名的
20
$(.classname) //class值匹配的
21
$(element.classname) //相应元素中,class值匹配的
22
$(#id) //id匹配的
23
$(element#id) //相应元素中,id匹配的
24
$(element1 > element2) //元素一 下 的所有元素二(只包括儿子)
25
$(element1 element2) //元素一 中 的所有元素二(包括子孙等)
26
$(element1 + element2) //元素一 后 的所有元素二(代码后)
27
$(element1 ~ element2) //与元素一 并列 的所有元素二(兄弟元素二)
28
29
$(#id).html("") //设置 getElementById("id").innerHTML = ""
30
$(#id).html() //取出 getElementById("id").innerHTML
31
32
//动画出现效果
33
$(#id).show(speed, [callback])
34
$(#id).slideDown(speed, [callback])
35
……
36
37
38
/**//*=========
39
2009-1-16
40
=========*/
41
//在<p>外面包围另一个结构(html代码/元素)
42
$("p").wrap("<div class='wrap'></div>")
43
$("p").wrap(document.getElementById('content'))
44
45
$("p").append("<b>Hello</b>"); //<p>I would like to say: <b>Hello</b></p>
46
$("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>
47
$("p").before("<b>Hello</b>"); //<b>Hello</b><p>I would like to say: </p>
48
$("p").after("<b>Hello</b>"); //<p>I would like to say: </p><b>Hello</b>
49
50
//【删除相应class的p元素】
51
//<p class="classname">AAA</p> BBB <p>CCC</p>
52
//BBB <p>CCC</p>
53
$("p").remove(".classname");
54
55
/**//*=========
56
2009-1-18
57
=========*/
58
//获取具有某属性值的相应元素
59
$("input[name=qq]") //获取<input name="qq" type="text" />元素
60
61
//属性与值关系
62
= //等于
63
*= //包含该值
64
!= //不包含该值
65
^= //以该值开头
66
$= //以该值结尾
67
68
//为每一个匹配的元素执行该函数
69
$(element).each(function()
{
70
//需要执行的内容
71
})
72
73
/**//*=========
74
2009-1-19
75
=========*/
76
/**//*
77
jQuery中用post和get方法
78
(ajax高层抽象方法,对ajax方法进行了封装)
79
80
【当JQ中用post方式】
81
PHP用$_POST接收时,只有n2
82
PHP用$_GET接收时,只有n1
83
84
【当JQ中用get方式】
85
PHP用$_GET接收,n1 n2都有
86
PHP用$_POST接收时,都没有
87
*/
88
$.post("do.php?n1=a",
{n2: "b"},
89
function(data)
{
90
alert("Data Loaded: " + data);
91
}
92
);
93
94
/**//*=========
95
2009-1-20
96
=========*/
97
//DOM对象 -> jQuery对象
98
//$(DOM对象)
99
var v = document.getElementById("id"); //DOM对象 v
100
var $v = $(v); //jQuery对象 $v
101
102
//jQuery对象 -> DOM对象
103
//jQuery对象.get(0) 或者 jQuery对象[0]
104
var $v = $("#id"); //jQuery对象 $v
105
var v = $v.get(0); //DOM对象 v
106
var v = $v[0]; //DOM对象 v
107
108
$(element).get(); //获取指定元素的集合
109
110
//jQuery用ajax方法(ajax低层方法)
111
$.ajax(
{
112
type: "POST", //POST时PHP中用$_POST接收,GET反之。
113
url: "do.php",
114
data: "n1="+x+"&n2="+y,
115
success: function(data)
{ alert( "Data Saved: " + data ); }
116
});
117
118
/**//*=========
119
2009-1-21
120
=========*/
121
//序列表表格内容为请求字符串
122
//返回值:(例)name=linvo&age=22
123
$("form").serialize() //序列化整个表单元素内容
124
$("input[type=text]").serialize() //序列化指定元素内容(例)
125
126
$(element).empty(); //移除指定元素下所有元素
127
128
/**//*
129
CSS设置
130
*/
131
$(element).addClass("classname"); //为指定元素添加css样式
132
$(element).removeClass("classname") //移除指定元素的css样式
133
$(element).toggleClass("classname") //指定元素的css样式,有则删除,无则添加
134
$(element).css("attname"); //获取指定元素相应属性的值(attname例:color)
135
$(element).css("attname","value"); //设置……属性值(例:"color","#FF0000")
136
$(element).css(
{ "margin-left": "10px", "background-color": "blue" });
137
//使用“名/值对”进行批量设置……(例子见自身)
138
139
/**//*=========
140
2009-1-22
141
=========*/
142
$(element1).next(element2) //与指定元素一 紧邻 的指定元素二
143
$(element1).parent().is(element2) //元素一的父元素在元素二的集合中吗
144
145
//模仿鼠标悬停事件
146
//hover(over,out)
147
//over:在上方执行 | out:移出时执行
148
$(element).hover(
149
function()
{
150
//在上方执行
151
}, function()
{
152
//移出时执行
153
}
154
)
155
以上部分是参考 jQuery中文指导 + jQuery API手册 进行学习的记录
到这里可能算是基本入门吧,接下来准备直接通过阅读API手册进行学习
最后再自我强调一下:切勿眼高手低!