jquery快速入门视频教程 jquery从入门到精通

转载

mob6454cc6eb555 2023-05-22 16:20:06

文章标签 css 选择器 jquery 文章分类 jQuery 前端开发

JQuery

JQuery是什么？

JQuery全名(JavaScriptQuery),是一个轻量级的js库，简化html与js之间的操作；

同时JQuery也是一个基于JavaScript的前端框架，是对js常见操作的封装。

学习推荐：目前已有大量的jquery插件和基于jQuery的UI框架（miniui、easyui、ligerui）。

为什么要学习JQuery?

因为使用原生的js获取节点，添加事件等操作比较繁琐(html和js两边都需要编写),js的代码和HTML的代码之间的耦合性过高。而jQuery正是对js的进一步封装，简化了操作。

JQuery使用

第一步、导入jquery.js文件
<script src=".. /jquery.js" type="text/javascript"></script>
第二步、初始化函数
1、$(function(){
      ........
});
2、$(document).ready(function(){
      ........
});
3、JQuery(function($){

});
1、2是比较常用的

Jquery对象和Dom对象相互转换

<h1 id="domJquery">dom对象和jquery对象转换</h1>
	$(function(){	
			var dom = document.getElementById("domJquery");
			var jquery = $("#domJquery");
			/* alert(dom);
			alert(jquery); */
			//dom对象转jquery
			var domechangejquery = $(dom);
			//alert(domechangejquery);
			//jquery对象转换为dom对象
			//方法1:
			var jqchangedom1 = jquery[0];
			alert(jqchangedom1)
			//方法2:
			var jqchangedom2 = jquery.get(0);
			alert(jqchangedom2);
		})

$() 符号

$()函数是JQuery函数的别称，就是一种标志

$()函数用于将任何对象包裹成jQuery对象，接着就可以被允许调用定义在jQuery对象上的多个不同方法。

js和JQuery初始化函数的区别

	window.onload	$(document).ready()
执行时机	必须等待网页中的所有内容加载完毕后(包括图片)，才会执行	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能编写多个，如果编写多个会执行最后的那个onload	能编写运行多个
简化写法	无	$(document).ready()可以简写$(function(){ })

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery选择器

基本选择器

符号	功能	返回值	示例
$("#id")	选择id为id的元素	单个元素	$("#id"):选择id为id的元素
$(".class")	选择class为class的元素	元素集合	$(".class"):选择class为class的元素
$("element")	选择element元素	元素集合	$("div")：选择所有div
$("*")	选择所有元素	元素结合	$("*")：选择所有元素
$("element1,element2,")	选择element1元素和element2元素	元素集合	$("div,p,"):选择所有div和p标签

<span id="spanid" class="spanclass">jquery基本选择器</span>
		<a>other</a>

$(document).ready(function(){
				$("#spanid").css("fontSize","32px");
				$(".spanclass").css("color","white");
				$("span").css("background","red");
				$("*").css("fontSize","32px");
				$("span,a").click(function(){
					alert("别乱点我")
				})
			})

层次选择器

符号	功能	返回值	示例
$("father son")	选择father里面的所有son子子孙孙元素	元素集合	$("div span")：选中div里面的span子子孙孙元素
$("father>son")	选择father里面的所有直接儿子元素	元素集合	$("div span")：选中div里面的所有直接儿子元素
$("prev+next")	选择prev元素紧跟的下一个兄弟元素next	元素集合	$("div+p")：选中div后面的第一个p元素
$("prev~next")	选择prev元素后面的所有兄弟元素	元素集合	$("div+p")：选中div后面的所有p兄弟元素

<ul id="ul1">
			<li>li1</li>
			<li>li2</li>
		</ul>

<div class="out">
out
<div class="inner">inner</div>
</div>
<div class="out">
	out
</div>
<p>p</p>
<a>a1</a>
<a>a2</a>

<style>
			.out {
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}

			.inner {
				width: 50px;
				height: 50px;
				border: 1px solid green;
			}
