jQuery基础

最新推荐文章于 2023-10-21 17:31:41 发布
最新推荐文章于 2023-10-21 17:31:41 发布
阅读量707 收藏 2
点赞数
分类专栏： Java【洗髓】 网页基础 文章标签： HTML jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjs935219/article/details/100171705
版权

目录

一、JS文件

二、认识jQuery

三、使用jQuery

1、当点击按钮时，修改的显示文字

2、点击按钮时，将box1的内容移到box2

四、jQuery对象

1、点击按钮，修改class='java'的元素的样式

2、jQuery对象与DOM对象的转换

3、jQuery对象的遍历

五、jQuery选择器

1、ID选择器+Class选择器

2、标签类型选择器

3、子选择器

六、显示与隐藏

显示/隐藏

淡入/淡出

一、JS文件

可以把JavaScript代码单独存到一个*.js文件里，然后引入到HTML中

如：

/*1.文件名应为英文*/
/*2.不再需要<script>标签*/
var number = 120;

function speak()
{
	console.log("this is a example!");
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/example.js"></script>
	</head>
	<body>	
	</body>
	
	<script>
		console.log(number);
		speak();
	</script>
</html>

分享一下一般什么情况下需要单建一个JS文件

1、JS代码太多，希望与HTML分离

2、JS代码可以被多个HTML文件重用

3、希望把自己的JS写的工具类库分享给别人使用；比如最常用的jQuery库

 

二、认识jQuery

jQuery是一个JavaScript库，对原生JS进行了封装，是前段开发最常用的一个库；

官网：https://jquery.com

 

添加jQuery到项目中，根据版本而定.....

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

运行Chrome，检查是否成功加载（404 Not Found表示路径写错了）

 

三、使用jQuery

先来两个示例

1、当点击按钮时，修改<label>的显示文字

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	</head>
	<body>	
		<label class="website">Jsen.cn</label>
		
		<button onclick="test()">测试</button>
		
	</body>
	
	<script>
		function test()
		{
			//取得class = 'website'得对象
			var j = $('.website');
			
			//修改目标对象得HTML内容
			j.html('布局未来');
		}
	</script>
</html>

注：$是一个function的名称，代表一个方法

html(str) : 修改目标对象里的HTML内容

2、点击按钮时，将box1的内容移到box2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.box1{
				width: 200px;
				height: 60px;
				border: 1px solid #ccc;
				background-color: greenyellow;
				margin: 10px;
				text-align: center;
				padding: 10px;
			}
			.box2{
				width: 200px;
				height: 60px;
				border: 1px solid #ccc;
				background-color: lightblue;
				margin: 10px;
				text-align: center;
				padding: 10px;
			}
		</style>
	</head>
	<body>	
		<div class="box1">2019-08-31</div>
		
		<div class="box2"></div>
		
		<div>
			<button onclick="test()">测试</button>
		</div>
		
	</body>
	
	<script>
		function test()
		{
			//取得class = 'box1'的HTML
			var str = $('.box1').html();
			
			//设置class = 'box2'得元素的HTML
			$('.box2').html(str);
			
			//清空class = 'box1'得元素的HTML
			$('.box1').html("");
		}
	</script>
</html>

jQuery里的API风格：

j.html(str) : 带参数时表示设置（setter）

str = j.html() : 不带参数时表示获取（getter）

 

四、jQuery对象

三个小例子即可看清

1、点击按钮，修改class='java'的元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.java{
				background-color: aliceblue;
				text-align: center;
				color: aqua;
			}
			.ke{
				background-color: aliceblue;
				color: red;
			}
			button{
				width: 1520px;
			}
		</style>
	</head>
	<body>	
		<div class="java">2018-08-31</div>
		<div class="java">Java 基础</div>
		<div class="java">Java 进阶</div>
		<div class="java">Java GUI</div>
		<div class="java">Java 网页</div>
		<div class="java">Java 网站</div>
		<div class="java">Java 框架</div>
		<div class="java">Java 项目</div>
		<div class="java">大三前的最后一篇博客</div>
		<div>
			<button onclick="test()">加油</button>
		</div>
	</body>
	
	<script>
		function test()
		{
			//选中所有class='java'的元素
			 var kecheng = $('.java');
			 
			 //对所有元素进行操作,修改目标对象的class属性
			 kecheng.addClass('ke');
		}
	</script>
</html>

$(".java")实际的是返回一个数组/集合，同时操作所有匹配的目标元素


2、jQuery对象与DOM对象的转换

点击前：

点击后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.java{
				background-color: aliceblue;
				text-align: center;
				color: aqua;
			}
			.ke{
				background-color: aliceblue;
				color: red;
			}
			button{
				width: 1520px;
			}
		</style>
	</head>
	<body>	
		<div class="java">2018-08-31</div>
		<div class="java">Java 基础</div>
		<div class="java">Java 进阶</div>
		<div class="java">Java GUI</div>
		<div class="java">Java 网页</div>
		<div class="java">Java 网站</div>
		<div class="java">Java 框架</div>
		<div class="java">Java 项目</div>
		<div class="java">大三前的最后一篇博客</div>
		<div>
			<button onclick="test()">加油</button>
		</div>
	</body>
	
	<script>
		function test()
		{
			//选中所有class='java'的元素
			 var kecheng = $('.java');
			 
			 //e : 原生DOM元素
			 var e = kecheng[0];
			 e.innerHTML = "大三一起加油";
			 
			 //je : jQuery包装后的对象
			 var je = $(e);
			 //对所有元素进行操作,修改目标对象的class属性
			 je.addClass('ke');
		}
	</script>
</html>

观察可知：

DOM对象 ： 原生对象，操作不方便

jQuery对象 ：封装了DOM对象，操作方便

两者可以互换，但通常只用jQuery对象

 

3、jQuery对象的遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.java{
				background-color: aliceblue;
				text-align: center;
				color: aqua;
			}
			.ke{
				background-color: aliceblue;
				color: red;
			}
			button{
				width: 1520px;
			}
		</style>
	</head>
	<body>	
		<div class="java">2018-08-31</div>
		<div class="java">Java 基础</div>
		<div class="java">Java 进阶</div>
		<div class="java">Java GUI</div>
		<div class="java">Java 网页</div>
		<div class="java">Java 网站</div>
		<div class="java">Java 框架</div>
		<div class="java">Java 项目</div>
		<div class="java">大三前的最后一篇博客</div>
		<div>
			<button onclick="test()">加油</button>
		</div>
	</body>
	
	<script>
		function test()
		{
			//选中所有class='java'的元素
			 var kecheng = $('.java');
			 
			for(var i=0; i<kecheng.length; i++)
			{
				//遍历得到原生的DOM对象
				var e = kecheng[i];
				//构成jQuery对象
				var je = $(e);
				
				console.log("学习："+je.html());
			}

		}
	</script>
</html>

区分一下：

- 在调试时，DOM对象有标签，jQuery对象是数组

- - - - - - - -

 

五、jQuery选择器

选择器，用于在DOM树种定位查找一个元素

常用选择器：

ID选择器$("#example")
Class选择器$(".example")
标签类型选择器$("img")
子选择器$("#login .username"
属性选择器$("input[type='checkbox']")

演示三个小例子吧

1、ID选择器+Class选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.main{
				width: 300px;
				padding: 20px;
				height: 150px;
				margin: 100px auto;
				background-color: #f1f1f1;
				border: 1px solid #ccc;
				box-shadow: 1px 1px 3px #aaa;
			}
			#a1{
				background-color: aliceblue;
				text-align: center;
				color: aqua;
			}
			.a2{
				background-color:  bisque;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>	
		<div class="main">
			<div id="a1">1号</div>
			<div class="a2">2号</div>
		</div>
	</body>
	
	<script>
		//ID选择器
		var a1 = $("#a1").html();
		
		//Class选择器
		var a2 = $(".a2").html();
		
		console.log(a1+"----"+a2);
	</script>
</html>

2、标签类型选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.main{
				width: 100px;
				padding: 20px;
				height: 50px;
				margin: 30px auto;
				background-color: #f1f1f1;
				border: 1px solid #ccc;
				box-shadow: 1px 1px 3px #aaa;
			}
			#a1{
				background-color: aliceblue;
				text-align: center;
				color: aqua;
			}
			.a2{
				background-color:  bisque;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>	
		<div class="main">
			<label>1号</label>
			<label>2号</label>
		</div>
		<div class="main">
			<label>3号</label>
			<label>4号</label>
		</div>
	</body>
	
	<script>
		//标签类型选择器Type Selector
		var jelist = $("label");
		
		for(var i=0; i<jelist.length; i++)
		{
			var e = jelist[i];
			var je = $(e);
			console.log(je.html());
		}

		//另一种遍历方式
		for(var e of jelist)
		{
			var str = $(e).html();
			console.log(str);
		}
	</script>
</html>

3、子选择器

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.main{
				width: 100px;
				padding: 20px;
				height: 50px;
				margin: 30px auto;
				background-color: #f1f1f1;
				border: 1px solid #ccc;
				box-shadow: 1px 1px 3px #aaa;
			}
			.a1{
				background-color: aliceblue;
				text-align: center;
				color: aqua;
			}
			.a2{
				background-color:  bisque;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>	
		<div class='main a1'>
			<label class='mark'> xxx </label>
			
		</div>	
		<div class='main a2'>
			<label class='mark'> yyy </label>
		</div>			
	</body>
	
	<script>
				// 子选择器 .box2 .name 表示在class=‘box1' 下找 class='name'的节点
		console.log ($(".box1 .mark").html());
		
		console.log ($(".box2 .mark").html());
	</script>
</html>

六、显示与隐藏

显示/隐藏

显示 ： $(xxx).hide();

隐藏 ： $(xxx).show();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初始jQuery</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<style>
			.box{
				margin: 20px;
			}
		</style>
	</head>
	<body>	
	<div class="box">
		<button onclick="off()">隐藏</button>
		<button onclick="on()">显示</button>
	</div>
	<div class="box">
		<img class="langman" src="img/james01.jpeg" />
	</div>
		
	</body>
	
	<script>
		function off()
		{
			$(".langman").hide();
		}
		function on()
		{
			$(".langman").show();
		}
	</script>
</html>

淡入/淡出

淡入 ： $(xxx).fadeIn()

淡出 ： $(xxx).fadeOut()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		
		<style>
			
			/* 头像框 */
			.thumb {
				position: relative;
				width: 600px;
				height: 400px;
			}
			
			/* 头像框  / 图像 */
			.thumb img {
				width: 100%;
				height: 100%;
			}
			
			/* 头像框  / 下方遮罩层 */
			.thumb .mask {
				display: none;
				position: absolute;
				width: 100%;
				height: 30px;
				bottom: 0px;
				background-color: #C0C0C0; /*半透明 */
			}
			
			/* 头像框  / 下方遮罩层 / 按钮 */
			.thumb .mask button {
				width: 49%;
				height: 100%;
				box-sizing: border-box;
				background-color: #fff0; /* 透明 */
				border: 1px solid #aaa;				
			}
			.thumb .mask button:hover{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		<div class='thumb' onmouseenter="$('.mask',this).fadeIn()"
			onmouseleave="$('.mask',this).fadeOut()">
			
			<img src='img/nanlan.jpeg'  />
			
			<div class='mask'>
				<button> 重新上传</button><button> 删除 </button>
			</div>
		</div>
	</body>
</html>

整理了一天，大三前的最后一篇博客，希望以后还可以每天坚持学习java，写博客，爱好者，来......

森-Js
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Educoder jQuery DOM操作
Junds0的博客
06-11 2764
第1关：jQuery获取内容和属性 点击【获取文本内容】按钮，直接弹出类名为box的元素的文本内容；点击【获取内容】按钮，直接弹出类名为box的元素的内容；点击【获取表单 value 值】按钮，获取类名为getVal的元素的value值和type属性值，用"—"拼接，并赋值给变量getValue，弹出变量getValue的值 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
jq 点击按钮显示div,点击页面其他任何地方隐藏div
06-06 97
css 　　　　　　　.bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ ...
【Jquery】点击列表实现对应的内容展示
qq_51630625的博客
04-10 1391
点击列表实现对应的内容展示 需求： 点击tab栏中的某个P标签，在下列展示相对应的电器 解决方法： 正确的方法！！！ // 导航栏切换并显示效果 $('.index-nav p').on('click',function () { // 对点中的按钮添加类，其兄弟删除类 $(this).addClass('nav-active').siblings('p').removeClass('nav-active') // 定义所有的block-ico va
jq 元素标签刚开始显示一部分 点击展开全部 显示完全
a369885的博客
09-30 569
最开始给p标签一个固定高度，设置超出隐藏。在jq中判断p元素的css是不是隐藏，隐藏的时候点击让其显示，高度自适应（恢复到原来应有的高度），否则则隐藏，恢复到固定高度 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name=...
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
Jquery基础
12-13
Jquery基础及个人心得，选择器，常用方法、监听事件，event事件：阻止默认事件
jq点击切换隐藏显示
qq_35606790的博客
06-17 5808
先引入jquery.js 点击自动切换显示或隐藏 .hidden { display:none; } .block { display:block; } <button style="display:none;"></button>/默认隐藏* */ <p>123456789</p> 在加入代码： <script ty...
css 圆形扩散特效 水波
笔记库
10-16 2103
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
jQuery点击展开显示文字内容代码
06-10
一款简单实用的jQuery点击展开显示文字内容代码，默认情况下只显示标题，点击展开按钮时，所有内容全显示，展开按钮变为收起按钮，点击收起按钮即收起展开的文字内容。
JQ点击父级显示与隐藏子集元素
zb0109的博客
12-06 635
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0 auto; padding: 0; } ...
Js获取点击元素的id
qq_42899641的博客
12-25 8776
///获取点击标签的值（id） $(document).click(function (e) { var v_id = e.target.id; console.log(v_id); //var v_id2 = $(this).attr("id"); //console.log(v_id2); //co...
jQuery实现输入框提示并点击回显功能呢
最新发布
wfdfg的博客
10-21 345
【代码】jQuery实现输入框提示并点击回显功能呢。
jq 点击置顶；滚动到某位置距离显示/隐藏元素；点击div 滚动到某个div位置
weixin_45521401的博客
07-29 593
jq 点击置顶；滚动某位置距离显示/隐藏元素
jquery鼠标移入文字提示_jQuery实现鼠标移动文字突出显示效果
weixin_42467768的博客
01-17 519
书写并添加js代码。$().ready(function() {$('#first').jMagnify();$('#second').jMagnify({centralEffect: {'color': 'yellow'},lat1Effect: {'color': 'orange'},lat2Effect: {'color': 'red'},lat3Effect: {'color': 'mag...
jQuery实现下拉菜单(点击显示/隐藏)
m0_63823390的博客
10-11 1777
jQuery实现下拉菜单(点击显示/隐藏)
jquery实现在一个框中输入内容，点击添加后，在另外一个框中显示出来，且能删除
java_zhaoyanli的专栏
08-08 2933
html: 台站名称: 添加 删除 报警名称:
jQ效果 - 隐藏和显示
xiaoxing1213的博客
05-17 4617
1.首先写三个按钮标签，给它们命名id名。 2.然后在写你要隐藏的标签。 3.把id为box1写上css样式 4.然后再写JS标签，把JQ插件放进去。 5.给上面按钮获取点击事件第一个是隐藏按钮 id是btn1，然后获取你要隐藏的标签id,(隐藏单词 hide),hide后面的（）是写时间的单位是毫秒。 6.显示的格式跟上面的隐藏是一样的就是显示单词和按钮id不一样。（显示单词 show） 7.还有一个切换写法一样，切换的单词是 toggle，记住 hide，show，.
点击按钮后用jQuery禁止按钮并显示文字[正在处理...]
yangzongzhuan的专栏
10-28 1547
通过val设置按钮的文字，并用attr修改disabled属性。测试代码如下： $("form").submit(function() { $("#buttonid").val("正在处理..."); $("#buttonid").attr("disabled", "disabled"); });
jQuery基础入门与实践指南
"jQuery基础教程是一本面向Web开发人员的实用指南，涵盖了jQuery选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转功能以及插件等内容。书中通过实例操作解决常见客户端问题，强调理论与实践的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值