- 浏览: 72896 次
- 性别:
- 来自: 济南
最新评论
-
疯狂的草儿:
刚开始读这篇文章 我以为lz 招了个美女呢 呵呵
踏实与成功 -
binoruv:
bucuo
学习jQuery笔记(三)包装集 -
jy00314996:
若是人间 写道刚开始学接触PV3D,跟你学习学习,呵呵,交个朋 ...
Papervision3D(PV3D)笔记&教程(1)-四个基础元素 -
若是人间:
刚开始学接触PV3D,跟你学习学习,呵呵,交个朋友哈
Papervision3D(PV3D)笔记&教程(1)-四个基础元素 -
jy00314996:
martri 写道呵呵,不错,谢谢!
谢谢~~~一起进步!
Freemarker网站静态化的实现
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
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+Struts1.3实现JSON的post传递
2009-02-20 15:28 763json格式的数据传递已经红遍全球,JQuery的 ... -
学习jQuery笔记(十)jQuery表单验证与自动完成提示插件
2009-07-01 09:20 3545一.摘要 本文是介绍两个最常用的jQuery插件. 分别用于 ... -
学习jQuery笔记(九)jQueryUI常用功能实战
2009-06-26 15:11 1457一.摘要 本文是实战篇. 使用jQueryUI完成制作网站的 ... -
学习jQuery笔记(八)jQuery工具函数
2009-06-26 10:10 937一.摘要 我们经常要使用脚本处理各种业务逻辑, 最常见的就是 ... -
学习jQuery笔记(七)jQuery动画-让页面动起来!
2009-06-25 14:46 1677一.摘要 本系列文章将 ... -
学习jQuery笔记(六)jQuery中的Ajax
2009-06-25 14:36 1461一.摘要 本篇文章讲解如何使用jQuery方便快捷的实现Aj ... -
学习jQuery笔记(五)事件与事件对象
2009-06-24 15:01 1113一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuer ... -
学习jQuery笔记(四)操作元素的属性与样式
2009-06-24 14:28 1489一.摘要 本篇文章讲解 ... -
学习jQuery笔记(三)包装集
2009-06-23 17:34 1036一.摘要 在使用jQuery选择器获取到jQuery包装集后 ... -
学习jQuery笔记(二)选择器
2009-06-23 15:22 1095一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有 ... -
学习jQuery笔记(一)入门篇
2009-06-23 14:44 1210首先什么是jQuery? ... -
学习jQuery笔记 前篇 开发环境配置
2009-06-23 14:34 919一.摘要 本系列文章将带您进入jQuery的精彩世界 ... -
jQuery日常使用技巧总结
2009-06-19 14:40 7771、关于页面元素的引用 ... -
jQuery使用JSON的例子
2009-06-12 15:53 10971、在HTML中,有这样一个表单: <form met ... -
用JQuery解析Json
2009-06-12 15:36 1909JSON的数据格式现在挺热门的!这里不解释了。主要讲下Jque ... -
jQuery的动态效果效果演示
2009-06-12 15:24 1174Jquery做动态效果,可以使用animate函数, ... -
jquery 插件corner实现圆角边框
2009-06-12 15:11 1337<!DOCTYPE html PUBLIC &qu ... -
各种效果的jquery ui(接口)介绍
2009-06-11 10:21 1515基本的鼠标互动: 拖拽(drag and dropping) ... -
在jQuery中利用AJAX加载XML数据并解析
2009-06-11 10:03 7871,Content-Type很多时候无法解析就是Con ... -
jQuery & CSS制作折页效果
2009-06-09 13:21 1971不多说先看效果图 demo地址:http://www.s ...
相关推荐
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学习笔记附带例子,希望对新手有帮助
韩顺平上课实录练习题及学习笔记,免费分享