html5 th html5 this

目录

• 点击消失
• jQuery 选择器
• fadeIn 实现淡出*
• fadeTo 淡入
• slideDown 向下滑动
• animate 动画
• 多帧animate动画
• 停止滑动
• 先上滑隐藏再下滑显示
• 获取标签内容text/html
• 获取标签值
• 获取属性attr
• 设置内容text、html以及value
• text、html以及value的回调函数
• 设置属性 attr
• append追加方法
• append和prepend方法添加若干新元素
• after和before方法
• remove方法
• empty方法（删除内容）
• 删除（过滤）符合要求的数据
• 动态添加css样式
• toggleClass 切换样式（添加样式和删除样式切换）
• 返回CSS样式属性
• 修改css样式
• 获取尺寸、高度、宽度

点击消失

点击< p >标签内容消失

<p>如果您点击我，我会小时</p>
	<p>点击我，我会小时</p>
	<p>也要点击我消失</p>
	
	//把js脚本放在body和head之外，比如放在</html> 之前
	<script language="javascript">
		$(document).reday(function(){ // 当页面所有html标签加载完后执行
			$("p").click(function(){ //选取p标签
				$(this).hide(); //隐藏当前元素
			});
		});
	</>

• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有p标签元素
• $(".test").hide() - 隐藏所有 class = “test” 的所有元素
• $("#test").hide() - 隐藏所有 id = “test”的元素

通过点击按钮，实现标签消失

<p class="test"> This is a heading.</p>
<p id="test"> This is another paragraph.</p>

<script src="jquery-1.11.1.js"></script>
<script type="text/javscript">
	$(document).ready(function(){
		$("button").click(function(){
			$("p").hide(); //隐藏p标签的所有内容
			$(".test").hide(); //隐藏所有class="test"的元素
			$("#test").hide(); //隐藏所有 id="test" 的元素
		});
	});
</script>

jQuery 选择器

• jQuery 元素选择器
  jQuery 使用css选择器HTML元素
  $(“p”)选取< p >元素
  $(“p.intro”)选取所有 class=“intro” 的 < p >元素
  $(“p#demo”)选取所有 id=“demo” 的 < p >元素
• jQuery 属性选择器
  jQuery使用XPath表达式来选择带有给定属性的元素。
  $("[href]") 选取所有带有href属性的元素
  $([href=’#’]")选取所有带有href属性值等于"#“的元素
  $([href != ‘#’]”)选取所有带有href值不等于"#“的元素
  $(”[href $= ‘.jpg’]")选取所有href值以".jpg"结尾的元素
• jQuery CSS选择器
  jQuery CSS 选择器可用于改变HTML元素的CSS属性
  例如 $(“p”).css(“background-color”,“red”);

p元素的显示和隐藏

<p id="p1">如果点击"隐藏"按钮，我就会消失</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>

<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#hide").ready(function(){
			$("p").hide();
			$("p").hide(1000); 隐藏方法内加入时间参数，如1000 表示1s内全部隐藏
		});
		$("show).ready(function(){
			$("p").show();
		});
	});
</script>

toggle 隐藏/显示 切换

<button type="button" >切换</button>
<p> 这是一个段落</p>
<p>这是另一个段落</p>

<script src="jqery-1.11.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(button).click(function(){
			$("p").toggle(1000); //隐藏与显示来回切换
		});
	});
</script>

fadeIn 实现淡出*

<button>点击这里，使三个矩形淡入<button>
<div id="div1" style="xxxxxxxxxx"></div>
<div id="div2" style="xxxxxxxxxx"></div>
<div id="div3" style="xxxxxxxxxx"></div>

<script src="jquery-1.11.1.js"</script>
<script	type="text/javascript">
	$(document).ready(function(){
		$("button).click(functioni(){
			$("#div1").fadeIn(); //淡出
			$("#div2").fadeIn("slow"); //淡出
			$("#div3").fadeeIn(3000); //淡出
		});
	});
</script>

fadeTo 淡入

<button>点击这里，使三个矩形淡入<button>
<div id="div1" style="xxxxxxxxxx"></div>
<div id="div2" style="xxxxxxxxxx"></div>
<div id="div3" style="xxxxxxxxxx"></div>

<script src="jquery-1.11.1.js"</script>
<script	type="text/javascript">
	$(document).ready(function(){
		$("button).click(functioni(){
			$("#div1").fadeTo("slow",0.15);  //淡入 0-1表表示透明度，0是完全透明
			$("#div2").fadeTo("slow",0.4); 
			$("#div3").fadeeTo("slow",0.7); 
		});
	});
</script>

slideDown 向下滑动

<div class=""panel">
	<p>领先的web技术教程站点</p>
	<p>你可以找到你所需要的所有网站建设教程</p>
