JQuery动画，jquery操作DOM，jquery常用的选择器，bootstrap框架

已于 2022-03-25 15:42:48 修改
阅读量1.7k 收藏 3
点赞数 3
分类专栏： it 文章标签： 前端框架 css jquery html5 javascript
于 2022-03-22 22:40:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45800201/article/details/123673056
版权

目录

一、JQuery动画

1.1 隐藏显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script>
			//因为放在开头，所以要设置预加载
			$(function(){
				$("#in_id1").click(function(){
					$("div").show(1000)
				});
				$("#in_id2").click(function(){
					$("div").hide(1000)
				});
			});
		</script>
	</head>
	<body>
		<div style="width: 100px;height: 100px;background-color: #00FFFF;"></div>
		<input type="button" id="in_id1" value="显示"/>
		<input type="button" id="in_id2" value="消失"/>
	</body>
</html>

1.2 animate伸缩动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
		// 动画效果animate({参数},时间)
			$(function(){
				$(".cl_class1").click(function(){
					$("div").animate({
						left:"250px",
						opacity:"0.5",
						height:"+=150px",
						width:"toggle"
					},3000);
				});
				$(".cl_class2").click(function(){
					$("div").stop();
				});
			});
		</script>
	</head>
	<body>
		<div style="background-color: red; width: 200px; height: 40px;"></div>
		<input type="button" class="cl_class1" value="点击"/>
		<input type="button" class="cl_class2" value="停止"/>
	</body>
</html>

二、jquery操作DOM

2.1 增加标签和获取设置属性值

