jQuery学习精心整理.docx
- 文档编号:2475237
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:8
- 大小:18.39KB
jQuery学习精心整理.docx
《jQuery学习精心整理.docx》由会员分享,可在线阅读,更多相关《jQuery学习精心整理.docx(8页珍藏版)》请在冰豆网上搜索。
jQuery学习精心整理
一、jQuery引用方法一、
方法二、
二、jQuery语法
基础语法是:
$(selector).action()
---美元符号定义jQuery
---选择符(selector)“查询”和“查找”HTML元素
---jQuery的action()执行对元素的操作
示例
$(document).ready(function(){---防止文档在完全加载之前运行jQuery代码
$(botton).onclick(function(){
$(this).hide()-隐藏当前元素
$("p").hide()-隐藏所有段落
$(".test").hide()-隐藏所有class="test"的所有元素
$("#test").hide()-隐藏所有id="test"的元素
});
});
三、jQuery选择器
1、jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取
元素。
$("p.intro")选取所有class="intro"的
元素。
$("p#demo")选取所有id="demo"的
元素。
2、jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!
='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
3、jQueryCSS选择器
$('"p").css("background-color","red");
四、事件函数
jQuery事件
Event函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
五、JQuery隐藏与显示
1、语法
$("selector").hide(speed,callback);//speed:
显示隐藏的速度,slow,fast或毫秒
$("selector").show(speed,callback);//callback:
显示或隐藏后执行的函数名
$(selector).toggle(speed,callback);//切换显示和隐藏
六、jQuery淡入淡出
$(selector).fadeIn(speed,callback);//用于淡入已隐藏的元素。
$(selector).fadeOut(speed,callback);//淡出显示的元素。
$(selector).fadeToggle(speed,callback);//淡入淡出
fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。
$(selector).fadeTo(speed,opacity,callback);
七、jQuery上下滑动
$(selector).slideDown(speed,callback);\\向下滑动元素
$(selector).slideUp(speed,callback);\\向上滑动元素
$(selector).slideToggle(speed,callback);\\向上及向下滑动元素
八、jQuery动画
$(selector).animate({params},speed,callback);
--params参数定义形成动画的CSS属性
***如需对位置进行操作,要先把元素的CSSposition属性设置为relative\fixed\absolute****
实例:
$("button").click(function(){
$("div").animate({
left:
'250px'
opacity:
'0.5'---透明度
height:
'+=150px'----相对应用,在原先基础上
width:
'toggle'--预设值,hide\show\toggle
//队列animate
vardiv=$("div")
div.animate({CSS属性},speed,callback);//
div.animate({CSS属性},speed,callback);
})
}
九、停止动画stop()
$(selector).stop();--停止当前动画,继续下一个动画
$(selector).stop(true);----停止所有动画
$(selector).stop(true,true);----停止动画完成当前动画
十、callback的用法
实例
$("p").hide(1000,function(){alert("test");});
十一、jQuery方法、动作连接用法
$(selector).css("color","red").slideUp(100).slideDown(100);---每个方法可换行,中途不要用分号
十二、jQuery获取与设置
∙text()-设置或返回所选元素的文本内容
∙html()-设置或返回所选元素的内容(包括HTML标记)
∙val()-设置或返回表单字段的值
∙attr()方法用于获取属性值
实例:
alert("html:
"+$(selector).html());
十二、使用回调函数设置
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return"Oldtext:
"+origText+"Newtext:
Helloworld!
(index:
"+i+")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return"Oldhtml:
"+origText+"Newhtml:
Helloworld!
(index:
"+i+")";
});
});
$("button").click(function(){
$("#w3s").attr("href",function(i,origValue){
returnorigValue+"/jquery";
});
});
$("button").click(function(){--同时设置多个属性值
$("#w3s").attr({
"href":
"
"title":
"W3SchooljQueryTutorial"
});
});
十三、在被选元素的位置插入内容
append()-在被选元素的结尾插入内容
prepend()-在被选元素的开头插入内容
after()-在被选元素之后插入内容
before()-在被选元素之前插入内容
functionafterText()
{
vartxt1="I";//以HTML创建新元素
vartxt2=$("").text("love");//通过jQuery创建新元素
vartxt3=document.createElement("big");//通过DOM创建新元素
txt3.innerHTML="jQuery!
";
$("img").after(txt1,txt2,txt3);//在img之后插入新元素
}
十四、jQuery删除元素
remove()----删除被选中的元素
empty()----删除被选中的元素的子元素
$("p").remove(“.cl”)---删了“p”中class为cl的元素
十五、jQuery--获取并设置CSS类
∙addClass()-向被选元素添加一个或多个类
∙removeClass()-从被选元素删除一个或多个类
∙toggleClass()-对被选元素进行添加/删除类的切换操作
∙css()-设置或返回样式属性
$(selector).addClass("CSS类名")---设置多个CSS类以空格隔开
$(selector).removeClass("CSS类名")---移除CSS类
$(selector).css("propertyname")----返回CSS属性的值
$(selector).css("propertyname","value")----设置CSS属性的值
$(selector).css({"propertyname":
"value1","propertyname":
"value"});---设置多个CSS属性值
十六、jQuery尺寸
jQuerywidth()和height()方法
$(selector).width()方法设置或返回元素的宽度(不包括内边距、边框或外边距)
$(selector).height()方法设置或返回元素的高度(不包括内边距、边框或外边距)
jQueryinnerWidth()和innerHeight()方法
innerWidth()方法返回元素的宽度(包括内边距)。
innerHeight()方法返回元素的高度(包括内边距)。
jQueryouterWidth()和outerHeight()方法
outerWidth()方法返回元素的宽度(包括内边距和边框)。
outerHeight()方法返回元素的高度(包括内边距和边框)。
outerWidth(true)方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true)方法返回元素的高度(包括内边距、边框和外边距)。
十七、jQuery遍历-祖先---可直接在parent().css属性
$("span").parent();返回被选元素的直接父元素
$("span").parents();------返回被选元素的所有祖先元素
$("span").parents("ul");----返回所有元素的所有祖先,并且它是元素
$("span").pa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 学习 精心 整理