</div>
<p class="flip">请点击这里</p>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		$(".flip".click(function(){
			$(".panel").slideDown("slow"); //拥有高度，且隐藏不显示，可以通过flideDown方法下滑显示出来
		});
	});
</script>

animate 动画

<div style="xxxxxxxxxxxxxxxxxxxxxxxx"></div>

<script src="jquery-1.11.1.js"></script>
<script type="text/javascript>
	$(document).ready(function(){
		$("button").click(function(){
			$("div").animate({left:'250px'}); //从左向右移动250px

			$("div").animate({ //多个动画
				left:'250px', //从左向右移动250px
				opacity:'0.5', //透明度改为0.5
				height:'150px', //高度变为150px
				width:'150px' //宽度变为150px
			});
			
			$("div").animate({ //多个动画，+=150px 在原有数值之上增加 150px
				left:'250px',
				height:'+=150px',
				width:'+=150px'
			});
		});
	});
</script>

多帧animate动画

<div style="xxxxxxxxxxxxxxxxxxxxxxxx"></div>

<script src="jquery-1.11.1.js"></script>
<script type="text/javascript>
	$(document).ready(function(){
		$("button").click(function(){
			var div = $("div");
			div.animate({height:'300px',opacity:'0.4'},"slow");
			div.animate({width:'300px',opacity:'0.8'},"slow");
			div.animate({height:'100px',opacity:'0.4'},"slow");
		});
	});
</script>

停止滑动

<div class=""panel">
	<p>领先的web技术教程站点</p>
	<p>你可以找到你所需要的所有网站建设教程</p>
</div>
<p class="flip">请点击这里</p>
<p class="stop">停止滑动</p>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		$(".flip".click(function(){
			$(".panel").slideDown(5000); //拥有高度，且隐藏不显示，可以通过slideDown方法下滑显示出来
		});
		$(".stop").click(function(){
			$(".panel").stop(); //停止滑动
		});
	});
</script>

先上滑隐藏再下滑显示

<div class=""panel">
	<p>领先的web技术教程站点</p>
	<p>你可以找到你所需要的所有网站建设教程</p>
</div>
<p class="flip">请点击这里</p>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		$(".flip".click(function(){
			//先设置字体颜色，然后上滑隐藏，在下滑显示
			$(".panel").css("color","red").slideUp(2000).slideDown(2000);
		});
	});
</script>

获取标签内容text/html

<p id="test">这里段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btb2">显示HTML</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		$("#btn1".click(function(){
		 	alert("Text: "+$("#test").text());
		});
		$("#btn2".click(function(){
		 	alert("HTML: "+$("#test").html());
		});
		
	});
</script>

文本显示结果：

html显示结果：

获取标签值

<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		 $("button").click(function(){
		 	alert("Value: "+ $("#test").val();
		 });
		
	});
</script>

获取属性attr

<p><a href="http://www.baidu.com" id="w3s">百度</a></p>
<button>显示 href值</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		 $("button").click(function(){
		 	alert($("#w3s").attr("href"));
		 });
	});
</script>

设置内容text、html以及value

<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field：<input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		 $("#btn1").click(function(){
		 	$("#test1").text("Hello world!"); //修改test
		 });
		 $("#btn2").click(function(){
		 	$("#test2").html("<b>Hello world!</b>"); //修改html
		 });
		 $("#btn3").click(function(){
		 	$("#test3).val("Dolly Duck"); //修改value值
		 });
	});
</script>

text、html以及value的回调函数

<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		 $("#btn1").click(function(){
		 	$("#test1").text(function(i,origText){ //origText 为  改之前的文本
		 		return "old text: " + origText + "New text: Hello World! (index: "+i +")";
		 	}); 
		 });
		 $("#btn2").click(function(){
		 	$("#test2").html(function(i,origText){
		 		return "old html: "+ origText + "new html: hello <b> world！</b> (index: "+ i +")";
		 	}); 
		 });
	});
</script>

设置属性 attr

<p><a href="http://www.gogle.com"" id="w3s">我的链接</a></p>
<button>改变href值</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$(doucment).ready(function(){
		  $("button").click(function(){
		  	$("#w3s").attr("href","http://www.baidu.com"):
		  	$("#w3s").attr({
		  	});
		  		"href":"http://www.baidu.com",
		  		"title":"jquery 教程"
		  });
	});
</script>

append追加方法

这种追加方法是往文本或者列表前面追加

<p> this is a paragraph</p>
<p> this is another paragraph.</>
<ol>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id-"btn2">追加列表项</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("#btn1").click(function(){
		$("p").append(" <b>Appended text</b>."); //给p标签添加文本
	});
	$("#btn2").click(function(){
		$("ol").append("<li>Appended item</li>"); //给ol列表添加一行
	});	
</script>

