jQuery学习笔记.docx
《jQuery学习笔记.docx》由会员分享，可在线阅读，更多相关《jQuery学习笔记.docx（95页珍藏版）》请在冰豆网上搜索。
jQuery学习笔记
目录
Day011
一、jQuery框架2
1.什么是jQuery框架?
2
2.引用外部的jQuery文件2
3.jQuery对象与DOM对象2
3.1）基础3
3.2）jQuery对象转换成DOM对象3
3.3）DOM对象转换成jQuery对象3
《例01》对象转换例举3
4.链式写法4
《例1》链式写法4
《例2》函数的返回值也可以是对象4
二、jQuery的选择器5
1.$函数5
2.基本选择器5
3.层次选择器5
三、操纵属性6
1.attr（property）方法6
2.attr（property,value）方法6
《例03》设置图片的属性"6
3.attr（{...}）方法7
4.removeAttr（）方法7
《例04》删除表格的属性7
四、操纵文本和值8
《例05》thtml（void）方法与html（void）方法的比较8
《例06》html（html）方法8
《例07》:
jQueryjQuery.val（value）的用法举例9
五、操纵CSS类10
《例08》为段落对象添加多个CSS类10
《例09》:
jQueryjQuery.removeClass（[classNames]）举例删除段落的所有CSS类"11
六、集合12
《例》通过原生的JS为所有段落应用CSS类12
《例》each（）方法举例13
《例10》用jQuery商品列表实现鼠标在当前行变色功能13
《例10.1》用jQuery商品列表实现全选反选功能15
七、节点的层次18
《例》层次关系举例18
Day0219
一、操纵行内样式19
《例1》更改行内样式用css（proporty，value）来设置20
《例2》用css（proporty，value）来获取css行内样式20
二，节点增删21
1.增加子节点（inside）21
《例04》append和prepend的用法23
《例05》appendto和prependto的用法23
2.增加兄弟节点（outside）24
after（）方法24
before（）方法24
insertBefore（）方法25
insertAfter（）方法25
《例06》After（）before（）在现有的节点添加兄弟节点25
《例07》insertAfter（）insertBefore（）在现有的节点就爱兄弟节点26
《例08》用jQuery实现表单二级联动26
3、增加包裹28
wrap（）方法28
《例09》增加包裹wrap（），wrapall（），wrapInner（）比较29
4.节点的删除30
empty（）30
remove（）30
《例10》empty（）与remove（）的比较30
unwrap（）31
《例11》unwrap用法举例31
《例12》focous应用jQuery知识应用实例31
《例12.1》focous应用jQuery知识应用实例（完善）33
三、过滤器35
first（）方法35
last（）方法35
eq（）方法35
slice（）方法35
《例13》slice（start，[end]）方法截取一部分举例35
《例14》has（）举例36
《例15》is（）举例37
《例16》filiter（）举例38
《例16.1》filiter（）举例39
《例17》map（）41
day0342
《例1.1》由《例08》延伸用jQuery实现表单二级联动与MySQL数据库连接42
《例1.2》现表单二级联动与MySQL数据库连接45
一、jQuery中的动画效果47
1.基本动画47
show（）方法47
hide（）方法47
toggle（）方法48
《例04》show（），hide（）toggle（）举例48
《练习toggle（）效果》48
2.滑动动画49
slideDown（）49
slideUp（）49
slideToggle（）49
《例05》slideDown（），slideUp（），slideToggle（）举例50
《例06.1》管理员界面效果50
《例06.2》管理员界面效果52
3.淡入淡出效果54
《例07》fadeToggle淡入淡出效果54
《例08》fadeTo（）透明效果55
《例08》京东菜单效果55
《例10》假的下拉列表58
1.什么是XML?
60
2.XML有什么?
60
3.XML的语法结构60
4.XML实体61
Day0461
《例》菜单效果61
一、AJAX64
1什么是AJAX?
64
2.AJAX的工作原理64
二、JQuery与AJAX64
1.get（）方法64
《例02》测试局部刷新64
《例04》获取xml文件65
《例05》删除行局部刷新66
2.post（）方法68
《例1.1》表单双击实现修改68
《例1.1》表单双击实现修改并局部刷新70
1.什么是JSON?
72
<例>获取服务器的JSON数据72
2.JSON的数据格式73
3.PHP与JSON74
《例》）75
《例》）75
Day01
一、jQuery框架
1.什么是jQuery框架?
jQuery是一个轻量级的JavaScript的框架。
2.引用外部的jQuery文件
例：
3.jQuery对象与DOM对象
3.1）基础
jQuery对象是在DOM对象基础上进行封装而得到的对象。
3.2）jQuery对象转换成DOM对象
jQuery.get（索引值）
3.3）DOM对象转换成jQuery对象
$（DOM对象）
《例01》对象转换例举
.red{
color:
red;
}
$（document）.ready（function（）{//页面加载完毕
$（'#button'）.click（function（）{//按钮的单击事件
//将jQuery对象转换成DOM对象
$（'#p1'）.get（0）.align='center';
//DOM对象
varpEle=document.getElementById（'p1'）;
//将DOM对象转换成jQuery对象
$（pEle）.attr（'class','red'）;
}）
}）;
我是段落
4.链式写法
jQuery支持链式写法。
链式写法的根本原理就是对象的方法返回值是对象。
函数的返回值也可以是对象
《例1》链式写法
$（document）.ready（function（）{
$（'#button'）.click（function（）{
/*
$（'#image'）.attr（'src','images/Df78.jpg'）;
$（'#image'）.attr（'alt','2016年新款'）;
$（'#image'）.attr（'title','2016年新款'）;
*/
//链式写法
$（'#image'）.attr（'src','images/Df78.jpg'）
.attr（'alt','2016年新款'）
.attr（'title','2016年新款'）;
//window.alert（$（'#image'）.attr（'src'）.toUpperCase（））;
}）;
}）;
《例2》函数的返回值也可以是对象
//函数的返回值为对象。
functionfun1（）{
varobj={
id:
5,
username:
'Tom',
password:
'123',
eat:
function（sth）{
returnthis.username+'在吃'+sth;
}
};
returnobj;
}
document.write（'编号:
'+fun1（）.id+'
'）;
document.write（'姓名:
'+fun1（）.username+'
'）;
document.write（'密码:
'+fun1（）.password+'
'）;
document.write（fun1（）.eat（'面包'）+'
'）;
二、jQuery的选择器
1.$函数
$函数是jQuery中的工厂函数,可以通过该函数实现任何对象的选择及DOM对象的转换。
jQuery支持CSS2和CSS3的选择器。
2.基本选择器
ID选择器,#id
标记选择器,tagName
类选择器,.className
群组选择器,selector,selector,...
3.层次选择器
子代选择器,selector>selector>...
后派选择器,selectorselector...
三、操纵属性
1.attr（property）方法
描述:
获取指定的属性值
语法:
stringjQuery.attr（property）
2.attr（property,value）方法
描述:
设置对象属性
语法:
jQueryjQuery.attr（property,value）
《例03》设置图片的属性"
$（document）.ready（function（）{
$（'#button'）.click（function（）{
$（'#table'）.attr（{
width:
'300',
height:
'200',
cellpadding:
'10',
cellspacing:
0,
align:
'center',
border:
1
}）;
}）;
}）;
| 11 | 22 |
3.attr（{...}）方法
描述:
设置对象属性
语法:
jQueryjQuery.attr（{key:
value,....}）
4.removeAttr（）方法
描述:
删除属性
语法:
jQueryjQuery.removeAttr（property）
《例04》删除表格的属性
$（document）.ready（function（）{
$（'#button'）.click（function（）{
//jQuery1.7之前的写法
/*
$（'#table'）.removeAttr（'align'）
.removeAttr（'cellpadding'）
.removeAttr（'width'）;
*/
//jQuery1.7之后的版本（>=1.7）
$（'#table'）.removeAttr（'aligncellpaddingwidth'）;
}）;
}）;
| 11 | 22 |
四、操纵文本和值
text（void）方法
描述:
获取对象的文本内容
语法:
stringjQuery.text（void）
text（text）方法（有兼容性问题）
描述:
设置对象的文本内容
语法:
jQueryjQuery.text（text）
html（void）方法
描述:
获取对象的HTML内容
语法:
stringjQuery.html（void）
《例05》thtml（void）方法与html（void）方法的比较
$（function（）{
$（'#button'）.click（function（）{
window.alert（'text（）方法的运行结果是:
'+$（'#p1'）.text（））;
window.alert（'html（）方法的运行结果是:
'+$（'#p1'）.html（））;
}）
}）
我是段落的加粗倾斜文本
html（html）方法
描述:
设置对象的HTML内容
语法:
jQueryjQuery.html（text）
《例06》html（html）方法
$（function（）{
$（'#button'）.click（function（）{
//$（'#p1'）.text（'中华人民共和国万岁'）;
$（'#p1'）.html（'中华人民共和国万岁'）;
}）
}）
我是段落的加粗倾斜文本
val（void）
描述:
获取对象（指表单元素对象如文本框、密码框等）的值
语法:
string|arrayjQuery.val（void）
说明:
该方法等价于jQuery.attr（'value'）
val（value）
描述:
设置对象（指表单元素对象如文本框、密码框等）的值
语法:
jQueryjQuery.val（value）
说明:
该方法等价于jQuery.attr（'value','value'）
《例07》:
jQueryjQuery.val（value）的用法举例
$（function（）{
$（'#button'）.click（function（）{
//通过attr（）方法实现
//$（'#txt'）.attr（'value','12345'）;
$（'#txt'）.val（'1234567'）;
}）
}）
五、操纵CSS类
addClass（）方法
描述:
添加一个/多个CSS类
语法:
jQueryjQuery.addClass（classNames）
说明:
多个CSS类之间以空格分隔;
《例08》为段落对象添加多个CSS类
.color{
color:
red;
}
.size{
font-size:
50px;
}
.style{
font-style:
italic;
}
$（function（）{
$（'#button'）.click（function（）{
//多个类名称之间以空格分隔
$（'#p1'）.addClass（'sizestyle'）;
}）
}）
这是原来的段落
hasClass（）方法
描述:
返回是否存在指定的CSS类
语法:
booleanjQuery.hasClass（className）
removeClass（）方法
描述:
删除CSS类
语法:
jQueryjQuery.removeClass（[classNames]）
说明:
A.多个CSS类名称之间以空格分隔;
B.如果省略classNames参数,则删除所有的CSS类（但仍会保留class属性）
《例09》:
jQueryjQuery.removeClass（[classNames]）举例删除段落的所有CSS类"
.color{
color:
red;
}
.size{
font-size:
50px;
}
.style{
font-style:
italic;
}
$（function（）{
$（'#button'）.click（function（）{
//$（'#p1'）.removeClass（）;
$（'#p1'）.removeAttr（'class'）;
}）
}）
这是原来的段落
六、集合
《例》通过原生的JS为所有段落应用CSS类
.red{
color:
red;
}
.size{
font-size:
80px;
}
$（function（）{
$（'#button'）.click（function（）{
$（'p'）.addClass（'size'）.html（'哈哈哈'）;
}）
}）
functionsetParagraphClass（）{
varpEles=document.getElementsByTagName（'p'）;
for（varn=0;npEles.item（n）.className='red';
}
}
我是标题1
我是段落-1
我是段落-2
我是段落-3
size（）方法
描述:
获取集合中包含的元素数量
语法:
intjQuery.size（）
each（）方法
描述:
迭代集合中的每一个对象
语法:
jQueryjQuery.each（function（[index[,element]]）{
}）
《例》each（）方法举例
$（function（）{
$（'#button'）.click（function（）{
$（'p'）.each（function（）{
$（this）.html（$（this）.html（）+Math.r
升级会员 