使用JQuery快速高效制作网页交互特效
第二章 JavaScript对象
浏览器对象模型(BOM)是JavaScript的组成之一,window对象是整个BOM的核心
window对象的常用方法
prompt():显示可提示用户输入的对话框
alert():显示一个带有提示信息和一个"确定"的按钮的警示对话框
confirm():显示一个滴啊有提示信息,"确定"和"取消"按钮的对话框
close():关闭浏览器窗口
open():打开一个新的浏览器窗口,加载给定URL制定的文档
setTimeout():在制定的毫秒数后调用函数或计算表达式
setInterval():按照制定的周期(以毫秒计)来调用函数或表达式
window对象的常用事件
onload:一个页面或一幅图像完成加载
onmouseover:鼠标指针移到某个元素之上
onclic:鼠标单击某个对象
onkeydown:某个键盘按键被按下
onchange:域的内容被改变
window对象的常用属性
history:有关客户访问过的URL的信息
location:有关当前URL的信息
history对象的方法
back():加载history对象列表中的前一个URL
forward():加载histrory对象列表中的后一个URL
go():加载history对象列表中的某个具体URL
location对象的属性和方法
host:设置或返回主机名和当前URL的端口号
hostname:设置或返回当前URl的主机名
href:设置或返回完整的URL
reload():重写加载当前温度
replace():用新的文档替换当前文档
document对象的方法
getElementById():返回对拥有指定id的第一个对象的引用
getElementsByName():返回带有指定名称的对象的集合
getElementsByTagName():返回带有指定标签名的对象的集合
write():像文档写文本,HTML表达式或JavaScript代码
定时函数的清除
clearTimeout(setTimeout()返回的ID值)
clearInterval(setInterval()返回的ID值)
Date对象的方法
getDate():返回Date对象的一个月中的每一天,其值为1~31
getDay():返回Date对象的星期中的每一天,其值为0~6
getHours():返回Date对象的小时数,其值为0~23
getMinutes():返回Date对象的分钟数,其值为0~59
getSeconds():返回Date对象的秒数,其值为0~59
getMonth:返回Date对象的月份,其值为0~11
getFullYear():返回Date对象的年份,其值为4位数
getTime():返回自某一时刻(1970年1月1日)以来的毫秒数
Math对象的方法
ceil():对数进行上舍入
floor():对数进行下舍入
round():巴蜀四舍五入为最接近的数
random():返回0-1的随机数
第三章 初识jQuery
jQuery是一个优秀的JavaScript库, 使用它可以 大大提高Web客户端的开发效率.
要想使用jQuery的功能,需要首先引用jQuery库文件。 可以使用addClass()方法和css()方法为DOM元素添加样式.
$(document).ready()与window.onload使用场合类似,但有差异 jQuery中的click()方法对应JavaScript中的onclick事件
jQuery代码中常见的元素包括工厂函数,选择器和方法。 jQuery程序代码的特色:包含$符号和连缀操作.
每个页面都有对应DOM模型,DOM模型 包括元素节点,文本节点和属性节点。
DOM对象转换成jQuery对象 var $tex=$(DOM对象)
jQuery对象转换成DOM对象 var tex=$tex.get(0);或 var tex=$tex[0];
使用next()方法可以获得所匹配元素集合中每个元素其后紧邻的 同辈元素。
第四章 jQuery选择器
基本选择器
标签选择器:根据给定的标签名匹配元素,返回元素集合,$("h2")选取所有h2元素
ID选择器:根据给定的Id匹配元素,返回单个元素,$("#title"),选取id为title的元素
类选择器:根据给定的class匹配元素,返回元素集合,$(".a")选取所有class为a的元素
并集选择器:将每一个选择器匹配的元素合并后一起返回,元素集合,$("div,.a")选取所有div,类为a的元素
交集选择器:匹配制定class或id的某元素或元素集合(若在同一页面中指定id的元素返回值,则一定是单个元素;若制定class的元素,则可以是单个元素,也可以是元素集合),返回单个元素或元素集合,$("h2.a")选取所有拥有class为title的h2元素
全局选择器: 匹配所有元素,集合元素,$("*")选取所有元素
层次选择器
后代选择器:返回元素集合,$("#a span")选取#a下所有<span>元素
子选择器:返回元素集合,$("#a>span"),选取#a下子元素<span>
相邻元素选择器:返回元素集合,$("h2+dl")选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器:元素集合,$("h2~dl")选取<h2>元素之后所有的同辈元素<dl>
属性选择器
选取包含给定属性的元素,返回元素集合,$("[href]")选取含有href属性的元素
选取等于给定属性是某个特定值的元素,元素集合,$("[href="#"]"),选取href属性值为"#"的元素
选取不等于给定属性是某个特定值的元素,返回元素集合,$("[href !="#"]"),选取href属性值不为"#"的元素
选取给定属性是以某个些特定值开始的元素,元素集合,$("[href ^="en"]"),选取href属性值以en开头的元素
选取给定属性是以某个些特定值结尾的元素,元素集合,$("[href $="en"]"),选取href属性值以en结尾的元素
选取给定属性是包含某些值的元素,元素集合,$("[href *="en"]"),选取href属性值中含有txt的元素
选取满足多个条件的复合属性的元素,元素集合,$("li[id][title='新闻要点]")选取含有id属性和title属性为”新闻要点“的<li>元素
基本过滤选择器
:first,选取第一个元素,单个元素,$("li:first")选取所有<li>第一个<li> 元素
:last,选取最后一个元素,单个元素,$("li:last")选取所有<li>最后一个<li> 元素
:not(selectot),选取去除所有与给定选择器匹配的元素,集合元素,$("li:not(.a)")选取class不是a的元素
:even,选取索引是偶数的所有元素(index从0开始),集合元素,$("li:even")选取索引是偶数的所有<li>元素
:odd,选取索引是奇数的所有元素(index从0开始),集合元素,$("li:odd")选取索引是奇数的所有<li>元素
:eq(index),选取索引等于index的元素(index从0开始),单个元素,$("li:eq(1)")选取索引等于1<li>元素
:gt(index),选取索引大于index的元素(index从0开始),集合元素,$("li:gt(1)")选取索引大于1<li>元素,不包括1
:lt(index),选取索引小于index的元素(index从0开始),集合元素,$("li:lt(1)")选取索引小于1<li>元素,不包括1
:header,选取所有标题元素,集合元素,$(":header")选取网页中的所有标题元素
:focus,选取当前获取焦点的元素,集合元素,$(":focus")选取当前获取焦点的元素
可见性过滤选择器
:visible,选取所有可见的元素,集合元素,$(":visible")选取所有可见的元素
:hidden,选取所有隐藏的元素,集合元素,$(":hidden")选取所有隐藏的元素
转义符
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
错误: $("id#a") $("#id[2]")
正确:$("#id\\#a") $("#id\\[2\\") 多一个空格或少一个空格,可能会得到不同的结果。
第五章jQuery中的事件与动画
jQuery中典型事件
单击事件:click(fn),单击鼠标时发生,fn表示绑定的函数
按下键盘触发事件:keydown(fn),按下键盘时发生,fn表示绑定的函数
失去焦点事件:blur(fn),失去焦点时发生,fn表示绑定的函数
常用的鼠标事件
click():触发或将函数绑定到指定元素的click事件,单击鼠标时
mouseover(): 触发或将函数绑定到指定元素的mouseover事件,鼠标指针移过时
mouseout():触发或将函数绑定到指定元素的mouseoutshij,鼠标指针移出时
常用键盘事件
keydown():触发或将函数绑定到指定元素的keydown事件,按下按键时
keyup():触发或将函数绑定到指定元素的keyup事件,释放按键时
keypress():触发或将函数绑定到指定元素的keypress事件,产生可打印的字符时
常用的表单事件
focus():触发或两函数绑定到指定元素的focus事件,获得焦点
blur();触发或将函数绑定到指定元素的blur事件,失去焦点
绑定事件
bind(type,[data],fn):data不是必需的
type:事件类型,主要包括blur,focus,click,moseout等基础事件,还可以自定义事件
[data]:可选参数,作为event.data属性值传递给事件对象的额外数据对象
fn:处理函数,用来绑定的处理函数 使用bind()方法不仅可以一次绑定一个事件,还可以同时绑定多个事件。
移除事件
unbind([type],[fn])
[type]:事件类型,主要包括blur,focus,click,moseout等基础事件,还可以自定义事件
fn:处理函数,用来解除绑定的处理函数
hover()方法
hover(enter,leave); hover()方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时,会触发指定的第1个函数(enter);当鼠标指针移出这个元素时,会触发指定的第2个函数(leave)
toggle()方法
toggle(fn1,fn2,....,fnN);toggle()方法用于模拟鼠标连续click事件。第一次单击元素,触发指定的第一个函数 (fn1);当在此单击同一个元素时,则触发指定的第二个函数(fn2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
控制元素的显示与隐藏
隐藏到显示:$(selector).show([speed],[callback]);
显示到隐藏:$(selector).hide([speed],[callback]);
speed:默认值为"0",变化的速度,毫秒1000,slow,normal,fast callback:可选。
show函数执行完之后,要执行的函数
改变元素的透明度
淡入:$(selector).fadeIn([speed],[callback]) 元素从隐藏到完全可见的过程。
淡出:$(selector).fadeOut([speed],[callback]) 元素从可见到隐藏的过程。
speed:默认值为"0",变化的速度,毫秒1000,slow,normal,fast callback:可选。
show函数执行完之后,要执行的函数
改变元素高度
slideUp(“slow”):若元素的display属性值为block,这个元素会从下到上缩短直至隐藏。
slideDown("slow"):若元素的display属性值为none,这个元素会从上向下延伸显示。
slow,normal,fast(三者对应的世界分别为0.6秒,0.4秒,0.2秒)
第六章使用jQuery操作DOM
样式操作
css(name,value);//设置单个值
css({name:value,name:value,name:value})//同时设置多个属性
name:必需,规定CSS属性的名称,该参数可以是任何css属性。
value:必需,规定CSS属性的值。
name:value:必需,规定要设置样式的属性的"名称:值"对象。
追加样式和移除样式
追加:addClass(class)或addClass(class1 class2..classN)
移除:removeClass(class)或removeClass(class1 class2...classN);
切换样式:toggleClass(class);
内容操作
html([content]) text([content])
html():用于获取第一个匹配元素的HTML内容或文本内容
html(content):用于设置所有匹配元素的HTML内容或文本内容
text():用于获取所有匹配元素的文本内容
text(content):用于设置所有匹配元素的文本内容
属性值的操作:val([value])
value:可选。规定被选元素的新内容。
$(slector)或$(element)或$(html) selector:选择器。
使用jQuery选择器匹配元素
element:DOM元素.以DOM元素来创建jQuery对象
html:HTML代码。使用HTML字符创建jQuery对象
内部插入
append(content):想所选择的元素内部插入内容,即$(A).append(B)表示将B追加到A中。这样插入元素的顺序是最后一个。
appendTo(content):即$(A).appendTo(B).A追加到B中。也是最后一个。
prepend(content):向每个选择的元素内部前置内容。$(A).prepend(B)表示将B追加到A中。这样插入元素的顺序是第一个。
prepend(To(content):即$(A).prepend(To(B).A追加到B中。也是第一个。
外部插入
after(content):想所选择的元素内部插入内容,即$(A).append(B)表示将B追加到A之后。这样插入元素的顺序是最后一个。
insetAfter(content):即$(A).appendTo(B).A追加到B之后。也是最后一个。
before(content):向每个选择的元素内部前置内容。$(A).prepend(B)表示将B追加到A之前。这样插入元素的顺序是第一个。
insertBefore(To(content):即$(A).prepend(To(B).A追加到B之前。也是第一个。
$(selector).remove([expr]):删除整个节点,不保留事件。
$(selector).empty();删除的节点中的内容。
$(selector).removeAttr(name):删除属性
替换节点:
var $A=$(<li>死神</li>")
$("ul li:eq(1)").replacewith($A); 或 $($A).replaceAll("ul li:eq(1)")
复制节点: $("ul li:eq(1)").clone(true).appendTo("ul"); true:表示是否复制事件
获取与设置元素属性
$(selector).attr([name]); //获取属性值 attr([name])
获取和设置单个属性值,如$($a).attr("alt");
attr({[name1:value1],[name2:value2]...[nameN:valueN]}):设置多个属性值,如 $("img").attr({width:"50",height:"100"})
$(selector).children([expr])
var $body=$("body").children();
使用children()方法可以获取<body>元素子元素的个数
alert($body.length) each循环:
$body.each(function(index,dom){ index:下标,dom临
时变量,是dom对象 })
遍历同辈元素
next([expr]): 用于获取紧邻匹配元素之后的元素。同辈元素的下一个。
prev([expr]):用于获取紧邻匹配元素之前的元素。同辈元素的前一个。
siblings([expr]):用于获取位于匹配元素前面和后面的所有同辈元素。
遍历前辈元素
parent([selector]) 参数可选。获取当前匹配元素集合中每个元素的父集元素
parents([selector]) 参数可选。获取当匹配元素集合中每个元素的祖先元素。 可以指定祖先中的任何一个元素。
CSS-DOM操作
css():设置或返回匹配元素的样式属性
height([value]):参数可选。设置或返回匹配元素的高度。如果没有规定长度单位,则使用默认的px作为单位。$("#box").heigh(180);
width([value]): 参数可选。设置或返回匹配元素的宽度。如果没有规定长度单位,则使用默认的px作为单位。$("#box").width(180);
offset([value]):返回以像素为单位的top和left坐标。此方法对可见元素有效。$("#box").offset();
offsetParent():返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative,absolute或fixed的元素 $("#box").offsetParent();
scrollLeft([position]) 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 $("#box").scrollLeft(20) scrollTop([position])参数可选。设置或返回匹配元素相对滚动条顶部的偏移 $("#box").scrollTop20)
第七章 表单校验
在JavaScript中提交方式是,在<form>标签中加属性:onsubmit="return chck()"
在jQuery中$("表单标签").submit(function(){
return chck(); })
表单验证常用的方法和事件
onblur:失去焦点,当光标离开某个文本框时触发
onfocus:获得焦点,当光标进入某个文本框时触发
blur():从文域中移开焦点
focus():从文本域设置焦点,即获得鼠标光标
select();选取文本域中的内容,突出显示输入区域的内容,全选域中内容。
定义正则表达式
普通方式P:var reg=/表达式/附加参数
构造函数: var re=new RegExp("表达式","附加参数")
正则表达式对象实例.test(字符串)
简单模式(具体):var reg1=/cat/
复合模式(抽象):var reg=/^\W+$/;
var str="my cat";
var result=reg.test(str);//true
RegExp对象
exec() :检索字符中是正则表达式的匹配,返回找到的值,并确定位置
test() :检索字符串中指定的值,返回true或false RegExp对象属性(附加参数)
global RegExp对象是否有标志g (代表可以进行全局匹配)
ignoreCase RegExp对象是否有标志i (代表不区分大小写的匹配)
multiline RegExp对象是否有标志m (代表可以进行多行匹配)
String对象的方法
match():找到一个或多个正则表达式的匹配(匹配值)
search():检索与正则表达式匹配的值(索引)
replace():替换与正则表达式匹配的字符串
split():把字符串分割为字符串数组
例: var str="my cat"
var reg=/cat/
var result=str.match(reg);
var strto=str.repleace(/cat/g,"dog") //全局替换,返回替换后的字符串
正则表达式的重复字符
{n} 匹配前一项n次 \d{3}:\d\d\d
{n,} 匹配前一项n次,或者多次
{n,m} 匹配前一项至少n次,但是不能超过m次
* 匹配前一项0次或多次,等价于{0,}
+ 匹配前一项1次或多次,等价于{1,}
? 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}
正则表达式的常用符号
/..../ 代表一个模式的开始和结束
^ 匹配字符串的开始 $ 匹配字符串的结束
\s 任何空白字符(换行,空格)
\S 任何非空白字符(不包含空格)
\d 匹配一个数字字符,等价于[0-9]
\D 除了数字之外的任何字符,等价于[^0-9] 除了0-9以外
\w 匹配一个数字,下划线或字母字符,等价于[A-Za-z0-9]
\W 任何非单子字符,等价于[^a-zA-z0-9_]
. 除了换行符之外的任意字符
表单选择器
:input 匹配所有input,textarea,select和buttjon元素 $("#myform :input")选取表单中所有的input,select和button元素
:text 匹配所有单行文本框 $("#myform :text") 选取type="text"的所有元素
:password 匹配所有的密码框 $("#myform :password") 选取type="password"的元素
:radio 匹配所有单项按钮 $("#myform :radio") 选取type="radio"的元素
:checkbox 匹配所有复选框 $("#myform :checkbox") 选取type="checkbox "的元素
:submit 匹配所有复选框 $("#myform :submit ") 选取type="submit"的元素
:image 匹配所有图像域 $("#myform :image ") 选取type="image"的元素
:reset 匹配所有重置按钮 $("#myform :reset") 选取type="reset"的元素
:button 匹配所有按钮 $("#myform :button") 选取type="button"的元素
:file 匹配所有文件域 $("#myform :file") 选取type="file"的元素
:hidden 匹配所有不可见元素,或者type为hidden的元素 $("#myform :hidden ") 选取type="hidden "的元素
表单选择器表单属性过滤器
:enabled 匹配所有可用元素 $("#userform :enabled")匹配form内部除了编号输入框外的所有元素
:disabled 匹配所有不可用元素 例如禁止输入的文本框
:checked 匹配所有被选中元素(复选框,单项按钮,select中的option)
:selected 匹配所有选中的option 元素