jQuery分解.docx
- 文档编号:7087041
- 上传时间:2023-01-17
- 格式:DOCX
- 页数:11
- 大小:19.18KB
jQuery分解.docx
《jQuery分解.docx》由会员分享,可在线阅读,更多相关《jQuery分解.docx(11页珍藏版)》请在冰豆网上搜索。
jQuery分解
第1章jQuery入门
1、jQuery基本代码:
$(document).ready(function(){
})
或
$().ready(function(){
})
或
$(function(){
})
2、表格对象的奇偶行:
$(“tr:
even”):
表格的偶数行2,4,6,8,10......
$(“tr:
odd”):
表格的奇数行1,3,5,7,9......
3、获取DOM对象的方法:
a)document.getElementById(“id”)
b)document.getElementsByName(“name”)
c)document.getElementsByTagName(“TagName”)
4、jQuery对象:
通过ID获取对象的代码:
$(“#id”)
等价于DOM对象的代码:
Document.getElementById(id)
5、jQuery对象和DOM对象的相互转化
a)jQuery对象转换为DOM对象:
[index]或.get(index)
如:
varcr=$jq[0]或varcr=$jq.get(0)
b)DOM对象转换为jQuery对象
如:
var$jq=$(cr)
注意:
jQuery对象不能使用DOM对象的方法
DOM对象不能使用jQuery对象的方法
6、CSS样式:
a)按选择器划分
i.类选择器:
样式名称以小圆点.开头
ii.标签选择器:
以标签名命名
iii.ID选择器:
样式名称以#开头
b)按书写位置划分
i.行内样式:
写在每个标签中的style属性里
ii.内嵌样式:
写在head标签中的style标签里
iii.外部样式:
外部css文件
7、addClass方法:
动态给jQuery对象添加一个类样式
8、removeClass方法:
动态移除jQuery对象上的某个类样式
课后练习:
第一章
1、注册页面中单击注册按钮时,如果没有勾选同意协议的复选框,则弹出请同意会员协议条款的提示框,否则跳转到注册成功页面
2、实现双色行效果,且当鼠标滑入某个单元格时实现高亮显示。
第2章jQuery选择器
1、什么是jQuery选择器:
一串具有特殊含义的字符串。
把DOM对象包装为jQuery对象。
2、选择器的特性
a)简化代码编写
b)隐式迭代
c)无需判断对象是否存在:
不产生异常
3、基本选择器:
根据id选择元素:
$("#id")
根据标签名选择元素:
$("标签名")
根据class选择元素:
$(".class")
选择所有的元素:
$("*")
根据多种选择器选择元素:
$("selector1,selector2...")
1、选择ID为one的元素:
$("#one")
2、选择class为mini的所有元素:
$(".mini")
3、选择元素名为div的所有元素:
$("div")
4、选择所有元素:
$("*")
5、选择所有的span元素和id为two的元素:
$("span,#two")
4、层次选择器:
选择所有的子孙后代:
$("选择器1选择器2")
选择所有的儿子:
$("选择器1>选择器2")
选择下一个兄弟元素:
$("选择器1+选择器2")
选择后面所有的兄弟元素:
$("选择器1~选择器2")
1、选择body内的所有的div:
$("bodydiv")
选择div内的所有class为mini的元素:
$("div.mini")
2、在body内,选择子元素是div的:
$("body>div")
选择div内的id为three的子元素:
$("div>#three")
3、选择class为one的下一个div元素:
$(".one+div")
选择id为two的下一个class为mini的元素:
$("#two+.mini")
4、选择id为two的后面所有的div元素:
$("#two~div")
选择id为one的后面所有的class为mini的元素:
$("#one~.mini")
5、过滤器:
1、选择第一个元素:
:
first
2、选择最后一个元素:
:
last
3、选择去掉指定的选择器的元素:
:
not(选择器)
4、选择索引值为偶数的元素:
:
even
5、选择索引值为奇数的元素:
:
odd
6、选择等于某个索引值的元素:
:
eq(index)
7、选择大于某个索引值的元素:
:
gt(index)
8、选择小于某个索引值的元素:
:
lt(index)
9、选择所有的header元素:
:
header
10、选择所有正在执行动画的元素:
:
animated
6、内容过滤器:
1、匹配包含某个文本的元素:
:
contains(text)
2、匹配不含有子元素或文本的元素:
:
empty
3、匹配含有指定的选择器的元素:
:
has(选择器)
4、匹配含有子元素或文本的元素:
:
parent
7、可见性过滤器:
1、匹配所有可见的元素:
:
visible
2、匹配所有不可见的元素:
:
hidden
8、表单选择器:
1、选择所有的表单元素(input、textarea、select、button)
:
input
2、选择所有的文本框:
:
text
3、选择所有的密码框:
:
password
4、选择所有的单选按钮:
:
radio
5、选择所有的复选框:
:
checkbox
6、选择所有的提交按钮:
:
submit
7、选择所有的重置按钮:
:
reset
8、选择所有的普通按钮:
:
button
9、选择所有的文件域:
:
file
10、选择所有的隐藏域:
:
hidden
11、选择所有的图像域:
image
img
12、选择所有的多行文本框:
textarea
13、选择所有的下拉列表框:
select
9、表单过滤器
匹配所有的可用元素:
:
enabled
匹配所有的不可用元素:
:
disabled
匹配所有被选中的元素:
:
checked
匹配所有选中的选项:
:
selected
10、如果属性值中含有'.'、'#'、'('、']'等特殊字符,必须使用转义符进行转义
如:
$("my#name")必须写成$("my\\#name")
11、选择器中空格的含义:
$(".myClass:
hidden")表示选择class为myClass的元素当中的隐藏子元素
$(".myClass:
hidden")表示选择隐藏的class为myClass的元素
课后练习:
1)给页面的每一个p标签编写click事件,单击任意一个p标签时
弹出该p标签中的文本内容
2)获取所有被选中的复选框的文本
3)鼠标移进一个层时,另一个层显示;移出则另一个层隐藏
4)当焦点进入文本框时,文本框中的文本内容自动消失;
失去焦点时,如果文本框中的值没有改变,则自动还原成初始值
第3章DOM操作和事件处理
1、创建元素:
a)vara=$(“所创建元素的静态代码”)
b)js:
vara=document.createElement(标签名)
2、插入元素
a)在前面的元素中插入后面的元素:
i.append():
元素内部追加另一个元素
ii.prepend():
元素内部前置另一个元素
iii.after():
元素后面插入另一个元素
iv.before():
元素前面插入另一个元素
b)在后面的元素中插入前面的元素:
i.appendTo():
元素内部追加另一个元素
ii.prependTo():
元素内部前置另一个元素
iii.insertAfter():
元素后面插入另一个元素
iv.insertBefore():
元素前面插入另一个元素
3、复制元素
a)clone()
b)clone(true):
复制元素的同时复制该元素的事件
4、删除元素
a)remove()
5、设置属性
a)获取属性:
attr(属性名)
b)修改属性:
attr(属性名,属性值)
c)移除属性:
removeAttr(属性名)
6、设置样式
a)添加样式:
addClass(类样式名)
b)移除样式:
removeClass(类样式名)
7、window.onload和$(document).ready()的区别
a)window.onload不能多次使用,$(document).ready()可以出现多次
b)$(document).ready(fn)可以简写;$().ready(fn);$(fn)
---fn代表函数
8、常用事件:
a)click():
单击事件
b)change():
下拉列表框选项发生改变事件
c)mouseover():
鼠标移入事件
d)mouseout():
鼠标移开事件
e)focus():
获取焦点事件
f)blur():
失去焦点事件
g)each():
循环所有元素
9、其他常用函数:
a)siblings():
当前对象的其他兄弟姐妹
b)next():
当前对象的下一个兄弟
c)show():
显示
d)hide():
隐藏
e)index():
获取索引值
10、其他函数
a)bind(type,fn):
绑定事件
b)one(type,fn):
一次性绑定
c)unbind(type,fn):
撤销绑定
d)trigger(event):
在页面加载的时候执行该事件
e)event:
事件
f)target:
触发者
g)type:
事件类型
h)this:
事件对象
i)data:
传入参数
j)Result:
返回值
k)pagex/y:
水平/垂直坐标
第4章动画和插件
1、动画函数
a)Show(speed,[callBack])
b)Hide
c)Fadein
d)Fadeout
e)Slideup
f)Slidedown
g)Animate(params,speed,[callback])
h)Speed的取值为:
slow,normal,fast,时间值(单位:
毫秒)
2、表单验证
a)$(“#表单ID”).validate()----设置需要验证的元素为对应的类样式
b)$(“#表单ID”).validate({
rules:
{//验证规则
元素1name:
{
验证条件1:
true,
验证条件2:
true,
……
},
元素2name:
{
验证条件1:
true,
验证条件2:
true,
……
}
},
Messages:
{//自定义验证提示文本
元素1name:
{
验证条件1:
提示信息,
验证条件2:
提示信息,
……
},
元素2name:
{
验证条件1:
提示信息,
验证条件2:
提示信息,
……
}
},
errorElement:
’元素名’,
Success:
function(){
//验证通过后的提示信息和样式
}
})
第5章Ajax应用
1、JavaScript对象
a)创建对象
Java:
类名对象名=new类名();
VarobjectA=newObject();
VarobjectB=Object();//省略new关键字
b)创建对象属性并赋值
对象名.属性名=值;
objectA.name=’张三’;
objectB.name=’’
objectB.address=’’
objectA.school=objectB
c)访问属性
对象名.属性名
Alert(objectA.school)
d)嵌套属性:
对象名.属性名=对象名
e)用索引方式访问
2、Json对象
a)创建JSON对象:
使用{}创建一个对象
b)创建对象属性并赋值:
使用属性名:
值创建属性并赋值
c)访问属性:
对象名.属性名
d)创建json对象集合:
var对象名=[json对象1,json对象2……]
e)创建并调用json对象方法:
方法名:
function(){}
对象名.方法名()
3、Ajax
a)概念:
AsynchronousJavaScriptandXML,不是一门新的语言,而是多种技术的组合。
包括:
i.使用XHTML和CSS标准化呈现
ii.使用DOM实现动态显示和交互
iii.使用XML和XSLT进行数据交换与处理
iv.使用XMLHttpRequest进行异步数据读取
v.最后用JavaScript绑定和处理所有数据
4、XMLHttpRequest对象
a)XMLHttpRequest对象常用属性和事件
i.readyState
1.初始化状态:
0
2.Open()方法已调用:
1
3.Send()方法已调用:
2
4.所有响应头部都已经接收到。
响应体开始接收但未完成:
3
5.HTTP响应已经完全接收:
4
ii.responseText属性:
客户端接收到的HTTP响应的文本内容
iii.XMLHttpRequest对象常用方法
(1)open():
初始化HTTP请求参数
(2)send():
发送HTTP请求
5、jQuery中的Ajax
a)get()方法:
$.get(url,[data],[callback],[type])
b)Post()方法:
$.get(url,[data],[callback],[type])
c)load()方法:
$().load(url,[data],[callback])
d)getJSON()方法:
$.getJSON(url,[data],[callback])
e)ajax()方法:
$.ajax(options)
注意:
方法中的参数data表示请求的数据,也就是页面传给服务器的数据,而回调函数中的data表示响应的数据,也就是服务器返回给页面的数据。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 分解