[38]jquery入门

最新推荐文章于 2024-08-09 02:16:38 发布
最新推荐文章于 2024-08-09 02:16:38 发布
阅读量485 收藏
点赞数
分类专栏： 前端Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xc_zhou/article/details/80637749
版权

运用jQuery时，需要在页面中引入jQuery文件

  • jQuery的hello world
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>helloworld</title>
	<!-- 1. 在页面中引入jQuery支持 -->
	<script src="js/jquery-1.12.4.js"></script>
	<style>
		#box{width: 200px;height: 200px;background: red;}
	</style>
</head>
<body>
	<button id="btn">点击我试试</button>
	<div id="box"></div>

	<script>
		// jQuery代码，写在一对script标签中
		// 可以使用最简洁的代码，完成JS中复杂的功能！
		// $是jQuery的一个函数，表示 : jQuery() == $()
		// $("")是jQuery选择器，参考了CSS选择器 #btn->id选择器
		// $("#btn").click(fn)表示添加一个单击事件处理函数
		$("#btn").click(function() {
			// toggle()/slideToggle() jQuery内置动画效果
			$("#box").slideToggle();
		})
	</script>
</body>
</html>
  • jquery 选择器
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		/*
		HTML中的代码是同步执行的：按照从上到下的顺序解释执行的

		为了保证页面中的标签加载完成之后执行JQuery代码
		使用$(function() {  ...代码：就是页面标签加载完成执行的代码.. })
		*/
		$(function() {
			// 这里写的代码，就是当页面中的标签全部加载完成执行的代码；类似于window.onload
			// 标签选择器:$("标签名称")
			$("#btn_tag_selector").click(function() {
				// 标签选择器：选择所有的div标签，添加边框
				$("div").css({
					"border":"solid 1px orange"
				})
			});

			$("#btn_id_selector").click(function() {
				// ID选择器：语法$("#id值")
				$("#box").css({
					"border":"solid 1px red"
				})
			});

			$("#btn_class_selector").click(function() {
				// class选择器：语法：$(".class名称")
				$(".item").css({
					"border":"solid 1px blue",
					"background":"#ccc"
				})
			});

			$("#btn_child_selector").click(function() {
				// 层级选择器，可以类似css语法一样，使用样式嵌套
				// 子元素选择器
				$("#container > li").css({
					"border":"solid 2px pink",
					"background":"#dfdfdf"
				})
			});

			$("#btn_contain_selector").click(function() {
				// 层级选择器：包含选择器
				$("#container li").css({
					"border":"solid 2px pink",
					"background":"#006699",
					"color":"#fff"
				})
			});

			$("#test").click(function() {
				$("#container a").css({
					"color":"red",
					"text-decoration":"none"
				})
			});

			$("#btn_odd_selector").click(function() {
				$("li:odd").css({
					"background":"orange"
				})
			})

		})
	</script>
</head>
<body>
	<button id="btn_tag_selector">标签选择器</button>
	<button id="btn_id_selector">id选择器</button>
	<button id="btn_class_selector">class选择器</button>
	<button id="btn_child_selector">层级选择器：子元素选择器</button>
	<button id="btn_contain_selector">层级选择器：包含选择器</button>
	<button id="test">测试获取标签中包含的一个深层标签超链接</button>
	<button id="btn_odd_selector">:odd</button>

	<hr>
	<div>这是一个单纯的div标签，没有id和class属性</div>
	<div id="box">这是一个div标签，id属性值为box</div>
	<div class="item">这是一个div标签1，class属性值为item</div>
	<div class="item">这是一个div标签2，class属性值为item</div>
	<ul id="container">
		<li>这是一个ul中的li标签</li>
		<li>这是一个ul中的li标签</li>
		<li>这是一个ul中的li标签</li>
		<li>这是一个ul中的li标签</li>
		<ul>
			<li>这是ul中的ul里面的li标签</li>
			<li>这是ul中的ul里面的li标签</li>
			<li>这是ul中的ul里面的li标签<span>这是span标签</span></li>
			<li>这是ul中的ul里面的li标签<a href="#">超链接</a></li>
		</ul>
	</ul>