</style>
<script>
			$(function() {
			    $("ul li").css("fontSize", "48px");//所有li
				$("body>div").css("border", "5px solid blue");//直接子代div
				$("p+a").css("fontSize", "48px");
				$("p~a").css("color", "red");
			})
</script>

截图：

过滤选择器

符号	功能	返回值	示例
:first	第一个元素	单个元素	$("ul li:first")：选中ul中第一个li
:last	最后一个元素	单个元素	$("ul li:last")：选中ul中最后一个li
:not(selector)	除了某个元素，其他元素都选中	元素集合	$("ul li:not(0)")：选中除了第一li
:odd	选中下标奇数行的数据	元素集合	$("ul li:odd"):选中偶数行的li
:even	选中下标偶数行的数据	元素集合	$("ul li:even"):选中奇数行的li
:eq(index)	选中下标为index的元素	单个元素	$("ul li:eq(0)"):选中第一个li
:gt(index)	选中下标大于index的元素	元素集合	$("ul li:gt(1)"):选中第三个li以及后面
:lt(index)	选中下标小于index的元素	元素集合	$("ul li:lt(1)"):选中第一个li
:header	选中所有标题元素	元素集合	$(":header"):选中所有标题元素

<ul>
			<li>第一行</li>
			<li>第二行</li>
			<li>第三行</li>
			<li>第四行</li>
</ul>
		<h1>标题1</h1>
		<div><h2>标题2</h2></div>
		
<script>
			
			$(function(){
				//设置首行
				$("ul li:first").css("fontSize","48px");
				//设置尾行
				$("ul li:last").css("fontSize","48px");
				//设置小于第三行
				$("ul li:lt(2)").css("fontSize","48px");
				//设置大于第二行
				$("ul li:gt(1)").css("fontSize","48px");
				//设置偶数行,奇数下表,从0开始
				$("ul li:odd").css("background","red");
				//设置奇数行,偶数下表,从0开始
				$("ul li:even").css("background","green");
				//设置下标指定行
				$("ul li:eq(0)").css("color","white");
				//排除下标指定行
				$("ul li:not(ul li:first)").css("color","white");
				//设置标题行
				$(":header").css("background","blue");
			})
		</script>

截图：

属性选择器

$("input[type='password']")

文本:<input type="text" value="文本"/><br />
		密码:<input type="password" value="密码" /><br />
		<button>提交</button>
		<script>
			
			$(function(){
				$("button").click(function(){
					$("input[type='password']").css("background","blue");
				})
			})
		</script>

内容过滤选择器

NO.	选择器	描述	示例
1	：contains(文本)	包含括号内的文本的元素集合（括号内要加引号）	$("div:contains('java')"):选中文本含有java的div
2	：empty空元素	（不包含子元素或文本的元素）集合	$("div:empty")：选中不包含文本内容和子元素的div
3	：has（选择器）	包含括号中选择器选中的元素集合的元素集合	$("div:has(li)"):包含有li的div元素
4	：parent	含有子元素或者文本的元素集合	$("div:parent"):选中含有文本内容和子元素的div

<script>
			$(function(){
			$("button:contains('搜索')").click(function(){
				var val = $(":text").val();
				$("li").css("display","none");
				$("li:contains("+val+")").css("display","block");
			});
			$("button:contains('查找')").click(function(){
				$("li").css("display","none");
				$("span:empty").parent().css("display","block");
			})
			})
</script>

	<input type="text" name="search" />
		<div style="margin-top: 20px;">
		<button>搜索指定号码的人员</button>
		<button>查找未入录电话号码的人员</button>
		</div>
		<ul>
			<li>张三：<span></span></li>
			<li>李四：<span>15888888888</span></li>
			<li>王五：<span>16866688899</span></li>
			<li>赵六：<span></span></li>
		</ul>

可见性过滤选择器

