`
fengxu0706
  • 浏览: 15699 次
社区版块
存档分类
最新评论

jQuery控制页面

阅读更多

一、标记的属性

  1.each()遍历元素

    each(callback)方法主要用于对选择器中的元素进行遍历,它接受一个函数作为参数,该函数接受一个参数,指代元素的序号,可以配合this关键字来使用。index为元素所处的序号(从零开始计数)。

  2.获取属性的值

    attr(name)方法可以得到某个对象的某个特定属性的值。还可以通过位置选择器来指定某个元素的属性值(:eq(0))。

  3.设置属性的值

    (1) attr(name,value) 通用表达式

    (2) attr(name,fn) 函数

  4.删除属性

    removeAttr(name)方法将删除某属性值。$("button").romoveAttr("disabled");removeAttr(name)删除属性相当于HTML的标记中不设置该属性,并不是取消了该标记的这个特点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>each()方法</title>
<style type="text/css">
<!--
img{
	border:1px solid #003863;
}
.myClass1{
	border:1px solid #750037;
	width:120px; height:80px;
}
.myClass2{
	background-color:#ffcdfc;
}
p{
	color:blue; cursor:help;
	font-size:13px;
	margin:0px; padding:5px;
}
.highlight{
	background-color:#FFFF00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
	//1.each
 function each(){
 	$("img").each(function(index){
 		this.title = "这是第" + index + "幅图,id是:" + this.id;
 	});	
}
	//2.attr em eq
 function attr(){
 	var titleStr =	$("em:eq(1)").attr("title");	
 	$("span").text(titleStr);
}

//3.设置属性的值
function attrValue(){
	$("button:gt(0)").attr("disabled","disabled");
}

//4.设置属性的值
function attrEach(){
	$("div").attr("id",function(index){
		return index;
	}).each(function(){
		$(this).find("span").html("(id=" + this.id + ")");
	});
}

</script>
</head>
<body>
<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">
<input type="button" value="1.each" onclick="each();">
<input type="button" value="5.attrMany" onclick="attrMany();">
<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
<p>在树林里面<em title="running">跑啊跑</em>...</p>
<p>title属性的值是:<span></span></p>
<input type="button" value="2.attr" onclick="attr();">
<button onclick="DisableBack()">第一个Button</button>&nbsp;
<button>第二个Button</button>&nbsp;
<button>第三个Button</button>&nbsp;
<input type="button" value="3.attrValue" onclick="attrValue();">

	<div>第0项 <span></span></div>
	<div>第1项 <span></span></div>
	<div>第2项 <span></span></div>
<input type="button" value="4.attrEach" onclick="attrEach();">
</body>
</html>

 二、设置元素的样式

  1.添加、删除CSS类别

    addClass(names),类别之间可以用空格分离。

    removeClass(names),类别之间可以用空格分离。

  2.在类别间动态切换

    用toggleClass()方法动态切换CSS类别,toggleClass()方法中,只能设定一种CSS类别,不能同时对多个CSS类别进行切换。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>each()方法</title>
<style type="text/css">
<!--
img{
	border:1px solid #003863;
}
.myClass1{
	border:1px solid #750037;
	width:120px; height:80px;
}
.myClass2{
	background-color:#ffcdfc;
}
p{
	color:blue; cursor:help;
	font-size:13px;
	margin:0px; padding:5px;
}
.highlight{
	background-color:#FFFF00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">



//6.同时添加多个CSS类别
function addManyCSS(){
	$("div").addClass("myClass1 myClass2");
}

//7.删除多个CSS类别
function removeManyCSS(){
	$("div").removeClass("myClass1 myClass2");
}

//8.CSS类别切换
function toggleClass(){
	$("p").toggleClass("highlight");
}

</script>
</head>
<body>

<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
<p>在树林里面<em title="running">跑啊跑</em>...</p>
<p>title属性的值是:<span></span></p>

<div></div>
<input type="button" value="6.同时添加多个CSS类别" onclick="addManyCSS();">
<input type="button" value="7.删除多个CSS类别" onclick="removeManyCSS();">
	<p>高亮?</p>
<input type="button" value="8.CSS类别切换" onclick="toggleClass();">

 </body>
</html>

 eg:伸缩菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的菜单,用jQuery重写</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
#navigation ul li ul.myHide{	/* 隐藏子菜单 */
	display:none;
}
/*
不再需要myShow样式
#navigation ul li ul.myShow{	
	display:block;
}
*/
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
/*	
$(function(){
	//找到所有li标记中包含的ul标记
	//然后找到它的前一个标记(即<a>),并添加click()事件
	$("li").find("ul").prev().click(function(){
		//点击<a>时让它后面的兄弟(即<ul>)切换CSS样式
		$(this).next().toggleClass("myHide");
	});
});
*/
/*
//替换原来的例题
function change(){
	$(this).parent().find("ul").toggleClass("myHide");
	//通过父元素li,找到兄弟元素ul
	var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
	//CSS交替更换来实现显、隐
	if(oSecondDiv.className == "myHide")
		oSecondDiv.className = "myShow";
	else
		oSecondDiv.className = "myHide";
}
window.onload = function(){
	$("li").find("ul").prev().click(change);
	/*var oUl = document.getElementById("listUL");
	var aLi = oUl.childNodes;	//子元素
	var oA;
	for(var i=0;i<aLi.length;i++){
		//如果子元素为li,且这个li有子菜单ul
		if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
			oA = aLi[i].firstChild;	//找到超链接
			oA.onclick = change;	//动态添加点击函数
		}
	}
}*/

$(function(){
	$("li").find("ul").prev().click(function(){	
		$(this).next().toggleClass("myHide");
	});
});
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul class="myHide">
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul class="myHide">
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul class="myHide">
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>
 

eg:隔行颜色交替变换的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>交替变幻的表格</title>
<style>
<!--
.datalist{
	border:1px solid #007108;	/* 表格边框 */
	font-family:Arial;
	border-collapse:collapse;	/* 边框重叠 */
	background-color:#d9ffdc;	/* 表格背景色 */
	font-size:14px;
}
.datalist th{
	border:1px solid #007108;	/* 行名称边框 */
	background-color:#00a40c;	/* 行名称背景色 */
	color:#FFFFFF;				/* 行名称颜色 */
	font-weight:bold;
	padding-top:4px; padding-bottom:4px;
	padding-left:12px; padding-right:12px;
	text-align:center;
}
.datalist td{
	border:1px solid #007108;	/* 单元格边框 */
	text-align:left;
	padding-top:4px; padding-bottom:4px;
	padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
	background-color:#a5e5aa;	/* 隔行变色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("table.datalist tr:nth-child(odd)").addClass("altrow");
	$("table").mouseover(function(){
		$("tr:gt(0)").toggleClass("altrow");
	});
	$("table").mouseout(function(){
		$("tr:gt(0)").toggleClass("altrow");
	});
});
</script>
</head>
<body> 
<table class="datalist" summary="list of members in EE Studay" id="oTable">
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Class</th>
		<th scope="col">Birthday</th>
		<th scope="col">Constellation</th>
		<th scope="col">Mobile</th>
	</tr>
	<tr>
		<td>isaac</td>
		<td>W13</td>
		<td>Jun 24th</td>
		<td>Cancer</td>
		<td>1118159</td>
	</tr>
    <tr>
		<td>fresheggs</td>
		<td>W610</td>
		<td>Nov 5th</td>
		<td>Scorpio</td>
		<td>1038818</td>
	</tr>
	<tr>
		<td>girlwing</td>
		<td>W210</td>
		<td>Sep 16th</td>
		<td>Virgo</td>
		<td>1307994</td>
	</tr>
	<tr>
		<td>tastestory</td>
		<td>W15</td>
		<td>Nov 29th</td>
		<td>Sagittarius</td>
		<td>1095245</td>
	</tr>
	<tr>
		<td>lovehate</td>
		<td>W47</td>
		<td>Sep 5th</td>
		<td>Virgo</td>
		<td>6098017</td>
	</tr>
	<tr>
		<td>slepox</td>
		<td>W19</td>
		<td>Nov 18th</td>
		<td>Scorpio</td>
		<td>0658635</td>
	</tr>
	<tr>
		<td>smartlau</td>
		<td>W19</td>
		<td>Dec 30th</td>
		<td>Capricorn</td>
		<td>0006621</td>
	</tr>
	<tr>
		<td>shenhuanyan</td>
		<td>W25</td>
		<td>Jan 31th</td>
		<td>Aquarius</td>
		<td>0621827</td>
	</tr>
	<tr>
		<td>tuonene</td>
		<td>W210</td>
		<td>Nov 26th</td>
		<td>Sagittarius</td>
		<td>0091704</td>
	</tr>
	<tr>
		<td>ArthurRivers</td>
		<td>W91</td>
		<td>Feb 26th</td>
		<td>Pisces</td>
		<td>0468357</td>
	</tr>
	<tr>
		<td>reconzansp</td>
		<td>W09</td>
		<td>Oct 13th</td>
		<td>Libra</td>
		<td>3643041</td>
	</tr>
	<tr>
		<td>linear</td>
		<td>W86</td>
		<td>Aug 18th</td>
		<td>Leo</td>
		<td>6398341</td>
	</tr>
	<tr>
		<td>laopiao</td>
		<td>W41</td>
		<td>May 17th</td>
		<td>Taurus</td>
		<td>1254004</td>
	</tr>
	<tr>
		<td>dovecho</td>
		<td>W19</td>
		<td>Dec 9th</td>
		<td>Sagittarius</td>
		<td>1892013</td>
	</tr>
	<tr>
		<td>shanghen</td>
		<td>W42</td>
		<td>May 24th</td>
		<td>Gemini</td>
		<td>1544254</td>
	</tr>
	<tr>
		<td>venessawj</td>
		<td>W45</td>
		<td>Apr 1st</td>
		<td>Aries</td>
		<td>1523753</td>
	</tr>
	<tr>
		<td>lightyear</td>
		<td>W311</td>
		<td>Mar 23th</td>
		<td>Aries</td>
		<td>1002908</td>
	</tr>
</table>
</body>
</html>

 三、处理页面的元素

  1.直接获取、编辑内容

    hmtl()相当于获取节点的innerHTML属性,text()则用来获取元素的纯文本。

  2.移动和复制元素

    append()方法,可直接为某个元素添加新的子元素。如$("p").append($("a"));如果添加的目标<p>是唯一 的一个元素,那么$("a")将会被移动到该元素的后面 ,如果目标 <p>是多个元素 ,那么$("a")将会以复制 的形式,在每个<p>后面都添加一个子元素。

    appendTo(target ),用来将元素添加为指定目标的子元素,和append()一样,目标为多个时复制,目标为一个时移动。

  3.删除元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>text()与html()</title>
<style type="text/css">
<!--
p{
	margin:0px; padding:5px;
	font-size:15px;
	border:1px solid #642d00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
	//1.text and html
function textHtml(){
	$("p").click(function(){
		var str = $(this).text();
		$(this).html(str);
	});
}

//2.append
function appendHTML(){
	//直接添加HTML代码
	$("p:eq(0)").append("<b>啊~~~~</b>");
}

//3.添加多个目标
function appendMany(){
	$("p").append($("a")); //复制
}
 //4.appendTo添加到指定目标的子元素,把appendTo之前的内容添加到appendTo之后的内容
function appendTo(){
	$("a:eq(0)").appendTo($("p"));
}

//5.appendTo复制及移动
function appendToCopyOrMove(){
	$("img").appendTo("p");
}

//6.afterMany() 添加多个目标 在p:eq(1)之后添加a
function afterMany(){
	$("p").after($("a:eq(0)"));//添加目标为多个<p> 复制
}

//7.after 添加目标是唯一的 在p之后添加a
function after(){
		$("p:eq(0)").after($("a:eq(1)"));//添加目标是唯一的<p> 移动
}

//8.remove
function removeAllP(){
	$("p").remove();
}

//9.remove contians remove过滤器
function removeContains(){
	//$("p").remove(":contains('段 落1')");
	$("p:contains('段 落1')").remove();
	//两者效果一致,建议用后者
}

//10.删除子元素 empty
function empty(){
	$("p").empty();//只是清空子元素,样式等还在
}
</script>
</head>
<body>
	<p><b>文本</b>段 落1<em>示</em>例</p>
	<p><b>文本</b>段 落2<em>示</em>例</p>
	<a href="#">增加的链接1</a>
	<a href="#">增加的链接2</a>
	<input type="button" value="1.text and html" onclick="textHtml();">
	<input type="button" value="2.append" onclick="appendHTML();">
	<input type="button" value="3.appendMany" onclick="appendMany();">
	<input type="button" value="4.appendTo" onclick="appendTo();">
	<input type="button" value="6.afterMany" onclick="afterMany();">
	<input type="button" value="7.after" onclick="after();">
	<input type="button" value="8.removeAllP" onclick="removeAllP();">
	<input type="button" value="9.removeContains" onclick="removeContains();">
	<input type="button" value="10.empty" onclick="empty();">

</body>
</html>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>appendTo()方法</title>
<style type="text/css">
<!--
body{ margin:5px; padding:0px; }
p{ margin:0px; padding:1px 1px 1px 0px; }
img{
	border:1px solid #003775;
	margin:4px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//	1.appendToCopyOrMove
function appendToCopyOrMove(){
	$("img:eq(0)").appendTo($("p"));	//添加目标为多个<p> 复制
	$("img:eq(1)").appendTo($("p:eq(1)"));	//添加目标是唯一的<p> 移动
}

function prependTo(){
	$("img:eq(0)").prependTo($("p"));	//添加到所有子元素之前 复制
}

function prepend(){
	$("img:eq(0)").prepend($("p"));	//添加到所有子元素之前 复制
}
//4.clone
function clone(){
	$("img:eq(0)").clone().appendTo($("p"));	//添加目标为多个<p> 复制
	$("img:eq(1)").clone().appendTo($("p:eq(1)"));	//添加目标是唯一的<p> 复制
}

function cloneEven(){
	$("input[type=button]").click(function(){
			//克隆自己,并且克隆点击的行为
			$(this).clone(true).insertAfter(this);
		});
}
</script>
</head>
<body>
	<img src="08.jpg" title="08"> <img src="09.jpg" title="09">
    <hr>
    <p><img src="10.jpg" title="10"></p>
	<p><img src="10.jpg" title="10"></p>
    <p><img src="10.jpg" title="10"></p>
	<input type="button" value="1.appendToCopyOrMove" onclick="appendToCopyOrMove();">
  <input type="button" value="2.prepend" onclick="prepend();">   
  <input type="button" value="3.prependTo" onclick="prependTo();">   
  <input type="button" value="4.clone" onclick="clone();">   
	<input type="button" value="5.cloneEven" onclick="cloneEven()">

</body>
</html>
 

    remove()方法删除元素,可以在remove()方法中使用过滤器,但通常还是建议在选择器阶段就将要删除的对象确定,然后用remove()一次性删除。

    empty()方法直接删除子元素(样式等保留,只删除内容)

  4.克隆元素

    上面提到的元素的复制和移动,这取决于目标的个数,有时希望如果目标只有一个,也可同样执行复制操作,clone()方法可以克隆元素。

 

分享到:
评论

相关推荐

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,...

    第二章-JQUERY-控制页面

    通过学习和实践这些示例,你可以更好地掌握jQuery控制页面的方法和技巧,提升网页开发效率。 总结,jQuery作为前端开发的重要工具,以其简洁的语法和强大的功能,让开发者能够更轻松地控制和美化网页。了解并熟练...

    jquery控制页面部分刷新的方法

    本文实例讲述了jquery控制页面部分刷新的方法。分享给大家供大家参考。具体分析如下: 这段代码设计非常巧妙,通过jQuery的load方法加载页面的指定标签的内容 $('#button1').click(function() { var url = ...

    jquery控制页面的展开和隐藏实现方法(推荐)

    知识点:jQuery控制页面元素的展开和隐藏方法 jQuery是一种轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程,是目前Web开发中最常用的库之一。在页面布局中,有时候需要对某些部分...

    JQuery权威指南 源代码

    jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的...控制dom对象/7 1.2.3 jquery控制页面css /9 1.3 本章小结/11 第2章...

    精通javascript+jQuery

    《精通JavaScript+jQuery》从JavaScript的基础知识开始...在此基础之上又通过精彩的实例详细讲解了jQuery的相关技术:主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。

    jQuery动画特效---精通JavaScript+jQuery

    第11课 - jQuery控制页面 - [精通JavaScript+jQuery] 第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery]...

    jquery 实现的等待加载页面

    "jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery,一个强大的JavaScript库,简化了DOM操作、事件处理和动画效果,使得创建这种功能变得更加简单。 首先,我们来看`jquery....

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画,它能够以吸引人的视觉方式展示网页内容正在加载的过程,使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用,尤其在内容分块...

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...

    jQuery模拟页面加载进度条

    本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...

    jquery应用子页面在父页面打开

    5. **样式控制**:通过jQuery,我们可以方便地改变子页面中的元素样式。例如,`$("#iframeID").contents().find(".className").css("property", "value")`将修改子页面中所有`.className`类元素的`property`属性为`...

    jQuery权威指南-源代码

    1.2.3 jQuery控制页面CSS /9 1.3 本章小结/11 第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次...

    第 7 章 jQuery 基础.pptx

    jQuery 可以控制页面元素的样式、大小、位置、内容等属性,例如:`css()`、`width()`、`height()`、`text()` 等。 ### jQuery 任务实施 jQuery 任务实施包括:实现文字和图片提示效果、实现登录表单简单验证、...

    jquery页面屏蔽器插件

    3. **JavaScript**:插件的核心逻辑由JavaScript编写,通过jQuery库与HTML元素进行交互,实现页面元素的可见性控制。 ### 文件结构 - **block_demo.html**:这是一个示例文件,演示了插件的使用方法,包括如何引入...

    jquery前台logo页面

    在jQuery中,我们可以使用`.fadeIn()`和`.fadeOut()`方法实现logo的动态显示效果,配合`.delay()`和`.queue()`可以控制动画的时间间隔和执行顺序。同时,`.on('click', function() {...})`可以绑定点击事件,当用户...

    jQuery实现网页打开页面即弹窗

    **jQuery实现网页打开页面即弹窗** 在网页设计中,弹窗是一种常见的交互方式,用于显示重要的信息或者引导用户操作。jQuery,一个广泛使用的JavaScript库,提供了简洁的API来简化DOM操作,使得创建动态和交互性的...

    jQuery页面上下滚动触发区块动画特效

    在这款特效中,jQuery被用来监听页面滚动事件,以及控制元素的动画展示。通过使用jQuery,开发者可以更方便地实现复杂的页面交互功能,而无需编写大量原生JavaScript代码。 ### 2. 页面滚动事件 页面滚动事件是...

    精通JavaScript.jQuery.rar

    在此基础之上,《精通JavaScript+jQuery(1CD)》通过精彩的实例详细讲解了jQuery的相关技术,主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。讲解的重点在于简化...

Global site tag (gtag.js) - Google Analytics