jQuery笔记（一）

qq_45783949

已于 2024-05-16 21:22:38 修改

阅读量102

点赞数

分类专栏： HTML 文章标签： jquery

于 2020-08-11 21:04:09 首次发布

原文链接：https://www.runoob.com/jquery/jquery-hide-show.html

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程。

网页中添加 jQuery

从 jquery.com 下载 jQuery 库

提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

通过 CDN（内容分发网络）引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软

Staticfile CDN:

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

百度 CDN:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

Google CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

jQuery 语法

通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素 $(“#test”).hide() - 隐藏 id=“test” 的元素

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
		<title>菜鸟教程([runoob.com](http://runoob.com/))</title>
		<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
		</script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("#test").hide();   //$(".test").hide();   //当用户点击按钮后，有 id="test"  或者 class="test" 属性的元素将被隐藏：
				});
			});
		</script>
	</head>
	<body>
		<h2>这是一个标题</h2>
		<p>这是一个段落</p>
		<p id="test">这是另外一个段落</p>
		<button>点我</button>
	</body>

</html>

独立文件中使用 jQuery 函数

<head>
<script src="my_jquery_functions.js"></script>
</head>

笔记：

通过 $(" : b u tt o n ") 可以选取所有 t y p e = " b u tt o n " 的 < in p u t > 元素和 < b u tt o n > 元素，如果去掉冒号，$ (“button”)只能获取元素。

$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素中的span元素
$(div>p)            父子选择器 //div下的所有p元素
$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素
$(":emtyp")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden")       //所有隐藏元素 visible 
$("input:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素

jQuery 事件

页面对不同访问者的响应叫做事件

常见 DOM 事件：

jQuery 效果- 隐藏和显示

实例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程([runoob.com](http://runoob.com/))</title>
		<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
		</script>
		<script>
			$(document).ready(function(){
				$("p").click(function(){
					$(this).hide();
				});
			});
		</script>
	</head>
	<body>
		<p>如果你点我，我就会消失。</p>
		<p>继续点我!</p>
		<p>接着点我!</p>
	</body>
</html>

效果：依次点击p标签内容，标签内容消失

实例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
		</script>
		<script>
			$(document).ready(function(){
			$(".ex .hide").click(function(){
				$(this).parents(".ex").hide("slow");
			});
			});
		</script>
		<style type="text/css">
			div.ex{
				background-color:#e5eecc;
				padding:7px;
				border:solid 1px #c3c3c3;
			}
		</style>
	</head>
	<body>
		<h3>李白</h3>
		<div class="ex">
			<button class="hide">点我隐藏</button>
			<p>李白<br>
			千金散尽还复来</p>
		</div>
		
		<h3>杜甫</h3>
		<div class="ex">
			<button class="hide">点我隐藏</button>
			<p>杜甫<br>
			无边落木萧萧下，不尽长江滚滚来</p>
			
		</div>
	
	</body>
</html>

隐藏与显示 hide() 与 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>

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

注：对于可选的 callback 参数，有以下两点说明：

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数；

实例一：

<head>
	<meta charset="utf-8">
	<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
	</script>
	<script>
		$(document).ready(function(){
			$("button").click(function(){
				$("p").hide(1000);
			});
		});
	</script>
</head>

实例二：

<!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>

注：jQuery中自定义动画

linear:每一步的距离和前一步都是相同的，也就是等速
 swing:速度会加快然后最后一点距离再减速

jQuery toggle()

toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

实例：

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

qq_45783949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery笔记（一）

jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程。网页中添加 jQuery从 jquery.com 下载 jQuery 库提示：将下载的文件放在网页的同一目录下，就可以使用jQuery。从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery通过 CDN（内容分发网络）引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的，建议使用百度、又拍云、
复制链接

扫一扫

专栏目录