可见性过滤选择器	功能	示例	返回值
:hidden	获取所有不可见元素，包括css属性中的display:none和visablility=hidden，还有input元素属性为type=“hidden”	$("input:hidden")	boolean
:visible	获取所有可见元素	$("input:visible")	boolean

筛选过滤器

符号	功能	用法
find(selector)	选中指定元素的所有后代元素（子子孙孙）
children(selector)	选中查询指定元素的直接元素（亲儿子元素）
siblings(selector)	选中查询所有兄弟元素（不包括自己）
parent(selector)	查找父元素（亲的）
:first-child	获取父元素的第一个子元素
:last-child	获取父元素的最后一个子元素

<div>
			div1
			<span id="span1">span1</span>
			<span>span2</span>
			<span>span3</span>
			<span>span4</span>
		</div>
		<span>span5</span>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>


$("div").find("span").css("color", "red");
$("div").children("span").css("fontSize", "22px");
$("#span1").siblings().css("background","yellow");
$("#span1").parent().css({"width":"100px","heigth":"100px","border":"1px solid blue"});
$("ul li:first-child").css("color","blue");
$("ul li:last-child").css("color","blue");

表单选择器

符号	示例	说明
:input	$(":input")	所有的元素
:text	$(":text")	所有type="text"的元素
:password	$(":password")	所有type="password"的元素
:radio	$(":radio")	所有type="radio"的元素
:checkbox	$(":checkbox")	所有type="checkbox"的元素
:submit	$(":submit")	所有type="submit"的元素
:reset	$(":reset")	所有type="reset"的元素
:button	$(":button")	所有type="button"的元素
:image	$(":image")	所有type="image"的元素
:file	$(":file")	所有type="file"的元素

<div id="div1">
			div的input:
			<input type="text" />
		</div>
		外面的input:<input type="password" /><br />
		radio:<input type="radio" /><button>点击隐藏(button也是input)</button><br />
		checkbox:<input type="checkbox" />篮球 <input type="checkbox" />足球<br />
		submit:<input type="submit" value="提交"/><br />
		reset:<input type="reset" value="重置" /><br />
		<div>
		image:<input type="image" src="img/eg_submit.jpg" /><br />
		file:<input type="file" />
</div>


			  $(":image").css("border","10px solid red");
			  $(":input").css("background","red"); 
			  $(":text").css({"width":"500px","height":"50px"}); 
			  $(":password").css({"width":"500px","height":"50px"}); 
			  $("button").click(function(){
			  $(":radio").hide();
			  });
			  $(":checkbox").attr("checked","true");
			  $(":submit").css({"width":"500px","height":"50px"});
			  $(":reset").css({"width":"500px","height":"50px"});
			  $(":button")({"width":"500px","height":"50px"});
			  $(":file").css("background","yellow");

表单对象属性过滤选择器

选择器	功能	示例
:enable	获取所有可用元素	$("#form:enable")获取id为form的表单可以用元素
:disable	获取所有不可用元素	$("#form:enable")获取id为form的表单不可用元素
:checked	获取所有被选中的元素(包括单选框，复选框)	$("input:checked")获取所有被选中的input元素
:selected	获取所有被选中的选项元素	$("select:selected")获取所有被选中的select元素

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

<h1>我的邮箱</h1>
		<ul>
			<li><input type="checkbox" name="email[]" value="1"/>信息1</li>
			<li><input type="checkbox" name="email[]" value="1"/>信息2</li>
			<li><input type="checkbox" name="email[]" value="1"/>信息3</li>
			<li><input type="checkbox" name="email[]" value="1"/>信息4</li>			
		</ul>
<div><button>全选</button><button>反选</button><button>全不选</button></div>

$(function(){
				$("button:contains('全选')").click(function(){
					$("input").prop("checked","true");
				});
				$("button:contains('反选')").click(function(){
				//没有选中的让它选中，选中的让它取消选中
					var objChecked = $("input:checked");
					$("input:not(:checked)").prop("checked",true);
					objChecked.prop("checked",false);
				});
				$("button:contains('全不选')").click(function(){
					$("input").prop("checked",false);
				});
				
			})

