JQuery从0开始

使用 CSS 选择器来选取 HTML 元素。

("p") 选取<p>元素。

$("p.intro") 选取所有 class="intro" 的<p>元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

使用XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有href属性的元素。

$("[href='#']") 选取所有带有href值等于 "#" 的元素。

$("[href!='#']") 选取所有带有href值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有href值以 ".jpg" 结尾的元素。

$("ul li:first") 每个<ul>的第一个<li>元素

$("div#intro .head") id="intro" 的<div>元素中的所有class="head"的元素

$(selector).hide(speed,callback);			
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

通过 jQuery，可以使用 **toggle() **方法来切换 hide() 和 show() 方法。

jQuery fadeIn()用于淡入已隐藏的元素。

jQuery fadeOut()用于淡出可见元素。

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。可以取："slow"、"fast" 或毫秒。

必需的 opacity 给淡入淡出效果设置不透明度（0-1）

可选的 callback 参数是该函数完成后所执行的函数名称。

示例：

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<meta charset="utf-8" />
		<title>JQuery</title>
		<script type="text/javascript">
			$(document).ready(function() {
				//隐藏按钮事件
				$("#hide").click(function() {
					// 隐藏当前的 HTML 元素。
					$(this).hide(1000)
					// 隐藏 id="test" 的元素。
					$("#test").hide("slow")
					// 隐藏所有 <p> 元素。
					$("p").hide("slow")
					// 隐藏所有 class="test" 的元素。
					$(".test").hide("fast")
					//jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。					
					$("h2").css("background-color","red");
															
				});
				
				//显示按钮事件
				$("#show").click(function() {
					$("#test").show(1000,alert("hello"))
					//显示 id="test" 的元素。
				});
				
				//切换显示隐藏按钮
				$("#tag").click(function(){
					$("p").toggle()
				});							
				
				//透明度
				$("#div1").click(function(){
				  $("h2").fadeTo("slow",0.25);
				 });				
				 
				//淡出效果
				$("#div2").click(function(){
				$("#dic1").fadeOut(3000);
				$("#dic2").fadeOut("slow");
				 });
				 
			});
		</script>
	</head>
	<body>
		<div id="dic1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="dic2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<h2>This is 1 heading</h2>
		<p>This is 2 paragraph.</p>
		<p class="test">This is 3 paragraph.</p>
		<p id="test">This is another paragraph.</p>
		<button id="hide">隐藏</button>
		<button id="show">显示</button>
		<button id="tag">切换</button>
		<button id="div1">透明度</button>
		<button id="div2">淡出</button>
	</body>
</html>
posted @ 2020-12-08 11:18  小安不菜  阅读(75)  评论(0)    收藏  举报