JQuery的动画操作

最新推荐文章于 2022-12-13 13:43:21 发布

boxyuan

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量401

点赞数

分类专栏： JQuery 文章标签：前端 JQuery

本文链接：https://blog.csdn.net/boxyuan/article/details/72863723

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

* jQuery常用操作DOM的API

1)jQuery对象.addClass().addClass();
2)removeClass()
3)toggleClass()
4)hasClass()
5)val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
6)text()和html():text()取得是标签之间的内容，html()不仅含有内容，还可能含有标签
7)prev()
8)siblings()：要能产生一个数组
9)show()和hide()

10)fadeIn()和fadeOut()

常用的遍历节点方法

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素的集合:next();
取得匹配元素前面紧邻的同辈元素的集合:prev()
取得匹配元素前后所有的同辈元素: siblings()

jQuery中DOM常用方法或属性

1)val()：取得或设置不可用input元素的值
[$("input:disabled").val()]或
[$("input:disabled").val("不可用新值")]

2)length或
3)size()：取得未选中复选框的个数，并依次显示value的值
[$(":checkbox:not(:checked)").length]或
$(":checkbox:not(:checked)").each(function(){alert($(this).val());});

3)text()或
4)html()：
5)jQuery对象.each(function(){});注：this表示DOM对象，$(this)表示jQuery对象
依次显示选中下拉框的value和显示内容
$("input[type='button']").click(function(){
$("select option:selected").each(function(){
window.alert($(this).text());
window.alert($(this).html());
window.alert($(this).val());
});
});

6)append()：将div元素添加到ul元素后，且在ul元素内部，即父子关系
$("ul").append($("div"));

7)prepend()：将div元素添加到ul元素前，且在ul元素内部，即父子关系
$("ul").prepend($("div"));


8)after()：将div元素插入到ul元素后，且在ul元素外部，即兄弟关系
$("ul").after($("div"))

8)before()：将div元素插入到ul元素前，且在ul元素外部，即兄弟关系
$("ul").before($("div"))

9)find(),first()，last()和attr()：取得form下第一个input元素的type属性
$("form input").first().attr("type")

设置form下第一个input元素的为只读文本框
$("form input").first().attr("readonly","readonly");

10)$("html代码")：创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
var $newElement = $("<div></div>").attr("id","divID").text("哈哈");
$(document.body).append($newElement);

11)remove()：删除元素及其后代元素
$("li").remove()删除所有li元素
$("li").remove("#secondID")删除所有id属性为secondID的li元素
$("li").remove(".myClass")删除指定样式名为myClass的li元素

12)clone()或clone(true)：复制原input元素，添加到原input元素后，与其同级，且和原按钮有一样的行为
var $newInput = $("input").clone();
$newInput.val("新按钮");
$("input").after($newInput);

13)replaceWith()：双击文本，用按钮替换文本
$("table div").first().dblclick(function(){
$("table div").first().replaceWith("<input type='button' value='按钮'/>");
});
14)removeAttr()：添加多个table属性，并删除属性
$("table").first().attr("border","1").attr("align","center").attr("width","60%");
$("table").first().removeAttr("border");
动态向div元素中添加当前时间
$("div").first().html(new Date().toLocaleString());

15)addClass()，removeClass()，toggleClass()，hasClass()：为div元素增加和删除样式
$("div").first().addClass("myClass")
$("div").last().removeClass("myClass")
$("div").toggleClass("myClass");
window.alert($("div").first().next().hasClass("myClass"))

16)val()：使用val()为单选下位框，多选下位框设置值和获取值
$("select").val("1号");

17)children()：取得div元素的直接子元素内容，不含后代元素
$("div").children().html()

18)next()：取得div元素的下一个同级的兄弟元素内容
$("div").next().html()

19)prev()：取得div元素的上一个同级的兄弟元素内容
$("div").prev().html()

20)siblings()：取得div元素的上下一个同级的所有兄弟元素内容
$("div").siblings().each(function(){
alert($(this).html());
});

21)show()：5秒钟时间缓慢显示图片
$("p").show(5000,function(){
$("div").html("缓慢显示图片完毕");
});

22)hidden()：5秒钟时间缓慢隐藏图片
$("p").hide(5000,function(){
$("div").html("缓慢隐藏图片完毕");
});

23)fadeIn()：5秒淡入显示图片
$("p").fadeIn(5000,function(){
alert("淡入图片完毕");
});

24)fadeOut()：5秒淡出隐藏图片
$("p").fadeOut(5000,function(){
alert("淡出图片完毕");
});

25)slideUp()：5秒滑上隐藏内容
$("p").slideDown(5000,function(){
alert("滑上隐藏内容完毕");
});

26)slideDown()：5秒滑下显示内容
$("p").slideDown(5000,function(){
alert("滑下显示内容完毕");
});

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
	</head>

	<body background="images/IMG_8357.jpg">
		 
		<p>hello</p>
		<div align="center">
			<span>
		 		hello again
		 		<b>
		 			bold
		 		</b>
		 		
		 	</span>
		</div>
		<div>and again</div>
		<p>
			<img src="images/IMG_8357.jpg"  width="500px" height="700px" />
		</p>
		<p id="p1">
			<img src="images/_DSC2140.jpg" width="500px" height="700px" />
		</p>
		<hr />
		<input type="button" value="清除" />
		<p id="p2">
			item 1<br />
			item 1<br />
			item 1<br />
			item 1<br />
			item 1<br />
			item 1<br />
			item 1<br />
			
			
		</p>
		 
		<script type="text/javascript">
			/*
			alert($("div").children().first().html());
			alert($("div").first().next().next());
			alert($("div").first().prev().next());
			*/
			$("div").first().siblings().each(function() {
				alert($(this).text());
			});
			//显示图片的速度
			$("p").first().show(5000, function() {
				$("div").first().html("<font color='darkcyan'>加载完成</font>");
			})
			$("p").first().hide(5000, function() {
				$("div").first().html("<font color='darkcyan'>加载完成</font>");
			})
			$("#p1").first().fadeIn(5000,function()
			{
				$("div").first().text("淡出隐藏");
			})
			$("#p1").first().fadeOut(10000,function()
			{
				$("div").first().text("淡出隐藏");
			})
			//
			$(":input").click(function()
			{
				$("#p2").slideUp(2000);
			});
			
		</script>
	</body>

</html>