CSS样式操作

设置样式:

设置单个
.css("属性名","属性值")
设置多个
.css("属性名","属性值").css("属性名","属性值")
设置多个同上
.css({"属性名":"属性值","属性名":"属性值"})

追加移除样式

addClass()添加样式
removeClass()移除样式
toggleClass()样式切换

<div>div</div>
<button>添加样式</button>
<button>移除样式</button>
<button>add/remove</button>

.div1{
				width: 200px;
				height: 200px;
				border: 5px solid red;
}
$(function(){
				$("button:contains('添加')").click(function(){
					$("div").addClass("div1");
				});
				$("button:contains('移除')").click(function(){
					$("div").removeClass("div1");
				});
				$("button:contains('add/remove')").click(function(){
					$("div").toggleClass("div1");
				});
				
			})

元素节点的操作

添加子节点

语法	功能
append(content)	$(“A”).append("B")表示将B追加到A最后面
appendTo(content)	$(“B”).appendTo("A")表示将B追加到A最后面
prepend(content)	$("A").prepend("B")表示在A之前添加元素 B
prependTo(content)	$("B").prependTo("A")表示在A之前添加元素 B

<ul id="ul1">
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<script>
			$(function(){
				$("ul").append($("<li>Four</li>"));
				$("<li>Five</li>").appendTo("ul");
				$("ul:first").prepend($("<li>prepend</li>"));
				$("<li>prependTo</li>").prependTo($("ul:first"));
			})
			
		</script>
		
结果：
prependTo
prepend
One
Two
Three
Four
Five

插入兄弟节点

语法	功能
after(content)	$("A").after("B")表示将B插入到A之后
insertAfter(content)	$("B").insertAfter("A")表示将B插入到A之后
before(content)	$("A").before("B")表示B插入到A之前
insertBefore(content)	$("B").insertBefore("A")表示B插入到A之前

<ul id="ul1">
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
</ul>

$(function(){
				$("ul li:eq(1)").after($("<li>after</li>"));
				$("<li>insertAfter</li>").insertAfter($("ul li:eq(2)"));
				$("ul li:eq(1)").before($("<li>before</li>"));
				$("<li>insertBefore</li>").insertBefore($("ul li:eq(1)"));
})

结果：
One
insertBefore
before
Two
after
insertAfter
Three

替换元素

语法	功能
replaceWith()
replaceAll()

<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<script>
			$("ul li:first").replaceWith($("<li>replaceWith</li>"));
			/* $("ul li:first").replaceWith($("<li>replaceWith</li>")); */
			$("<li>replaceWith</li>").replaceAll($("ul li:last"));
			
		</script>
		
结果：
replaceWith
Two
replaceWith

复制节点

语法	功能
clone(boolean),true表示复制事件,false反之	$("ul li:last").after($("ul li:last").clone())

<ul id="ul1">
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		
		$(function(){
				$("ul li:last").after($("ul li:last").clone());
			})
结果：
One
Two
Three
Three

删除节点

语法	功能
remove()	删除整个节点
detach()	删除整个节点，但是保留绑定事件、附加的数据
empty()	清空节点内容

<ul>
			<li>one</li>
			<li>two</li>
			<li>three</li>
		</ul>
		<script>
			$(function(){
				//$("ul li:last").remove();//删除整个节点
				//$("ul li:last").detach();//删除整个节点，但保留事件
				//$("ul li:last").empty();//清空内容
			})
		</script>

遍历节点

遍历子元素：$("body").children()获取body下面的所有直接子元素

$("ul").children().css("fontSize","48px");

each() 循环迭代数组中的数据

$("ul li").each(function(index,element){
		$(this).css("background","blue");
});

遍历同辈元素/节点

语法	功能
next([expr])	$("ul li:first").next():选中第二个元素
prev([expr])	$("ul li:last").prev()：选中倒数第二个元素
siblings([expr])	$("ul li:eq(1)").siblings()：选中除了第二个元素的其他元素
first([expr])	$("ul li").first()：选中第一个元素
last([expr])	$("ul li").last ：选中最后一个元素

