jQuery学习笔记.docx
- 文档编号:9779771
- 上传时间:2023-05-21
- 格式:DOCX
- 页数:22
- 大小:137.98KB
jQuery学习笔记.docx
《jQuery学习笔记.docx》由会员分享,可在线阅读,更多相关《jQuery学习笔记.docx(22页珍藏版)》请在冰点文库上搜索。
jQuery学习笔记
目录
第一章认识jQuery3
1.1window.onload和$(document).ready(function(){})的区别:
3
1.2jQuery对象和dom对象3
第二章JQuery选择器5
2.1基本选择器5
2.2层次选择器5
2.3过滤选择器6
第三章JQuery中的Dom操作9
3.1Dom的分类:
9
3.2jQuery中Dom的分类:
9
3.3属性操作10
3.4样式操作10
3.5遍历节点11
3.6CSS-Dom操作11
第四章JQuery中的事件和动画12
4.1事件绑定12
4.2合成事件12
4.3事件冒泡12
4.4事件属性13
4.5移出事件13
4.6模拟操作13
4.7动画效果14
第五章jQuery对表单,表格的操作及更多应用15
5.1表单的应用15
5.2表单验证15
5.3其他应用16
第六章Ajax的应用17
6.1load(url,[data],[callback])17
6.2jQuery.get(url,[data],[callback])17
6.3jQuery.post(url,[data],[callback],[type])17
6.4jQuery.getScript(url,[callback])17
6.5jQueryAjax事件18
第七章JQuery打造个性网站19
7.1jquery.jqzoom.js插件图片显示放大镜效果19
7.2jquery.thickbox.js插件弹出Div的效果19
7.3点击评分19
7.4放大镜效果19
7.5图片滚动19
第八章jQuery插件开发20
8.1什么是插件20
8.2jQuery插件的机制20
第一章认识jQuery
1.1window.onload和$(document).ready(function(){})的区别:
window.onload
$(document).ready(function(){})
执行时机
等待网页中所有的内容加载完毕(包括图形)才执行。
网页中所有Dom结构绘制完毕之后就执行,可能dom元素关联的东西没有加载完。
编写个数
window.onload=function(){
alert(“test1”);
};
window.onload=function(){
alert(“test2”);
}
输出结果为:
test2
//标准入口
$(document).ready(function(){
alert(“test1”);
});
//简写入口
$(function(){
alert(“test2”);
});
输出结果为:
test1,test2
1.2jQuery对象和dom对象
a).dom:
documentobjectmodel文档对象模型:
获取方法:
getElementById(),
getElementsByName()
getElementsByTagName()。
b).通过jQuery包装Dom对象后产生的对象。
c).jQuery对象和dom对象之间的转换:
jQuery对象转化为dom对象:
var$cr=$(“#cr”);//等同于getElementById(“cr”);
varcr=$cr[0];//varcr=$cr.get(0);
dom对象转化为jQuery对象:
varcr=documentById(“cr”);
var$cr=$(cr);
插件下载地址;
Eclipse:
VisualStudio2008:
注:
平时我们所用到的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery的对象制造工厂。
第二章JQuery选择器
2.1基本选择器
选择器
描述
返回
示例
#id
根据指定的Id匹配一个元素
单个元素
$(“#test”)选取id为test的元素
.class
根据指定的类名匹配元素
集合元素
$(“.#test”)选取所有class为test的元素
element
根据指定的元素名称匹配元素
集合元素
$(“P”)选取去所有的元素
*
匹配所有元素
集合元素
$(“*”)选取所有的元素
Selector1,Selector2…
将每一个选择器匹配到的元素合并到一起返回。
集合元素
$(“div,span,.myClass”)选取所有
2.2层次选择器
选择器
描述
返回值
示例
$(“ancestordescentant”)
选择ancestor元素里面的所有descentant元素
集合元素
$(“divspan”)选取
$(“parent>child”)
选择parent元素下的child(子)元素
集合元素
$(“div>span”)选取
$(“prev+next”)
选取紧邻在prev元素后的next元素
集合元素
$(“.one+div”)选取class为one的下一个
$(“prev~siblings”)
选取prev元素之后的所有的siblings元素
集合元素
$(“#two~div”)选取id为two的元素后面的所有
2.3过滤选择器
2.3.1基本过滤选择器
选择器
描述
返回值
示例
:
first
匹配找到的第一个元素
单个元素
查找表格的第一行:
$("tr:
first")
:
last
匹配找到的最后一个元素
单个元素
查找表格的最后一行:
$("tr:
last")
:
not(selector)
去除所有与给定选择器匹配的元素
集合元素
查找所有未选中的input元素:
$("input:
not(:
checked)")
:
even
匹配所有索引值为偶数的元素,从0开始计数
集合元素
查找表格的1、3、5...行:
$("tr:
even")
:
odd
匹配所有索引值为奇数的元素,从0开始计数
集合元素
查找表格的2、4、6行:
$("tr:
odd")
:
eq(index)
匹配一个给定索引值的元素
注:
index从0开始计数
集合元素
查找第二行:
$("tr:
eq
(1)")
:
gt(index)
匹配所有大于给定索引值的元素
注:
index从0开始计数
集合元素
查找第二第三行,即索引值是1和2,也就是比0大:
$("tr:
gt(0)")
:
lt(index)
选择结果集中索引小于N的elements
注:
index从0开始计数
集合元素
查找第一第二行,即索引值是0和1,也就是比2小:
$("tr:
lt
(2)")
:
header
选择所有h1,h2,h3一类的header标签.
集合元素
给页面内所有标题加上背景色:
$(":
header").css("background","#EEE");
:
animated
匹配所有正在执行动画效果的元素
集合元素
只有对不在执行动画效果的元素执行一个动画特效:
$("#run").click(function(){
$("div:
not(:
animated)").animate({left:
"+=20"},1000);
});
2.3.2属性过滤器:
选择器
描述
返回值
示例
[attribute]
匹配包含给定属性的元素
集合元素
查找所有含有id属性的div元素:
$("div[id]")
[attribute=value]
匹配给定的属性是某个特定值的元素
集合元素
查找所有name属性是newsletter的input元素:
$("input[name='newsletter']").attr("checked",true);
[attribute!
=value]
匹配给定的属性是不包含某个特定值的元素
集合元素
查找所有name属性不是newsletter的input元素:
$("input[name!
='newsletter']").attr("checked",true);
[attribute^=value]
匹配给定的属性是以某些值开始的元素
集合元素
$("input[name^='news']")
[attribute$=value]
匹配给定的属性是以某些值结尾的元素
集合元素
查找所有name以'letter'结尾的input元素:
$("input[name$='letter']")
[attribute*=value]
匹配给定的属性是以包含某些值的元素
集合元素
查找所有name包含'man'的input元素:
$("input[name*='man']")
[attributeFilter1][attributeFilter2]
[attributeFilterN]
复合属性选择器,需要同时满足多个条件时使用。
集合元素
找到所有含有id属性,并且它的name属性是以man结尾的:
$("input[id][name$='man']")
内容过滤器选择器,可见性过滤器选择器,父子过滤器选择器
2.3.3表单选择器
选择器
描述
返回值
示例
:
input
匹配所有input,textarea,select和button元素
集合元素
查找所有的input元素:
$(":
input")
:
text
匹配所有的单行文本框.
集合元素
查找所有文本框:
$(":
text")
:
password
匹配所有密码框.
集合元素
查找所有密码框:
$(":
password")
:
radio
匹配所有单选按钮.
集合元素
查找所有单选按钮
:
checkbox
匹配所有复选框
集合元素
查找所有复选框:
$(":
checkbox")
:
submit
匹配所有提交按钮.
集合元素
查找所有提交按钮:
$(":
submit")
:
image
匹配所有图像域.
集合元素
匹配所有图像域:
$(":
image")
:
reset
匹配所有重置按钮.
集合元素
查找所有重置按钮:
$(":
reset")
:
button
匹配所有按钮.这个包括直接写的元素button.
集合元素
查找所有按钮:
$(":
button")
:
file
匹配所有文件域.
集合元素
查找所有文件域:
$(":
file")
第三章JQuery中的Dom操作
3.1Dom的分类:
·DomCore:
getElementById,getElementByTagName,getAttribute和setAttribute等方法。
·HTMLDom:
document.forms,element.src。
·CSS-DOM:
element.style.color=”red”;
3.2jQuery中Dom的分类:
3.2.1查找节点
3.2.1.1查找元素节点
var$li=$(‘ulli:
eq
(1)’);//获取ul中的第二个li节点
varli_txt=$li.text();//获取第二个li节点的文本内容
alert(li_txt);//打印文本内容
3.2.1.2查找属性节点:
使用attr()方法来获取元素的各个属性的值。
var$para=$(‘p’);
varp_txt=$para.attr(“title”);
alert(p_txt);
3.2.2创建节点:
$(html)
var$li_1=$(“
”);var$li_2=$(“
”);$(“ul”).append($li_1);
$(“ul”).append($li_2);
3.2.3插入节点
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()
3.2.4删除节点
.remove():
删除节点,返回当前删除的对象;
.empty():
清空节点里面的内容;
3.2.5复制节点
.clone():
复制当前的节点。
3.2.6替换节点
.replaceWith();
.replaceAll()。
3.2.7包裹节点
.wrap();
.wrapAll()。
3.3属性操作
.attr(“title”);//获取属性
.attr(“title”,”提示”);//设置属性
.removeAttr(“title”);//删除属性
3.4样式操作
attr(“class”,“”);//仅仅是修改样式,样式只有一个。
AddClass(“”);//追加样式,可以出现多个样式
RemoveClass(“”);//删除样式
ToggleClass(“”);//切换样式
HasClass(“”);//判断某个元素中是否含该样式=$(‘p’).is(“.another”)
3.5遍历节点
children():
取得匹配元素的所有孩子的元素。
类似:
childNodes
next():
取得匹配元素的后一个同辈元素。
prev():
取得匹配元素的前一个同辈元素。
siblings():
取得匹配元素前后所有的同辈元素。
closest():
取得最近的匹配元素。
首先检查当前元素是否匹配,匹配的话则返回当前元素,否则向上查找父元素,直到找到为止。
3.6CSS-Dom操作
$(‘p’).css(“height”);//取得属性
$(‘p’).css(“height”,”20px”);//设置单个属性
$(‘p’).css({"top":
"10px","left":
"20px"});//设置多个css属性
$(‘p’).height();
$(‘p’).height“20px”();
$(‘p’).backgroundColor();
$(‘p’).backgroundColor(“red”);//采用驼峰式写法
注:
html(),text().val()方法也很常用。
第四章JQuery中的事件和动画
4.1事件绑定
bind(type,[,data],fn])
type(String):
事件类型;事件类型包括以下:
blur,focus,load,resize,scroll,mouseover,mouseout,dbclick,click等等。
data(Object):
(可选)作为event.data属性值传递给事件对象的额外数据对象。
fn(Function):
绑定到每个匹配元素的事件上面的处理函数。
exe1.
$("p").bind("click",function(){
alert($(this).text());
});
exe2.
functionhandler(event){
alert(event.data.foo);
}
$("p").bind("click",{foo:
"bar"},handler);
4.2合成事件
jQuery有两个合成事件:
hover()和toggle()的方法。
a)hover(enter,leave)。
作用是模拟光标悬停事件。
当光标移动到元素上时,会触发指定的第一个函数;当光标移出这个元素的时候,会触发指定的第二个函数。
b)toggle(fn1,fn2,…fnN)。
作用是用于模拟鼠标连续单击事件。
第一单击执行第一个函数,第二次单击执行第二个函数,直到最后一个。
然后循环执行函数。
4.3事件冒泡
stopPropagation()方法只阻止一个事件起泡。
preventDefault()方法只取消默认的行为。
二者均可以采用简写的方式:
returnfalse。
4.4事件属性
每个浏览器对event都有不同的地方,Jquery对Event做了标准化所以可以放心用。
*。
target 这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compareevent.targettothis)
*.pageX:
鼠标的left属性,相对于page
*.pageY:
鼠标的top属性,相对于page
*preventDefault():
这个方法被调用,则原有事件就被忽略。
(例如clickedlink就不会去新的Url了)
*stopPropagation():
让Jquery停止事件冒泡
*.Data:
如果事件中还有EventData你就可以用这个属性获得对应Eventdata数据了。
*ctrlKey:
类型:
Boolean,说明:
Ctrl键是否按下
*shiftKey:
类型:
Boolean,说明:
Shift键是否按下
*altKey:
类型:
Boolean,说明:
Alt键是否按下
*charCode:
类型:
Number,说明:
最后响应键盘按键的charCode值
*keyCode:
类型:
Number,说明:
最后响应键盘按键的keyCode值
*button:
类型:
Number,说明:
按下的鼠标键,左键:
1,右键:
2,中键:
4
*which:
类型:
Number,说明:
最后响应的是哪个按键,如果是键盘按键则等于charCode||keyCode;如果是鼠标按键,左键:
1,右键:
3,中键2
type:
事件类型
relatedTarget:
对于鼠标事件,标示触发事件时离开或者进入的DOM元素currentTarget:
冒泡前的当前触发事件的DOM对象,等同于this.
result:
上一个事件处理函数返回的值
screenX/Y:
对于鼠标事件,获取事件相对于屏幕原点的水平/垂直坐标。
4.5移出事件
unbind([type][,data])。
如果没有参数则删除所有的事件。
如果提供了事件的类型做参数,则只删除该类型参数的绑定的事件。
如果把绑定的的函数名称作为参数,那么只删除对应的函数。
4.6模拟操作
1.trigger(type[,data])。
该方法是用来模拟操作。
$("p").trigger("click")。
2.triggerHandler(type,[data])。
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。
但不会执行浏览器默认动作
参数:
type(String):
要触发的事件类型。
data(Array):
(可选)传递给事件处理函数的附加参数。
$("#old").click(function(){
$("input").trigger("focus");
});
4.7动画效果
方法名
说明
hide和show
同事修改多个样式属性,即高度,宽度,透明度。
fadeIn和fadeOut
只改变不透明度
slideUp和slideDown
只改变高度
fadeTo
只改变透明度
toggle
用来代替hide方法和show方法,所以会同时修改多个样式的属性即高度,宽度和不透明度。
slideToggle
用来代替slideUp和slideDown,只能改变高度。
animate
属于自定义动画的方法,以上各方法的实质都是调用该函数。
Exe1.
$(this).next().toggle("slow");
Exe2.
$(this).next().slideToggle("slow");
Exe3.
$(this).next().animate({height:
"100px"},"slow").animate({height:
"toggle"});
Exe4.
"$('#siderbar').slideUp('slow');
第五章jQuery对表单,表格的操作及更多应用
5.1表单的应用
选择器
描述
返回值
示例
:
input
匹配所有input,textarea,select和button元素
集合元素
查找所有的input元素:
$(":
input")
:
text
匹配所有的单行文本框.
集合元素
查找所有文本框:
$(":
text")
:
password
匹配所有密码框.
集合元素
查找所有密码框:
$(":
password")
:
radio
匹配所有单选按钮.
集合元素
查找所有单选按钮
:
checkbox
匹配所有复选框
集合元素
查找所有复选框:
$(":
checkbox")
:
submit
匹配所有提交按钮.
集合元素
查找所有提交按钮:
$(":
submit")
:
image
匹配所有图像域.
集合元素
匹配所有图像域:
$(":
image")
:
reset
匹配所有重置按钮.
集合元素
查找所有重置按钮:
$(":
reset")
:
button
匹配所有按钮.这个包括直接写的元素button.
集合元素
查找所有按钮:
$(":
button")
:
file
匹配所有文件域.
集合元素
查找所有文件域:
$(":
file")
5.2表单验证
1.表格的应用:
奇偶行不同色:
$(this).find('tr:
odd>td').css('backgroundColor',opts.oddColor);
$(this).find('tr:
even>td').css('backgroundColor',opts.evenColor);
鼠标滑过变色:
$(this).mouseover(function(){
$(this).find('td').css(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 学习 笔记