append和prepend方法添加若干新元素

<p> this is a paragraph.</p>
<button id="btn1">追加文本</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("#btn1").click(function(){
		//以html创建新元素
		var txt1 = "<p>Text.</p>"; 
		//以jquery创建新元素
		var txt2=$("<p></p>").text("text.");
		//通过dom创建文本
		var txt3=docuemnt.createElement("p");
		txt3.innerHTML="Text.";
		$("body").append(txt1,txt2,txt3); //级联追加新元素
	});
</script>

after和before方法

前后追加

<img src="xxxx.gif" alt="logo" />
<br><br>
<button id="btn1">在图片前面追加</button>
<button id="btn2">在图片后面追加</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("#btn1").click(function(){
		$("img").before("<b>Before</b>");
		$("img").before(txt1,txt2,txt3); //添加多个
	});
	$("#btn2").click(function(){
		$("img").after("<b>After</b>");
		$("img").after(txt1,txt2,txt3); //添加多个
	});
</script>

remove方法

<div id="div1" style="xxxxxxxxxxxxxx">
	this is some text in the div.
	<p>this is  some text in the div</p>
	<p>this is another parapraph in the div</p>
</div>
<button>删除div元素</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		$("#div1").remove(); //移除div
	});
</script>

empty方法（删除内容）

删除div中的内容

<div id="div1" style="xxxxxxxxxxxxxx">
	this is some text in the div.
	<p>this is  some text in the div</p>
	<p>this is another parapraph in the div</p>
</div>
<button>删除div元素</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		$("#div1").empty(); //清空div中的内容
	});
</script>

清空后：

删除（过滤）符合要求的数据

<p>this is a paragraph in the div.</p>
<p class="italic"><i>this is another paragraph in the div.</i></p>
<p class="italic"><i>this is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有p元素</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		$("p").remove(".italic"); //删除 class="italic"的p元素
	});
</script>

动态添加css样式

<style type="text/css">
	.important{
		font-weight:bold;
		font-size:xx-large;
	}
	.blue{
		color:blue;
	}
</style>

<body>
	<h1>标题 1</h1>
	<h2>标题 2</h2>
	<p>这是一个段落</p>
	<p>这是另一个段落</p>
	<div>这是非常重要的方法</div>
	<br>
	<button>向元素添加类</button>
</body>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		//添加样式
		$("h1,h2,p").addClass("blue");
		$("div").addClass("important");
		
		//添加两种样式
		$(#div1").addClass("important blue"); 两种样式中间用空格隔开
		
		//删除样式
		$(#h1,h2,p").removeClass("blue"); //删除样式
	});
</script>

添加样式后

删除样式后

toggleClass 切换样式（添加样式和删除样式切换）

<style type="text/css">
	.important{
		font-weight:bold;
		font-size:xx-large;
	}
	.blue{
		color:blue;
	}
</style>

<body>
	<h1>标题 1</h1>
	<h2>标题 2</h2>
	<p>这是一个段落</p>
	<p>这是另一个段落</p>
	<div>这是非常重要的方法</div>
	<br>
	<button>向元素添加类</button>
</body>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		//删除样式
		$(#h1,h2,p").toggleClass("blue"); //删除样式
	});
</script>

返回CSS样式属性

<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落</p>
<p style="background-color:#00ff00">这是一个段落</p>
<p style="background-color:#0000ff">这是一个段落</p>
<button>返回p元素的背景颜色</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		//有三个颜色，返回的是第一个颜色
		alert("Background color = " + $("p").css("background-color")); 
	});
</script>

修改css样式

<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落</p>
<p style="background-color:#00ff00">这是一个段落</p>
<p style="background-color:#0000ff">这是一个段落</p>
<button>返回p元素的背景颜色</button>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		//将p元素的背景色改为黄色,会将所有p元素的背景色改为黄色
		$("p").css("background-color","yellow");
		//修改多个属性
		$("p").css({
			"background-color":"yellow",
			"font-size":"200%"
		});
	});
</script>

获取尺寸、高度、宽度

<div id="div1" 
	style="height:100px;width:300px;padding:10px;
	margin:3px;border:1px solid blue;background-clor:lightblue;"></div>
<br>
<button>显示 div 尺寸</button>
<p>width() - 返回元素的宽度 </p>
<p>height() -返回元素的高度</p>

<script src="jquery-1.11.1.js"></script>
<script type="test/javascript">
	$("button").click(function(){
		var txt="";
		txt += width of div: "+
		$("#div1").width() + "</br>";
		txt += "height of div: '+
		$("#div1").height();
		$("#div1").html(txt);

		innerWidth() 和 innerHeight() 返回宽度和高度时包含内边距

		$(document).width()和$(window).width()是等效的，显示界面的可视大小
	});
</script>