学习周记 Week11

1.学习目标

了解jQuery 事件、JQuery常用效果

2.学习内容

2.1 语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法

页面中指定一个点击事件:

$("p").click();

下一步是定义了点击后触发事件。您可以通过一个事件函数实现:

$("p").click(function(){
    // 动作触发后执行的代码!!
});

2.2 常用的 jQuery 事件方法

2.2.1 click、dblclick

当点击事件在某个 < p> 元素上触发时,隐藏当前的 < p> 元素:

$("p").click(function(){
  $(this).hide();
});

当双击元素时,会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:

$("p").dblclick(function(){
  $(this).hide();
});

2.2.2 mouseenter、mouseleave、mousedown、mouseup

当鼠标指针穿过元素时,会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

当鼠标指针离开元素时,会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:

$("#p1").mouseleave(function(){
    alert("再见,您的鼠标离开了该段落。");
});

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下!");
});

当在元素上松开鼠标按钮时,会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

2.2.3 hover

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

2.2.4 focus

当元素获得焦点时,发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

2.2.5 blur

当元素失去焦点时,发生 blur 事件。blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

2.3 JQuery常用效果

2.3.1 隐藏/显示

jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮,我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

运行结果
在这里插入图片描述
还可以调节速度

$("button").click(function(){
  $("p").hide(1000);
});

例子:带有 speed 参数的 hide() 方法,并使用回调函数
代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>
</head>
<body>
	
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
	
</body>
</html>

带速度的隐藏

在这里插入图片描述
调用函数
在这里插入图片描述

3.练习

1删除特定 < p> 元素:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

</body>
</html>

运行前:
在这里插入图片描述
运行后:
在这里插入图片描述2 移出移入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

运行前:
在这里插入图片描述
运行后:
在这里插入图片描述
点击按钮可以再次移出
在这里插入图片描述

4.课堂练习

4.1

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery JSON实例 - 通过JSON对象设置元素属性</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
	$(document).ready(function(){
		var JSONObject = [
							{
								"name": "菜鸟教程",
								"url": "http://www.runoob.com",
								"slogan": "学的不仅是技术,更是梦想!"
							},
							{
								"name": "W3School",
								"url": "http://www.w3school.com.cn",
								"slogan": "领先的Web技术教程!"
							},
							{
								"name": "Uni-app",
								"url": "https://uniapp.dcloud.io",
								"slogan": "为开发者而生,简单易用的跨平台前端框架!"
							},
							{
								"name": "北京工商大学大学",
								"url": "http://www.btbu.edu.cn",
								"slogan": "开始追逐梦想的地方!"
							},
							{
								"name": "百度",
								"url": "http://www.baidu.com",
								"slogan": "搜索你所需要的!"
							}
						];
		$("a").each(function(index, element) {
							//通过设置DOM对象属性的方式设置<a>标签属性
							element.innerHTML=JSONObject[index].name;
							element.href=JSONObject[index].url;
							element.title=JSONObject[index].slogan;
						});
						});
	</script>
	</head>
	<body>
		
		<a href="#" class="list-group-item active" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
		<a href="#" class="list-group-item" target="_blank"></a>
	</body>
</html>

JSON:

var JSONObject = [
					{
						"name": "菜鸟教程",
						"url": "http://www.runoob.com",
						"slogan": "学的不仅是技术,更是梦想!"
					},
					{
						"name": "W3School",
						"url": "http://www.w3school.com.cn",
						"slogan": "领先的Web技术教程!"
					},
					{
						"name": "Uni-app",
						"url": "https://uniapp.dcloud.io",
						"slogan": "为开发者而生,简单易用的跨平台前端框架!"
					},
					{
						"name": "北京工商大学大学",
						"url": "http://www.btbu.edu.cn",
						"slogan": "开始追逐梦想的地方!"
					},
					{
						"name": "百度",
						"url": "http://www.baidu.com",
						"slogan": "搜索你所需要的!"
					}
				];


运行效果:
在这里插入图片描述
*点击后跳转到相应网页

4.2

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<title>JSON示例</title>
		<style type="text/css">
			.p {			
				display: inline-block;			
				float: left;			
				width: 50%;			
				font-family: Microsoft YaHei;			
			}
			
			.p1 {
				font-size: 14px;
				color: #000;
				margin-top: 16px;
			}

			.p2 {
				font-size: 12px;
				color: #b0b0b0;
			}

			.p3 {
				font-size: 14px;
				color: #ff5f19;
			}

			.product {
				width: 100%;
				position: relative;
				margin: 20px 0 5px 0;
				height: 100px;
				background: #fafafa;
			}

			.img {
				width: 100px;
				height: 100px;
				float: left;
				margin-right: 20px;
			}
		</style>
		<script>
		 $.ajax({	 
			                type: "GET",	//请求方式	 
			                url: "0506实验二.json",	//url地址,就是json文件的路径	 
			                dataType: "json",	//数据类型,可以是 text xml json  script  jsonp	 
			         success: function(result){	//result是响应信息返回的结果,此处包含了返回的json对象	 
			                    addBox(result);	 //调用addBox函数,将result数据添加到box容器中
			                }	 
			            });
function addBox(result) {
					//result是Json对象的集合,通过JQuery的each方法进行遍历,为每个对象生成div元素
					$.each(result, function(index, obj) {
						//添加一个class为product的容器,放置产品信息
						$("#box").append("<div class='product'>" + 
						
							//获得图片地址
							"<div><img class='img' src='" + obj['url'] + "'></div>" +
							
							//获得名字
							"<div class='p1 p'>" + obj['name'] + "</div>" +
							
							//获得地址
							"<div class='p2 p'>" + obj['address'] + "</div>" +

							//获得作者
							"<div class='p3 p'>" + obj['author'] + "</div>" +

							"</div>");
					});
				}
		</script>
	</head>
	<body>
		<!-- 构建装一个容器 -->
		<div id="box">
			
		</div>
	</body>
</html>

JSON

[
  {
    "name":"桥",
    "address":"地址1",
    "author":"作者1",
    "url":"./demo1.jpg"
  },
 
  { 
    "name":"大海星",
    "address":"地址1",
    "author":"作者2",
    "url":"./demo2.jpg"
  },
 
  {
    "name":"海滨日落",
    "address":"地址1",
    "author":"作者3",
    "url":"./demo3.jpg"
  },
 
  {
    "name":"日出",
    "address":"地址1",
    "author":"作者4",
    "url":"./demo4.jpg"
  },
 
  {
    "name":"桂林山水甲天下",
    "address":"地址1",
    "author":"作者5",
    "url":"./demo5.jpg"
  },
 
  {
    "name":"花田中的木屋",
    "address":"地址1",
    "author":"作者6",
    "url":"./demo6.jpg"
  }
]

运行结果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值