</body>
</html>
  • 动画效果
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		#box{width: 200px;height: 200px;background: orange;position:absolute;top:50px;left:0px;}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {

			$("#btn_show").click(function() {
				$("#box").show(1000);
			})

			$("#btn_hide").click(function() {
				$("#box").hide(1000);
			})

			$("#btn_toggle").click(function() {
				$("#box").toggle(1000);
			})

			$("#btn_slideDown").click(function() {
				$("#box").slideDown(1000);
			})

			$("#btn_slideUp").click(function() {
				$("#box").slideUp(1000);
			})

			$("#btn_slideToggle").click(function() {
				$("#box").slideToggle(1000);
			})

			$("#btn_fadeIn").click(function() {
				$("#box").fadeIn(1000);
			})

			$("#btn_fadeOut").click(function() {
				$("#box").fadeOut(1000);
			})

			$("#btn_fadeToggle").click(function() {
				$("#box").fadeToggle(1000);
			})

			$("#btn_fadeTo").click(function() {
				$("#box").fadeTo(1000, 0.5);
			});

			$("#btn_animate").click(function() {
				$("#box").animate({left:"500px",top:"100px",width:"100px", height:"50px"},1000)
					.animate({top:"400px",left:"300px"}, 500)
					.animate({top:"200px", left:"100px"}, 1000)
					.animate({width:"200px",height:"100px"}, 400)
					.animate({width:"50px",height:"10px"}, 200)
					.animate({width:"300px",height:"200px"}, 500);
			})
		})
	</script>
</head>
<body>
	<button id="btn_show">显示</button>
	<button id="btn_hide">隐藏</button>
	<button id="btn_toggle">显示/隐藏 状态切换</button>

	<button id="btn_slideDown">卷帘显示</button>
	<button id="btn_slideUp">卷帘隐藏</button>
	<button id="btn_slideToggle">卷帘显示/隐藏 状态切换</button>

	<button id="btn_fadeIn">透明度显示</button>
	<button id="btn_fadeOut">透明度隐藏</button>
	<button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
	<button id="btn_fadeTo">切换到指定的透明度</button>


	<button id="btn_animate">自定义动画</button>
	<div id="box"></div>
</body>
</html>
  • 轮播图
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	*{margin:0px;padding:0px;}
	#bannel_box{margin:10px auto;padding:5px;border:solid 1px #8f8f8f;border-radius:8px;position:relative;width:800px;height:450px;}
	#bannel_box img{position:absolute;width:800px;vertical-align: bottom;border:none;border-radius:8px;display:none;}
	#bannel_box img:nth-child(1){display:block;}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
		
	<script>
		$(function() {

			var $index = 0;// 当前正在展示的图片的下标

			// 计时函数， 3S更换一次图片
			setInterval(function() {
				var $next = $index + 1;// 下一张要展示的图片的下标
				if($next >= 5) {
					$next = 0;
				}

				$("img").eq($index).fadeOut(1000);//隐藏当前图片
				$("img").eq($next).fadeIn(1000);// 显示下一张图片

				$index ++;
				if($index >= 5) {
					$index = 0;
				}

			}, 3000);
		})
	</script>
</head>
<body>
	<div id="bannel_box">
		![](images/bannel01.jpg)
		![](images/bannel02.jpg)
		![](images/bannel03.jpg)
		![](images/bannel04.jpg)
		![](images/bannel05.jpg)
	</div>
</body>
</html>
  • 导航条菜单下拉框
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		*{margin:0;padding:0;}
		.nav{list-style:none;height:50px;background-color:#069;}
		.nav > li{float:left;height:50px;font-size:20px;color:#fff;width:100px;text-align:center;line-height:50px;}

		.nav > li > ul{list-style:none;width:120px;background:pink;display:none;}
		.nav > li > ul >li{height:50px;line-height:50px;color:#333;font-size:18px;width:120px;}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			// 这里面的代码，是当页面中的标签加载完成后执行的
			$("li").mouseenter(function() {
				// 在事件操作中，可以通过this来标签当前事件触发的元素
				// console.log($(this).children());
				// console.log($(this).children().last());
				$(this).children().last().stop(true).slideDown("slow");
			});

			$("li").mouseleave(function() {
				$(this).children().last().stop(true).slideUp("slow");
			})

		})
	</script>
</head>
<body>
	<ul class="nav">
		<li><span>首页</span>
			<ul>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
				<li>首页二级菜单</li>
			</ul>
		</li>
		<li><span>新闻</span>
			<ul>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
				<li>新闻二级菜单</li>
			</ul>
		</li>
		<li><span>影视</span>
			<ul>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
				<li>影视二级菜单</li>
			</ul>
		</li>
		<li><span>音乐</span>
			<ul>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
				<li>音乐二级菜单</li>
			</ul>
		</li>
		<li><span>体育</span>
			<ul></ul>
		</li>
		<li><span>财经</span>
			<ul></ul>
		</li>
		<li><span>八卦</span>
			<ul></ul>
		</li>
		<li><span>美食</span>
			<ul></ul>
		</li>
	</ul>
</body>
</html>
  • 图片翻转
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	*{margin:0;padding:0;}
	#box{margin:50px auto;width:400px;height: 226px;padding:5px;border:solid 1px #cdcdcd;position:relative;}
	#box img{width: 400px;border-radius:8px;position:absolute;}
	#box img:nth-child(2){height:0;}
	</style>

	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function() {
			// 当页面中所有标签全部加载完成的时候，执行的代码
			$("#box").mouseenter(function() {

				var $that = $(this);
				// 隐藏第一张图片
				$that.children().first().animate({top:"113px", height:"0px"}, 1000, function() {

					// 显示第二章图片
					$that.children().last().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
				});

			});

			$("#box").mouseleave(function() {

				var $that = $(this);
				// 隐藏第二张图片
				$that.children().last().animate({top:"113px", height:"0px"}, 1000, function() {

					// 显示第一章图片
					$that.children().first().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
				});

			});
		})
	</script>
