一个页面温习jQuery效果及jQuery文档操作里的常用API

最新推荐文章于 2024-07-16 17:56:11 发布
shelly24
最新推荐文章于 2024-07-16 17:56:11 发布
阅读量780
点赞数 1
分类专栏： jQuery 文章标签： javascript jquery 技术
本文链接：https://blog.csdn.net/supershelly24/article/details/18669049
版权
jQuery 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
最新整合了jQuery效果及jQuery文档操作里常用的API，并将它们的Demo及主要的代码贴在了一起，方便新手或老手温习这些API。
页面贴图：
页面代码如下，保存成html文档，在与此文件同级的目录下放一个jquery-2.0.3.js文件,然后用chrome打开就行了，希望对大家有用，欢迎各种建议及意见.
<html>
<head>
<style>
body{background:#DFE30D;
padding:0;
margin:0;
}
h1{
color:#66BDCC;
background:rgba(255,255,255,0.8);
box-shadow:-1px -1px 5px #F2FFBA,0px 0px 5px #F2FFBA,1px 1px 5px #F2FFBA,2px 2px 5px #F2FFBA,3px 3px 5px #F2FFBA;
margin:1%;
padding:1%;
}
.category{
background:#F2FFBA;
margin:2% 1%;
padding:1%;
width:46%;
height:auto;
overflow:hidden;
-moz-border-radius: 15px;
border-radius: 15px;   
box-shadow:-3px -3px  #5DC6E3,-2px -2px  #5DC6E3,-1px -1px #5DC6E3,1px 1px  #5DC6E3,2px 2px  #5DC6E3,3px 3px  #5DC6E3,
           -3px -2px  #5DC6E3,-3px -1px  #5DC6E3,-3px 1px  #5DC6E3,-3px 2px  #5DC6E3,-3px 3px  #5DC6E3,
		   -2px -3px  #5DC6E3,-2px -1px  #5DC6E3,-2px 1px  #5DC6E3,-2px 2px  #5DC6E3,-2px 3px  #5DC6E3,
		   -1px -3px  #5DC6E3,-1px -2px  #5DC6E3,-1px 1px  #5DC6E3,-1px 2px  #5DC6E3,-1px 3px  #5DC6E3,
		    1px -3px  #5DC6E3,1px -2px  #5DC6E3,1px -1px  #5DC6E3,1px 2px  #5DC6E3,1px 3px  #5DC6E3,
		    2px -3px  #5DC6E3,2px -1px  #5DC6E3,2px 1px  #5DC6E3,2px -2px  #5DC6E3,2px 3px  #5DC6E3,
		    3px -2px  #5DC6E3,3px -1px  #5DC6E3,3px 1px  #5DC6E3,3px 2px  #5DC6E3,3px -3px  #5DC6E3;


float:left;
}
.code_viewer{
width:auto;
background:rgba(255,255,255,0.6);
padding:1%;
height:auto;
overflow:hidden;
-moz-border-radius: 15px;
border-radius: 15px;   
border:3px solid #68D1C8;
color:#333333; 
white-space: pre;
word-wrap:break-word; 
}
.code_viewer p{
border-bottom:1px dashed #000000;
margin:0;
padding:0;
}
.per_viewer{
background:#5DC6E3;
word-wrap:break-word; 
padding:1%;
margin:1% 0;
color:#E9F5F3;
}
h3{
border-top:1px dashed #999999;
padding:10px 0;
}
#panel_slide{
height:120px;
display:none;
}
#animate{
height:100px;
width:100px;
position:relative;
}
#div_chaining{
height:100px;
width:200px;
position:relative;
}
#div_hideshow{
height:100px;
width:200px;
position:relative;
}
.yellow{
color:yellow;
}
.tall{
height:100px;
}
</style>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*jQuery 效果 - 隐藏和显示*/
$("#hide").click(function(){
	$("#div_hideshow").hide();
});
$("#show").click(function(){
	$("#div_hideshow").show();
});
$("#hide_show_toggle").click(function(){
	$("#div_hideshow").toggle();
})	