2.1.1 attr()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style type="text/css">
			img{
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<!-- attr() 设置或返回该元素的属性和值-->
		<img src="img/1.jpg"/><br/>
		<input type="button" id="id_id1" value="更换"/>
		<input type="button" id="id_id2" value="获取图片路径"/>
		<script>
			// 设置该属性值
			$("#id_id1").click(function(){
				$("img").attr("src","img/3.jpg");
			});
			// 返回该属性值
			$("#id_id2").click(function(){
				alert($("img").attr("src"));
			})
		</script>
	</body>
</html>
2.1.2 html()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<!-- html() -->
		<div id="id_id1">
			<p>你好呀！</p>
		</div>
		<div>我很好</div>
		<!-- 设置添加标签内容，会覆原来的 -->
		<input type="button" id="id_id2" value="点击添加p标签"/>
		<script>
			$("#id_id2").click(function(){
				$("#id_id1").html("<p>你好！</p>");
			});
		</script>
		
		<!-- 返回匹配元素中的所有集合 -->
		<input type="button" id="id_id3" value="获取所有标签中的内容"/>
		<script>
		$("#id_id3").click(function(){
			alert($("div").html());
		});
		</script>
	</body>
</html>
2.1.3 val()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<!-- val()设置值或获取属性和值 -->
		<input type="text" id="id1"/>+
		<input type="text" id="id2"/><br/>
		=<input type="text" id="id4"/>
		<input type="button" id="id3" value="点击相加" onclick="add()">
		<script>
			function add(){
			// 获取属性和值
			var v1 = $("#id1").val();
			var v2 = $("#id2").val();
			// 设置值
			$("#id4").val(Number(v1)+Number(v2));
		}
		</script>
	</body>
</html>
2.1.4 text()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<!-- text() -->
		<div id="id_id1">
			<p>你好呀！</p>
		</div>
		<!-- 设置添加标签内容，会覆原来的 -->
		<!-- 与html的区别就是，text只是用于填充文本，不会识别标签，而html会 -->
		<input type="button" id="id_id2" value="点击添加p标签"/>
		<script>
			$("#id_id2").click(function(){
				$("#id_id1").text("<p>你好！</p>");
			});
		</script>
	</body>
</html>
2.1.5 prop()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<!-- prop()与attr() 一样-->
		<input type="button" onclick="add()" value="全选"><br/>
		篮球<input type="checkbox" value="篮球" class="cl_class1"/><br/>
		足球<input type="checkbox" value="篮球" class="cl_class1"/><br/>
		乒乓球<input type="checkbox" value="篮球" class="cl_class1"/>
		<script>
			function add(){
			var arrays = $(".cl_class1");
			for (var i = 0; i < arrays.length; i++) {
				// 因为arrays[i]获取的是dom对象，所以要把它转为$才能使用prop()方法
				$(arrays[i]).prop("checked",true);
			};
	     }
		</script>
	</body>
</html>

2.2 指定方向增加文本内容

2.2.1 append尾部添加元素(其它）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<div>
			<p id="id_id1">你好呀！</p>
		</div>
		<!-- 在尾部添加标签内容 append()-->
		<input type="button" id="id_id2" value="点击添加p标签"/>
		<script>
			$("#id_id2").click(function(){
				$("#id_id1").append("你好，你是？");
			});
			// 你好呀！你好，你是？
		</script>
		<!-- prepend()开头插入元素 -->
		<!-- after()下方插入元素 -->
		<!-- before()上方插入内容 -->
	</body>
</html>

2.3 删除标签和内容

2.3.1 remove()删除本身和子元素（empty()）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.cl_class1{
				width: 300px;
				height: 300px;
				background-color: #BCE8F1;
				padding-left: 30px;
			}
			.cl_class2{
				width: 100px;
				height: 100px;
				border: solid red 2px;
			}
		</style>
	</head>
	<body>
		<!-- remove()删除子节点和自身(包括标签) -->
		<!-- empty()删除子节点（自身标签不删除，内容删除）-->
		<div class="cl_class1">div1
			<div class="cl_class2">你好呀div2</div>
		</div>
		<input type="button" value="点击删除"/>
		<script>
		$("input").click(function(){
			// $(".cl_class1").remove();
			$(".cl_class1").empty();
		})
		</script>
	</body>
</html>

2.4 添加与删除类样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style>
			.getClass{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input type="button" id="tv_but01" value="添加" />
		<input type="button" id="tv_but02" value="删除" />
		<input type="button" id="tv_but03" value="删除与添加" />
		<div></div>
		<script>
			$("#tv_but01").click(function(){
				$("div").addClass("getClass");
			});
			$("#tv_but02").click(function(){
				$("div").removeClass("getClass");
			});
			$("#tv_but03").click(function(){
				$("div").toggleClass("getClass");
			});
		</script>
	</body>
</html>

2.5 css样式设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #9ACFEA;
			}
		</style>
	</head>
	<body>
		<div></div>
		<input type="button" onclick="add()" value="点击变红变大"/>
		<script>
		    //修改css样式
			function add(){
				$("div").css({"background-color":"red","width":"300px"});
			}
		</script>
	</body>
</html>

三、jquery常用的选择器

3.1 过滤选择器

  1. 图在这里插入图片描述
  2. 例子 li:gt(）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<ul>
			<li>篮球</li>
			<li>乒乓球</li>
			<li>足球</li>
			<li>滑板</li>
			<li>跳绳</li>
		</ul>
		<script>
			//筛选数据
			//例子：拿出偶数
			var arrays = $("li:even")
			for (var i = 0; i < arrays.length; i++) {
				//alert(arrays[i].innerHTML);
			}
			//例子：拿出index大于3的元素
			var arrays = $("li:gt(3)");
			for (var i = 0; i < arrays.length; i++) {
				alert(arrays[i].innerHTML); 
			}
		</script>
	</body>
</html>

3.2 层级选择器

  1. 图在这里插入图片描述
  2. 例子：div ~ div
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<div>baba<span>儿子</span></div>
		<div id="id2">baba
			<span>儿子
			<div>孙子</div>
			</span>
		</div>
		<div>baba</div>
		<script>
			var arrays = $("div ~ div");
			for (var i = 0; i < arrays.length; i++) {
				alert(arrays[i].innerHTML); 
			}
		</script>
	</body>
</html>

3.3 属性选择器

  1. 图在这里插入图片描述
  2. 例子
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

	</head>
	<body>
		<img src="img/1.jpg" />
		<img src="img/2.png" />
		<img src="img/3.jpg" />
		<!-- 获取.jpg结尾的图片路径-->
		<!-- 格式：$("[attribute$='value']") -->
		<script>
			var obj = $("[src$='.jpg']");
			for (var i = 0; i < obj.length; i++) {
				alert($(obj[i]).attr("src"));
			};
		</script>
	</body>
</html>

四、bootstrap框架

4.1 简介

  1. 好处 ：
    A. 提供大量的css样式 以及js组成，实现的页面更加简单，效果更好
    B. 支持响应式布局：同一套代码能够适应不同的分辨率设备

4.2 搭建步骤

  1. 引入三个文件
<link rel="stylesheet" href="css/bootstrap.css" />
<!-- 先加载jquery，必须写在js/bootstrap.min.js前面 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
IT阿生
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
bootstrap 学习之路 10 (javascript DOM 编程)
wangboa123的专栏
05-29 1659
1  DOM 简介 1.      DOM 包括三部分 core DOM   XML  DOM    HTML DOM(网页编程使用HTML DOM) 2.      Html DOM 定义了对象的属性和访问API 3.      Javascript操作DOM，实际就是对HTML DOM节点的增删改查 add delete get change   2  HTML  节点 2.1 在
bootstrap 单选按钮点击change事件 只触发一次_jQuery DOM操作、事件、动画
weixin_39983383的博客
11-09 429
第一节 DOM操作<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript" src="jquery-1.12...
bootstrap前端分页的DOM生成
bluelotos893的博客
04-09 264
前端分页需要的几个数据：记录总条数、每页显示多少条，从第几页开始，最多显示多少个页码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
高仿微信本地图片选择器
孤云博客
06-30 1753
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) 在项目中经常需要选择手机系统里面的图片，但是直接启动系统页面，只能选择单张图片，而且UI不受我们自己控制，不灵活，所以这里仿照微信的大致效果，做一个图片选择器 加载图片的时候，使用的开源项目Universal-I...
day43&day44 jQuery操作DOM和Bootstrap介绍
shuoliuchn的博客
11-13 273
今日内容 jquery选择器补充 :checked 找到被选中的input标签 :selected 找被选中的select标签中的option标签 :disabled 不可操作的标签 :enabled 可操作的标签 示例: html代码: 用户名:<input type="text" id="username" disabled> 密码: <input ty...
HTML+CSS+JS+Bootstrap+XML
CORN的博客
06-05 1005
前端 一、Web概念 1、JavaWeb：概念：使用Java语言开发基于互联网的项目 2、软件构架 ​ 1.C/S：Client/Server 客户端/服务器端 ​ 优点：用户体验好 ​ 缺点：开发、安装，部署，维护 麻烦 ​ 2. B/S: Browser/Server 浏览器/服务器端 ​ 优点：开发、安装，部署，维护 简单 ​ 缺点： ​ 1. 如...
bootstrap常用操作
duansamve的博客
04-29 230
一、关闭modal： // 关闭模态 $("#add-soft-distribute-modal").on("hide.bs.modal", function(){ $("#add-soft-distribute-modal-form")[0].reset(); $("#add-soft-distribute-modal-tab a:first").tab("show"); ...
HTML下_之JS的DOM和BootStrap
anchorite
08-15 2538
1. DOM对象简介 概述: Document Object Model, 文档对象模型. //dom对象就是把整个页面加载到内存中形成的: 树状结构(DOM树) //DOM树中, 会将文档中的(元素标签,属性, 文本)都封装成对象, //通过操作对象, 来实现改变或者修饰HTML页面的效果. 树形结构的特点: 1)...
jQuery入门、选择器、事件、静态方法、动画
qq_51066068的博客
04-20 2103
目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuery事件 3.1.事件的基本使用 3.2.事件代理 3.3.事件类型 4.jQueryDOM操作 5.jQuery静态方法 5.1.数组及对象操作 5.2.测试操作 5.3.字符串操作 6.jQuery动画 第一章-jQuery基础知识 第一天的授课重点在于梳理与对比..
JQUERY 函数的使用 DOM选择器 动画
Fengwu9166的博客
11-02 137
JQUERY语法函数的使用DOM用法选择器动画内置动画自定义动画动画的配置 函数的使用 $() 执行使用 $().abc() 连缀使用：局部方法 $.abc() 全局使用 window.onload = function(){ console.log("页面和资源加载完成"); document.onload = fu...
bootstrap时间选择器
qq_26495107的博客
11-16 859
一个成熟的框架，日期控制是少不了的，在网上也有很多日期控制可以选择，而主框架用了bootstrap，日期控制也当前要用它自己的，控件地址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htmGitHub上开源地址：https://github.com/smalot/bootstrap-datetimepicker在使用datetime
JS和JQuery教程
zhansan的博客
06-15 187
JQuery入门，选择器，DOM 操作，事件和动画
JQuery随笔（3） DOM操作和动画效果
weixin_44184990的博客
08-08 264
JQuery的DOM操作和动画效果 相比的原生的js的繁杂的DOM操作，JQuery的DOM操作更加简便，代码也更加简洁。JQuery本身就是对原生JS的封装，封装的目的往往就是让代码更加简洁，更加易懂。 JQuery里面有封装了一些对于元素淡入淡出的操作，可以从一定程度上丰富我们的网页~ DOM操作 JQuery的DOM操作常用的主要用来给某个元素添加子节点或者删除子节点，可以用在JS中获取后端传递的数据，动态的生成界面，很方便。常用的文档（document）操作如下： 在一个节点内部插入子节点：
基于Springboot的个人博客系统
weixin_46085253的博客
08-03 461
基于Java（Springboot）可以用做毕业设计的个人博客系统，包括网站前台和后台管理系统两部分。网站前台包括首页、归档页面、相册页面、留言页面、关于我页面。支持用户注册与登录，注册时使用邮箱发送验证码。后台管理系统包括写博客、管理博客。对分类、标签、相册、用户的增删改查。还有对访客的记录。项目简介网站链接 前台： http://111.229.128.4/后台： http://111.229.128.4/admin用户名/密码：admin/admin前端框架：Layui。
CSS平移实现双开门效果
瞉韩
08-03 683
一张作为父级背景，两张为兄弟左右布局。之后添加鼠标悬停效果，两张子图分别从左右平移。一共要三张图片，一张作为父级背景，两张为兄弟左右布局。/* right表示精灵图从右面取 */
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 2084
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 671
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 308
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 246
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

IT阿生

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

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

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

打赏作者

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

抵扣说明：

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

余额充值