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/**//*
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
以上部分是参考 jQuery中文指导 + jQuery API手册 进行学习的记录
到这里可能算是基本入门吧,接下来准备直接通过阅读API手册进行学习
最后再自我强调一下:切勿眼高手低!
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
]_封捷_jQuery学习笔记
锋利的JQuery学习笔记,总结超经典!
这是关于JQuery的学习过程中的一个笔记,当中记载了很多注意事项以及技巧,值得一看
jquery学习笔记附带例子,希望对新手有帮助
韩顺平上课实录练习题及学习笔记,免费分享