$("ul li").first().css("color","red");
$("ul li").last().css("color","red");
$("ul li:first-child").next().css("color","red");
$("ul li:last-child").prev().css("color","red");
$("ul li:eq(1)").siblings().css("color","red");

获取文本值

不设置参数表示获取值，设置参数表示设置值。

1、.html()返回或设置被选中元素内容(相当于js的innerHTML)；

2、.text()取出或设置text内容

3、.attr()取出或设置某个元素的属性值

注意：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

4、.width() 取出或设置某个元素的宽度

5、.height()取出或设置某个元素的高度

6、.val()取出或设置html内容，取出表单的值

注意：html()获取第一个匹配的元素的文本或设置它的文本。

事件

鼠标事件

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	点击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover（）事件	鼠标移过时
mouseout()	触发或将函数绑定到指定元素的mouseout()事件	鼠标移出时

<div></div>
div{
			width: 200px;
			height: 200px;
			border: 2px solid red;
		}
		
	$(function(){
				$("div").click(function(){
					alert("点我干嘛")
				});
				$("div").mouseover(function(){
					alert("滚开");
				})
				$("div").mouseout(function(){
					alert("回来");
				})
			})

键盘事件

方法	说明	执行时机
keydown()	触发或将函数绑定在指定元素的keydown事件	按下键盘时

案例：

<button>按回车键</button>
		<script>
			$(function(){
				$(document).keydown(function(event){
					if(event.keyCode==13){
						alert("你按了回车键");
					}
				})
			})
		</script>

表单事件

方法	描述	执行时机
Focus() 少用	触发或将函数绑定到制定元素的focus事件	获取焦点
Blur() input	触发或将函数绑定到制定元素的blur事件	失去焦点
Submit() 表单提交	表单提交时，触发的提交事件，只适用于表单	点击提交按钮

<form action="#" method="post" id="forms">
			username:<input type="text" name="username"  id="username"/><br>
			password:<input type="password" name="password" id="password" /><br>
			<button>提交</button>
		</form>
		<script>
			$(function(){
				$("#username").blur(function(){
					alert("用户名失去焦点");
				});
				$("button").click(function(){
					alert("校验通过，准备提交表单")
					$("#orms").submit();
				})
			})
			
		</script>

Toggle 事件

toggle() 方法有两个功能：

toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些素。（切换隐藏显示）
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

1、显示隐藏
			div{
				width: 200px;
				height: 200px;
				border: 2px solid red;
				display: none;
			}

		<div>div1</div>
		<button>显示/隐藏</button>
		
			$(function(){
			$("button").click(function(){
				$("div").toggle(3000);
			})
			})
2、绑定多个事件（注意不能用min.js了）
$("#b2").toggle(
            function () {
                $("body").css("background-color","green");
            },
            function(){
                $("body").css("background-color","red");
            },
            function(){
                $("body").css("background-color","yellow");
            }
        );

绑定事件

绑定事件bind()方法 & 解除unbind() 方法

1: bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

2:unbind() 方法移除被选元素的事件处理程序. 该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过 jQuery 附加的事件处理程序。

两种写法：

<button id="btn1">第一种写法、绑定多个事件，onclick和mouseout</button>
		<button id="btn2">第二种写法，绑定多个事件，onclick和mouseout</button>
		<script>
			$(function(){
				$("#btn1").bind(
				"click",function(){
					alert("点击");
					}	
				).bind(
				"mouseout",function(){
					alert("鼠标移出去");
				});
				
			});
			$(function(){
			$("#btn2").bind({
				click:function(){
					alert("点击")
				},
				mouseout:function(){
					alert("鼠标移出");
				}
			})
				
			});
			
		</script>

解绑：

每点击一次就widht和height加50，第四次点击就解除事件

