使用JQuery快速高效制作网页交互特效
Posted Smina俊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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 元素
以上是关于使用JQuery快速高效制作网页交互特效的主要内容，如果未能解决你的问题，请参考以下文章