第七周学习笔记

最新推荐文章于 2024-05-22 21:20:32 发布

我爱拜仁慕尼黑

最新推荐文章于 2024-05-22 21:20:32 发布

阅读量59

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46096384/article/details/118231142

版权

jQuery学习

1.1 jQuery简介

jQuery 是一个 JavaScript 函数库，包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

1.2jQuery 选择器

元素选择器
#id 选择器
.class 选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>Highwayman</h2>

<p>I was a highwayman</p>
	<p>Along the coach roads I did ride</p>
<button>点我</button>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<p></p>
<body>
<h3>夜空中最亮的星 - 逃跑计划 (Escape Plan)</h3>
<p>夜空中最亮的星 能否听清</p>
<p id="test">那仰望的人 心底的孤独和叹息</p>
<button>点我</button>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">追梦人</h2>
<p class="test">让青春吹动了你的长发让它牵引你的梦</p>
<p>不知不觉这城市的历史已记取了你的笑容</p>
<button>点我</button>
</body>
</html>

在这里插入图片描述

1.3jQuery事件

这里使用的是mouseenter事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('快乐就是如此简单');
  });
});
</script>
</head>
<body>

<p id="p1">摸头杀会有惊喜</p>

</body>
</html>

在这里插入图片描述
这里使用的是jQuery remove() 方法，删除被选元素及其子元素。

<!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(){
    $("#div1").empty();
  });
});
</script>
</head>
	
<body>

<div id="div1" style="height:140px;width:300px;border:1px solid black;
					  background-color:white;">

	<p align="center">你 一会看我 一会看云</p>
<p align="center">我觉得 你看我时很远</p>
<p align="center">你看云时很近</p>

</div>
<br>
<button>清空诗句</button>

</body>
</html>

在这里插入图片描述

渐进隐藏显示

<!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(){
    $("h1").hide(2000);
  });
  $("#show").click(function(){
    $("h1").show(2000);
  });
});
</script>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<h1>黑夜给了我黑色的眼睛<br>我却用它寻找光明</h1>

</body>
</html>