$(document).ready(function () {
        var count=1;
        /*bind()功能：绑定多个事件*/
        /*绑定一个click事件*/
        $("#b4").bind("click",function () {
            count++;
            if(count>3){
                /*点击到了3次之后，解除绑定事件*/
                $(this).unbind();
            }
           $("div").animate({
               width:"+=50px",
               height:"+=50px"
           })

        });
    });

        div{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

<div></div>

    <button id="b4">bind事件</button>

</body>

动画效果事件

可以设置时间，单位毫秒

单独使用

show()和 hide();显示和隐藏效果
fadeIn()和fadeOut()：

可以通过改变元素的透明度实现淡入淡出效果;

$(selector).fadeIn(speed,callback)；淡入

$(selector).fadeOut(speed,callback)；淡出

自动切换

1、toggle()

2、fadeToggle()直接淡入淡出方法;

div{
				width: 200px;
				height: 200px;
				border: 2px solid red;
				display: none;
			}
			
			
		<div id="div1"></div>
		<button id="btn1">普通显示/普通隐藏</button>
		<button id="btn2">淡入显示/淡出隐藏</button>
       $(function(){
				$("#btn1").click(function(){
					$("#div1").toggle(2000);
				});
				$("#btn2").click(function(){
					/* 必须一开始div是隐藏的 */
					$("#div1").fadeToggle(2000);
				});
			})

切换到指定透明度

fadeTo() 方法：将被选元素的不透明度逐渐地改变为指定的值。

语法：
fadeTo(speed,opacity,callback);
联想：其他动画都可以设置回调函数（少用）
#div2{
				width: 200px;
				height: 200px;
				border: 2px solid red;
				display: none;
			}
			
<div id="div2"></div>

<button id="btn3">透明度</button>

	$("#btn3").click(function(){
					/* 必须一开始div是隐藏的 */
					$("#div2").fadeTo(2000,0.5);
});

滑动事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动事件</title>
		<script src="js/jquery-1.8.3.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 2px solid red;	
				}
		</style>
	</head>
	<body>
		<div></div>
		<button id="btn1">向上滑动</button>
		<button id="btn2">向下滑动</button>
		<button id="slidetoggle">slidetoggle</button>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div").slideUp(2000);
				})
				$("#btn2").click(function(){
					$("div").slideDown(2000);
				})
				$("#slidetoggle").click(function(){
					$("div").slideToggle(2000);
				})
			})
		</script>
	</body>
</html>

自定义动画 Animate()

Animate()方法用于创建自定义动画。请注意，生成动画的过程中可同时使用多个属性：

语法：
$(selector).animate({params},speed,callback);
必须的params参数定义动画的css属性
可选的speed时长
可选的callback执行完动画后调用函数

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

练习，转圈圈
<div></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button>动一动</button>

<style>
			div{
				width: 200px;
				height: 200px;
				border: 5px solid red;
				position: absolute;
			}
</style>
<script>
			$(function(){
				$("button").click(function(){
					
				  $("div").animate({
				    left:"500px"},2000);
					
				  $("div").animate({
				    top:"500px"
				   },3000);
				   
				    $("div").animate({
				     left:"0px"
				    },1000);
					
				    $("div").animate({
				    top:"0px"
	                },5000);
				 })
			})
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>玩玩</title>
		<script src="js/jquery-1.8.3.js"></script>
		<style>
			div {
				width: 200px;
				height: 200px;
				border: 5px solid red;

			}
		</style>
	</head>
	<body>
		<div></div>
		<button>扩大50px</button>
		<script>
			$(function() {
				var count = 1;
				$("button").bind(
					"click",
					function() {
						count++;
						if (count > 3) {
							$(this).unbind();
						}
						$("div").animate({
							width: "+=50px",
							height: "+=50px"
						})
					}
				)
			})
		</script>
	</body>
</html>

补充：

if($("element").is(":visible")){

//内容可见

}else{

//内容不可见

}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Hive脚本使用参数 hive使用教程

下一篇：Android渲染教程安卓底层渲染

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