/*jQuery 效果 - 淡入淡出*/
$("#fadeIn").click(function(){    todo 这三个语句是按什么顺序执行
	$("#div1_fade").fadeIn();//$(selector).fadeIn(speed,callback); 
	$("#div2_fade").fadeIn("slow");///.fadeIn()相当于.fadeIn(0)
	$("#div3_fade").fadeIn(3000);
});
$("#fadeOut").click(function(){
	$("#div1_fade").fadeOut();//$(selector).fadeOut(speed,callback);
	$("#div2_fade").fadeOut("slow");
	$("#div3_fade").fadeOut(3000);
});
$("#fadeToggle").click(function(){//$(selector).fadeToggle(speed,callback);
	$("#div1_fade").fadeToggle();
	$("#div2_fade").fadeToggle("slow");
	$("#div3_fade").fadeToggle(3000);

});
$("#fadeTo").click(function(){ //$(selector).fadeTo(speed,opacity,callback);
	$("#div1_fade").fadeTo(0,0.1);
	$("#div2_fade").fadeTo("slow",0.2);
	$("#div3_fade").fadeTo(3000,0.3);
})

/*jQuery 效果 - 滑动*/
$("#slideDown").click(function(){
	$("#panel_slide").slideDown(); //$(selector).slideDown(speed,callback);
});
$("#slideUp").click(function(){
	$("#panel_slide").slideUp("slow");//$(selector).slideUp(speed,callback);
});
$("#slideToggle").click(function(){
	$("#panel_slide").slideToggle();//$(selector).slideToggle(speed,callback);
});

/*jQuery 效果 - 动画         
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。*/

$("#animateMutiAttr").click(function(){   //$(selector).animate({params},speed,callback);
	$("#animate").animate({left:'200px',width:"200px"},3000);
});
$("#animateUseRelativeValue").click(function(){   //也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
	$("#animate").animate({left:'+=20px',width:"+=20px"},"slow");
});
$("#animateDefaultValue").click(function(){   //您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"这些预定义的值：
	$("#animate").animate({width:'toggle'},3000);
});
$("#animateQueue").click(function(){   //这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
    $("#animate").animate({width:'toggle'});
    $("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
});

/*jQuery 停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：*/
$("#stopAnimate").click(function(){
	$("#animate").stop(true,false);
});

/*jQuery callback 
可以用来让不同元素依次执行动画
*/
$("#callbackEffect").click(function(){
	$("#p_callback1").slideUp("slow",function (){
		$("#p_callback2").slideUp("slow");
	});
});

/*jQuery - Chaining
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
*/
$("#chaining").click(function(){
	$("#div_chaining").slideUp(3000).slideDown(3000);
});

/*jQuery - 获得内容和属性*/
$("#btn_text").click(function(){
    alert($("#btn").text());
});
$("#btn_html").click(function(){
    alert($("#btn").html());
});
$("#btn_value").click(function(){
   alert($("#btn").val());
})
$("#btn_attr").click(function(){
   alert($("#btn").attr("id"));
});

/*jQuery - 设置内容和属性*/
$("#btn_text_2").click(function(){
    $("#btn_2").text(function(i,origText){
		return origText+",用回调函数附加了点text";
	});
});
$("#btn_html_2").click(function(){
	$("#btn_2").html(function(i,origHtml){
		return origHtml+",用回调函数附加了点<b>html</b>";
   });
});
$("#btn_value_2").click(function(){
   alert($("#btn_2").val(function(i,origValue){
		return origValue+",用回调函数附加了点value"
   }).val());
})
$("#btn_attr_2").click(function(){
	$("#btn_2").attr("id","btn3");
});

/*jQuery - 添加及删除元素*/
$("#btn_append_text").click(function(){
	$("#append_show p").append("it is append");
});
$("#btn_append_ol_item").click(function(){
	$("#append_show ol").append("<li>one more item</li>");
});
$("#btn_prepend_text").click(function(){
	$("#append_show p").prepend("<b>it is preappended</b>");
});
$("#btn_prepend_ol_item").click(function(){
	$("#append_show ol").prepend("<li>one more item</li>");
});
$("#btn_insert_before").click(function(){
	$("#append_show ol").before("<p><b>it is insert before</b></p>")
});
$("#btn_insert_after").click(function(){
	$("#append_show ol").after("<p><b>it is insert after</b></p>")
});
$("#btn_remove").click(function(){
	$("#append_show ol li").remove(".to_be_deleted");  //jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
});
$("#btn_empty").click(function(){
	$("#append_show ol ").empty();
});

/*jQuery - 获取并设置 CSS 类*/
$("#btn_add_class").click(function(){
	$("#control_class_show").addClass("yellow").addClass("tall");
});
$("#btn_remove_class").click(function(){
	$("#control_class_show").removeClass("yellow").removeClass("tall");
});
$("#btn_toggle_class").click(function(){
	$("#control_class_show").toggleClass("yellow").toggleClass("tall");
});
$("#btn_css_getter").click(function(){
	alert($("#control_class_show").css("background-color"));
});
$("#btn_css_setter").click(function(){
	$("#control_class_show").css("background-color","#006900");
});
$("#btn_css_setter_multi").click(function(){
	/*$("#control_class_show").css("background-color","#006900").css("height","100px");*/
	$("#control_class_show").css({"background-color":"#006900","height":"100px"});
});

});	
</script>
</head>
<body>
<h1>一个页面温习jQuery效果及jQuery文档操作里的常用API</h1>
<div>