</head>
<body>
	
	<div id="box">
		![](images/bannel01.jpg)
		![](images/bannel02.jpg)
	</div>
</body>
</html>
  • jquery的DOM操作
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DOM操作</title>
	<!--
		使用JQuery改造瀑布流！
	-->
</head>
<body>
	<p>
		JQuery 的DOM操作

		<ul>
			<li>1. DOM操作选择标签</li>
			<li>2. DOM操作处理标签数据</li>
		</ul>
	</p>
	<p>
		JavaScript对象：就是标签本身，也称为DOM对象<br />
			var _box =  document.getElementById("box")
			_box >>>> <div id="box"></div>
		jQuery对象：是DOM对象的数组
			var $box = $("#box")
			$box >>>>  [<div id="box"></div>]
	</p>
	<p>
		JQuery DOM操作选择标签
			通过函数操作，替代了选择器操作来选中标签
			> 选择器：括号中是字符串
			> 函数：括号中可以有变量
		<ul>
			<li>选择器.eq(num)：用于选中指定下标的jQuery对象</li>
			<li>选择器.gt(num)：用于选中下标大于指定下标的所有jQuery对象</li>
			<li>选择器.lt(num)：用于选中下标小于指定下标的所有jQuery对象</li>

			<li>选择所有的子元素: 选择器.children()</li>
			<li>选择所有的指定的子元素: 选择器.children("ul")</li>

			<li>选择第一个子元素：选择器.first()</li>
			<li>选择最后一个子元素：选择器.last()</li>

			<li>判断标签是否包含某个class名称：选择器.hasClass("box")</li>

			<li>二次筛选：选择器.filter(选择器)；从第一个选择器选中的标签中继续选择满足第二个选择器的标签</li>

			<li>二次筛选：选择器.has(子标签选择器)，选择所有包含指定子元素的父标签</li>

			<li>二次筛选：父选择器.find(子选择器)，从父选择器选中的标签中的子元素里面，查询符合子选择器的标签元素</li>

			<li>next:选择下一个同级元素</li>
			<li>prev:选择上一个同级元素</li>
			<li>sibings:选择所有的同级元素</li>
		</ul>
	</p>

	<p>
		
		jQuery DOM操作，操作标签数据
			内容
			属性
			样式
			标签
	</p>
	<p>
		内容
		常规开始标签和结束标签中间的内容操作
		var $boxValue = $("#box").text();
		$("#box").text("添加的内容")

		表单元素的数据
		var $name = $("#username").val();
	</p>
	<p>
		属性操作：

		var $id = $("#box").attr("id")
		$("#box").attr("id", "container")
	</p>
	<p>
		样式操作：
		简洁操作
			$("#box").css("border", "solid 1px red");
		标准操作
			$("#box").css({
				"border":"solid 1px red",
				"background":"#efefef"
			})
		注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式
		如果是动态递增变化的样式，可以通过JS代码进行处理。
	</p>
	<p>
		标签的操作：
			代码中创建一个标签
				var $div = $("<div>");

		常见操作函数：
			append();
			appendTo();
			prepend();
			prependTo();
	</p>

	<div id="box"></div>
	<input type="text" id="username">
