我的jQuery学习笔记- 跳蚤的小窝:)

anson_xu

浏览: 513150 次
性别:
来自: 惠州

最近访客更多访客>>

forfelicity

bjccdsrlcr

wxcode

bianjiang09

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery Ajax CSS PHP QQ

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//在外面包围另一个结构（html代码/元素）
42$("p").wrap("<div class='wrap'></div>")
43$("p").wrap(document.getElementById('content'))
44
45$("p").append("Hello"); //I would like to say: Hello
46$("p").prepend("Hello"); //HelloI would like to say: 
47$("p").before("Hello"); //HelloI would like to say: 
48$("p").after("Hello"); //I would like to say: Hello
49
50//【删除相应class的p元素】
51//AAA BBB CCC
52//BBB CCC
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/**//*
77jQuery中用post和get方法
78（ajax高层抽象方法，对ajax方法进行了封装）
79
80【当JQ中用post方式】
81PHP用$_POST接收时，只有n2
82PHP用$_GET接收时，只有n1
83
84【当JQ中用get方式】
85PHP用$_GET接收，n1 n2都有
86PHP用$_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对象)
99var v = document.getElementById("id"); //DOM对象 v
100var $v = $(v); //jQuery对象 $v
101
102//jQuery对象 -> DOM对象
103//jQuery对象.get(0) 或者 jQuery对象[0]
104var $v = $("#id"); //jQuery对象 $v
105var v = $v.get(0); //DOM对象 v
106var 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