<div class="category">

<h2>jQuery 效果</h2>

<h3>jQuery 效果 - 隐藏和显示</h3>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="hide_show_toggle" type="button">切换</button>
<div id="div_hideshow" class="per_viewer">如果点击“隐藏”按钮，我就会消失。如果点击“切换”按钮，在隐藏和显示之间切换</div>
<p class="code_viewer">
/*jQuery 效果 - 隐藏和显示*/
$("#hide").click(function(){
	$("#div_hideshow").hide();
	
});
$("#show").click(function(){
	$("#div_hideshow").show();
});
$("#hide_show_toggle").click(function(){
	$("#div_hideshow").toggle();
})	
</p>
<h3>jQuery 效果 - 淡入淡出</h3>
<button id="fadeIn" type="button">淡入</button>
<button id="fadeOut" type="button">淡出</button>
<button id="fadeToggle" type="button">切换</button>
<button id="fadeTo" type="button">变淡到</button>
<div id="div1_fade" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2_fade" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3_fade" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<p class="code_viewer">
/*jQuery 效果 - 淡入淡出*/
$("#fadeIn").click(function(){  
	$("#div1_fade").fadeIn();//$(selector).fadeIn(speed,callback); 
	$("#div2_fade").fadeIn("slow");///.fadeIn()相当于.fadeIn(0)
	$("#div3_fade").fadeIn(3000);
});
$("#fadeOut").click(function(){
	$("#div1_fade").fadeOut();//$(selector).fadeOut(speed,callback);
	$("#div2_fade").fadeOut("slow");
	$("#div3_fade").fadeOut(3000);
});
$("#fadeToggle").click(function(){//$(selector).fadeToggle(speed,callback);
	$("#div1_fade").fadeToggle();
	$("#div2_fade").fadeToggle("slow");
	$("#div3_fade").fadeToggle(3000);

});
$("#fadeTo").click(function(){ //$(selector).fadeTo(speed,opacity,callback);
	$("#div1_fade").fadeTo(0,0.1);
	$("#div2_fade").fadeTo("slow",0.2);
	$("#div3_fade").fadeTo(3000,0.3);
})

</p>

<h3>jQuery 效果 - 滑动</h3>
<button id="slideDown" type="button">下滑</button>
<button id="slideUp" type="button">上卷</button>
<button id="slideToggle" type="button">切换</button>
<div id="panel_slide" class="per_viewer">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="code_viewer">
/*jQuery 效果 - 滑动*/
$("#slideDown").click(function(){
	$("#panel_slide").slideDown(); //$(selector).slideDown(speed,callback);
});
$("#slideUp").click(function(){
	$("#panel_slide").slideUp("slow");//$(selector).slideUp(speed,callback);
});
$("#slideToggle").click(function(){
	$("#panel_slide").slideToggle();//$(selector).slideToggle(speed,callback);
});
</p>

