第十九篇

最新推荐文章于 2022-07-12 19:03:35 发布

a530609250

最新推荐文章于 2022-07-12 19:03:35 发布

阅读量247

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/a530609250/article/details/87184141

版权

作业专栏收录该内容

25 篇文章 4 订阅

订阅专栏

jQuery中的事件与动画
jQuery事件是对JavaScript事件的封装，常用事件分类
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件：

click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时
mouseover( ) 触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时
mouseout( ) 触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时
mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件鼠标指针进入时
mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件鼠标指针离开时

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件：
keydown( ) 触发或将函数绑定到指定元素的keydown事件按下键盘时
keyup( ) 触发或将函数绑定到指定元素的keyup事件释放按键时
keypress( ) 触发或将函数绑定到指定元素的keypress事件产生可打印的字符时

绑定事件
bind(type,[data],fn);
移除事件
unbind([type],[fn])
hover( )方法和toggle( )方法
hover()方法相当于mouseover与mouseout事件的组合
语法：hover(enter,leave);
toggle()方法用于模拟鼠标连续click事件
语法：toggle(fn1,fn2,…,fnN);
toggle()方法不带参数，与show( )和hide( )方法作用一样
jQuery提供了很多动画效果
控制元素显示与隐藏
改变元素的透明度
改变元素高度
自定义动画
show() 控制元素的显示，hide( )控制元素的隐藏
$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
$(selector).slideUp ([speed],[callback])
$(s e l e c t o r) . s l i d e D o w n ([s p e e d], [c a l l b a c k]) 自定义动画$ (selector). animate({params},speed,callback)
相关代码示例如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>导航特效</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}
#nav .navsBox{
	width: 160px;
}
#nav .navsBox .firstNav{
	height:45px;
	line-height:45px;
	background-color:#EBEBEB;
	border-left:10px solid #FE705C;
	padding-left:20px;
	width:130px;
	font-weight:bold;
	cursor: pointer;
}
#nav .navsBox ul{
	display:none;
	list-style:none; 
}
#nav .navsBox ul li{
	display:block;
	height:45px;
	line-height:45px;
	padding-left:70px;
	width:90px; 
	background:#F2F2F2 33px 7px no-repeat;
}

#nav .navsBox ul li.jedh{
	background-image:url("./images/huan.gif");
}
#nav .navsBox ul li.jlbbyk{
	background-image:url("./images/you.gif");
}
#nav .navsBox ul li.jwljb{
	background-image:url("./images/gouwu.gif");
}
#nav .navsBox ul li.mrljb{
	background-image:url("./images/meiri.gif");
}
#nav .navsBox ul li.vipjtj{
	background-image:url("./images/zhe.gif");
}
#nav .navsBox ul li.onbg{
	background-color:#F9DBD1;
}

#nav .navsBox ul li a{
	color:#000;
	text-decoration:none;	
}


</style>
</head>
<body>
<div id="nav"> 
	 <div class="navsBox">
	 	<div class="firstNav">购物特权</div> 
		<ul>
			<li class="jedh"><a href="#">全额兑换</a></li>
			<li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
			<li class="jwljb"><a href="#">购物领金币</a></li>
			<li class="mrljb"><a href="#">每日领金币</a></li>
			<li class="vipjtj"><a href="#">VIP阶梯价</a></li>
		</ul>
	 </div> 
</div>
<script  src="js/jquery-1.12.4.js" ></script>
<script>
	$(document).ready(function () {
		$("#nav .navsBox .firstNav").click(function(){
			var $list = $("#nav .navsBox ul");
			$list.toggle();
		});
		$("#nav .navsBox ul li").mouseover(function(){
			$(this).addClass("onbg");  //为该元素添加类样式.onbg
		}).mouseout(function(){
			$(this).removeClass("onbg");//为该元素移除类样式.onbg
		});
	});
</script>
</body>
</html>

使用jQuery操作
DOMDOM操作分为三类：
  DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
  HTML-DOM：用于处理HTML文档，如document.forms
  CSS-DOM：用于操作CSS，如element.style.color="green"

使用css()为指定的元素设置样式值或获取样式值：css(name,value) ;
追加样式：$(selector).addClass(class);
移除样式：$(selector).removeClass("class") ;
切换样式：$(selector).toggleClass(class) ;
hasClass( )方法来判断是否包含指定的样式：$(selector). hasClass(class);
text()可以获取或设置元素的文本内容：$("div.left").text();

创建和删除节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

append(content)   $(A).append(B)表示将B追加到A中
appendTo(content)   $(A).appendTo(B)表示把A追加到B中
prepend(content)   $(A). prepend (B)表示将B前置插入到A中
prependTo(content)   $(A). prependTo (B)表示将A前置插入到B中


元素外部插入同辈节点：
after(content)   $(A).after (B)表示将B插入到A之后
insertAfter(content)   $(A). insertAfter (B)表示将A插入到B之后
before(content)  $(A). before (B)表示将B插入至A之前
insertBefore(content)   $(A). insertBefore (B)表示将A插入到B之前


删除节点：
jQuery提供了三种删除节点的方法
remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据


replaceWith()和replaceAll()用于替换某个节点
clone()用于复制某个节点


children()方法可以用来获取元素的所有子元素

相关代码示例如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>男生地带 </title>
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#boxlist{
	height:526px;
	width:996px;
	background:#fff url(images/bg.jpg) no-repeat 0px 0px;
}
.main{ 
	margin-left:278px; 
	border:1px solid #CCC;
}
.box{
	width:168px;
	padding:23px 5px;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	float:left;
	cursor:pointer;
}
.transparent_class{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter:alpha(opacity=60);
	opacity:0.6;
}
 
</style>
</head>
<body>
 <div id='boxlist'>
   <div style='height:43px;' ></div>
 	<div class='main'> 
    	<div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p2.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p3.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p4.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p4.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p2.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div style='clear:both;'></div>
    </div>
 </div>
 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	 $(document).ready(function(){
		 $('img').hover(function(){
			 $(this).addClass('transparent_class');
		 },function(){
			 $(this).removeClass('transparent_class');
		 });
	 });

 </script>
</body>
</html>

a530609250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第十九篇

jQuery中的事件与动画jQuery事件是对JavaScript事件的封装，常用事件分类基础事件鼠标事件键盘事件window事件表单事件复合事件鼠标光标悬停鼠标连续点击鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件：click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时mouseover( ) 触发或将函数绑定到指定元素的mouseover...
复制链接

扫一扫