</body>
</html>
周小董
关注
专栏目录
jQuery入门
weixin_65768991的博客
03-16 1118
jQuery基本介绍 jQuery是JavaScript库封装了许多JS代码 JavaScript库有90%jQuery，和一部分ExtJS jQuery官网http://jquery.com/ jQuery 讲究的是write less,do more写少做多 jQuery 是为了简化JavaScript开发（选择器，CSS，HTML 事件处理，JS动画，游览期兼容，丰富插件） jQuery多用于中大型网站开发，是一些前端框架的基础 列如EasyUI，Bootstrap 使用jQuery步骤 1.进入j
Jquery入门
iaiti的专栏
11-03 7777
Jquery入门（一）
【jQuery】入门学习篇
最新发布
2201_75503057的博客
08-09 1471
【jQuery】入门学习篇
jQuery简单的快速入门
zhangqiang1116的博客
05-31 1675
内容目录 jQuery 入门 什么是jQuery如何使用jQueryjQuery的运行原理如何选择jQuery版本ready() 准备就绪时执行代码 jQuery 核心：选取元素 使用jQuery 选择器选取元素，并封装为jQuery对象将现有的DOM元素封装为jQuery对象将HTML字符串封装为jQuery对象元素筛选 jQuery 核心：DOM操作的原则 切记混淆
jQ1 jQuery入门
Traveller9922的博客
12-01 318
一.what JS库,JS框架   框架: 半成品.一半已经完成了,一半没有完成. 就像考试中的填空题、选择题.   JS框架:相当于一些现成的函数和对象的集合,直接拿来使用就可以了   常见的JS库还有Prototype、Ext JS、Dojo、MooTools、YUI等      口号:Write less,do more.  写的更少，做得更多 二．How
JQuery入门
云飞扬°的博客
05-17 1023
JQuery入门 什么JQuery: jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文...
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
JQuery入门—编写一个简单的JQuery应用案例
10-27
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
jquery入门（一）
03-26
NULL 博文链接：https://huyizizhen.iteye.com/blog/1134073
jQuery 入门
魔法革1996
07-13 252
1、使用JQ完成首页的定时广告弹出    1.1、需求分析            在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】    1.2、技术分析    （1）jQuery相关知识         什么是jquery        Jquery它是javascript的一个轻量级框架，对javascript...
JQuery 快速入门一篇通
热门推荐
oscar999的专栏
03-06 1万+
JQuery是什么？ JQuery 是一套JavaScript库， 使用它，可以很方便的进行 JavaScript的编程。比如： 获取页面元素， 修改页面元素的CSS样式等等都可以以很简单的语法完成。 节省代码行数和减少开发的时间。 物理上来看就是一份.js的文件。  如何获取和使用？ JQuery  的官方网址是： http://jquery.com/  。 从这里可以获取
jQuery入门简介
weixin_33913377的博客
12-18 83
jquery是最近比较火的一个JavaScript库，从del.icio.us/上相关的收藏可见一斑。 到目前为之jQuery已经发布到1.2.1版本，而在这之前的一个星期他们刚发布1.2版本，看看他的各个版本的 发布时间，不难发现他的飞速发展，每个月都在更新版本；而且不断有人开发出新的 jQuery插件，最近又推出了 jQuery UI库。 jQuery于2006...
jquery快速入门
闻道有先后
06-21 3216
jQuery的作用：1.取得页面中的元素；2.修改页面的外观；3.改变页面的内容；4.响应用户的页面操作；5.为页面添加动态效果；6.无须刷新页面即可从服务器获取数据；7.简化常见的js任务。 $是jquery专用的特殊符号，可以说所有jquery函数的调用都是从$开始的 $()在jquery里面表示一个选择器，括号里面填写一定的表达式就可以选中你想要的元素，jquery的选择器除了能很好地...
JQuery快速入门
qq_45181415的博客
02-21 388
1.1、JQuery介绍 jQuery 是一个 JavaScript 库。 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。 jQuery 官网：https://www.jquery.com 1.2、JQuery快速入门 开发思路 编写 HTML 文档。 引入 jQuery 文件。 使用 jQuery 获取元素。 使用浏览器测试。 代码实现 <
从零开始的jQuery入门指南
"jQuery 入门教程" jQuery 是一个高效、简洁且功能丰富的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。本系列教程针对初学者，旨在帮助他们快速掌握 jQuery 的基础知识并能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周小董

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值