<h3>jQuery 效果 - 动画</h3>
<button id="animateMutiAttr" type="button"> 操作多个属性</button>
<button id="animateUseRelativeValue" type="button"> 使用相对值</button>
<button id="animateDefaultValue" type="button"> 使用预定义的值</button>
<button id="animateQueue" type="button"> 使用队列功能</button>
<div id="animate" class="per_viewer">animate
</div>
<p class="code_viewer">
/*jQuery 效果 - 动画         
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。*/

$("#animateMutiAttr").click(function(){   //$(selector).animate({params},speed,callback);
   $("#animate").animate({left:'200px',width:"200px"},3000);
});
$("#animateUseRelativeValue").click(function(){   //也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
   $("#animate").animate({left:'+=20px',width:"+=20px"},"slow");
});
$("#animateDefaultValue").click(function(){   //您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"这些预定义的值：
   $("#animate").animate({width:'toggle'},3000);
});
$("#animateQueue").click(function(){   //这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
    $("#animate").animate({width:'toggle'});
    $("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
	$("#animate").animate({width:'toggle'});
});
</p>


<h3>jQuery 停止动画</h3>
<button id="stopAnimate" type="button">停止上面的动画</button>
<p class="code_viewer">
/*jQuery 停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：*/
$("#stopAnimate").click(function(){
	$("#animate").stop(true,false);
});
</p>

<h3>jQuery Callback 函数</h3>
<div class="per_viewer">
<p id="p_callback1">这一段先被隐藏起来</p>
<p id="p_callback2">这一段在第一段被隐藏起来后再被隐藏起来</p>
</div>
<button id="callbackEffect" type="button">查看回调函数效果</button>
<p class="code_viewer">
/*jQuery callback 
可以用来让不同元素依次执行动画
*/
$("#callbackEffect").click(function(){
	$("#p_callback1").slideUp("slow",function (){
		$("#p_callback2").slideUp("slow");
	});
});
</p>

<h3>jQuery - Chaining</h3>
<button id="chaining" type="button"> 链式执行</button>
<div id="div_chaining" class="per_viewer">happy happy happy sssss happyhappyhappyhappyhappyhappyhappyhappyhappyhappy ssss happyhappy happyhappy happyhappy happyhappy happy
gchainingchainingchainingchainingchainingchaining
</div>
<p class="code_viewer">
/*jQuery - Chaining
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
*/
$("#chaining").click(function(){
	$("#div_chaining").slideUp(3000).slideDown(3000);
});
</p>

</div>



<div class="category">
<h2>jQuery HTML</h2>

<h3>jQuery - 获得内容和属性</h3>
<button id="btn"  class="per_viewer" value="hello,button">这是一个按钮btn，<b>粗体文本</b>,但没有赋予点击事件</button>
<button id="btn_text" >显示btn的text</button>
<button id="btn_html" >显示btn的html</button>
<button id="btn_value" >显示btn的value</button>
<button id="btn_attr">显示btn的id属性值</button>
<p class="code_viewer">
/*jQuery - 获得内容和属性*/
$("#btn_text").click(function(){
    alert($("#btn").text());
});
$("#btn_html").click(function(){
    alert($("#btn").html());
});
$("#btn_value").click(function(){
   alert($("#btn").val());
})
$("#btn_attr").click(function(){
   alert($("#btn").attr("id"));
});
</p>

<h3>jQuery - 设置内容和属性</h3>
<button id="btn_2" class="per_viewer" value="hello,button">这是一个按钮btn_2，<b>粗体文本</b>,但没有赋予点击事件</button>
<button id="btn_text_2" >设置btn_2的text</button>
<button id="btn_html_2" >设置btn_2的html</button>
<button id="btn_value_2" >设置btn_2的value</button>
<button id="btn_attr_2">设置btn_2的id属性值为btn_3,然后立马发现前面上设置按钮不好用了，因为id为btn_2的按钮已经不存在了</button>
<p class="code_viewer">
/*jQuery - 设置内容和属性*/
$("#btn_text_2").click(function(){
    $("#btn_2").text(function(i,origText){
		return origText+",用回调函数附加了点text";
	});
});
$("#btn_html_2").click(function(){
   $("#btn_2").html(function(i,origHtml){
		return origHtml+",用回调函数附加了点<b>html</b>";
   });
});
$("#btn_value_2").click(function(){
   alert($("#btn_2").val(function(i,origValue){
		return origValue+",用回调函数附加了点value"
   }).val());
})
$("#btn_attr_2").click(function(){
   $("#btn_2").attr("id","btn3");
});
</p>

<h3>jQuery - 添加及删除元素</h3>
<button id="btn_append_text">追加文本</button>
<button id="btn_append_ol_item">追加列表项</button>
<button id="btn_prepend_text">插入文本</button>
<button id="btn_prepend_ol_item">插入列表项</button>
<button id="btn_insert_after">insert after</button>
<button id="btn_insert_before">insert before</button>
<button id="btn_remove">删除元素及其子元素</button>
<button id="btn_empty">删除其子元素</button>
<div id="append_show"class="per_viewer">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li class="to_be_deleted">List item 1</li>
<li>List item 2</li>
<li class="to_be_deleted">List item 3</li>
</ol>
</div>

<div class="code_viewer">
/*jQuery - 添加及删除元素*/
$("#btn_append_text").click(function(){
	$("#append_show p").append("it is append");
});
$("#btn_append_ol_item").click(function(){
	$("#append_show ol").append("<li>one more item</li>");
});
$("#btn_prepend_text").click(function(){
	$("#append_show p").prepend("<b>it is preappended</b>");
});
$("#btn_prepend_ol_item").click(function(){
	$("#append_show ol").prepend("<li>one more item</li>");
});
$("#btn_insert_before").click(function(){
	$("#append_show ol").before("<p><b>it is insert before</b></p>")
});
$("#btn_insert_after").click(function(){
	$("#append_show ol").after("<p><b>it is insert after</b></p>")
});
$("#btn_remove").click(function(){
	$("#append_show ol li").remove(".to_be_deleted");  //jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
});
$("#btn_empty").click(function(){
	$("#append_show ol ").empty();
});

</div>

<h3>jQuery - 获取并设置 CSS 类</h3>
<button id="btn_add_class">往元素上添加类</button>
<button id="btn_remove_class">从元素上去除类</button>
<button id="btn_toggle_class">添加或删除类</button>
<button id="btn_css_getter">获取CSS属性</button>
<button id="btn_css_setter">设置CSS属性</button>
<button id="btn_css_setter_multi">设置多个CSS属性</button>
<div id="control_class_show" class="per_viewer">
添加类，删除类，添回或删除类之间切换
</div>
<div class="code_viewer">
/*jQuery - 获取并设置 CSS 类*/
$("#btn_add_class").click(function(){
	$("#control_class_show").addClass("yellow").addClass("tall");
});
$("#btn_remove_class").click(function(){
	$("#control_class_show").removeClass("yellow").removeClass("tall");
});
$("#btn_toggle_class").click(function(){
	$("#control_class_show").toggleClass("yellow").toggleClass("tall");
});
$("#btn_css_getter").click(function(){
	alert($("#control_class_show").css("background-color"));
});
$("#btn_css_setter").click(function(){
	$("#control_class_show").css("background-color","#006900");
});
$("#btn_css_setter_multi").click(function(){
	/*$("#control_class_show").css("background-color","#006900").css("height","100px");*/
	$("#control_class_show").css({"background-color":"#006900","height":"100px"});
});
</div>


</div>



</body>

</html>
shelly24
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个页面温习jQuery效果及jQuery文档操作里的常用API

最新整合了jQuery效果及jQuery文档操作里常用的API，并将它们的Demo及主要的代码贴在了一起，方便新手或老手温习这些API。页面贴图：页面代码如下，保存成html文档，在与此文件同级的目录下放一个jquery-2.0.3.js文件,然后用chrome打开就行了，希望对大家有用，欢迎各种建议及意见body{background:#DFE30D;padding:
复制链接

扫一扫