前端 jQuery框架

已于 2022-08-01 09:17:00 修改
阅读量4.1k 收藏 25
点赞数
分类专栏： 前端 文章标签： 前端 jquery javascript
于 2022-07-29 20:26:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wk3510/article/details/126062629
版权

目录

一、框架原理

二、jQuery官方文档

三、jQuery的核心

四、jQuery的CSS

五、jQuery的选择器

六、jQuery的筛选

七、jQuery的事件实现

八、jQuery的属性

九、jQuery的效果

十、jQuery的文档处理

 使用jQuery编写购物车

 十一、JS对象的存储

省市联动

 Ajax

一、框架原理

bootstrap: 帮我们写好了一个css文件 里面定义好了很多的css样式
          .table{width:100%;}
          我们在使用的时候 只需要在html中写标签 添加响应的class即可
           <table class="table">
           学习有哪些class 会有什么效果

jquery   : 我们使用原生的js，需要实现很多的页面动态效果，所有的效果都需要我们自己手动写逻辑
           jquery就是使用js代码帮我们写好了很多的动态特效，我们需要使用的时候只需要调用其写好的函数即可

二、jQuery官方文档

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式

jQuery API中文文档https://jquery.cuishifeng.cn/ jQuery CDN加速https://www.jq22.com/cdn/

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
    <body> 
		 <script>
 
		 </script>
	</body>
</html>

三、jQuery的核心

        原生js的代码

        <script>
			var div=document.querySelectorAll(".www");
			var div1 =document.querySelectorAll("#www");
			var div2 = document.querySelectorAll("div");
		</script>

        jQuery的代码

        <script>
			$(".www");
			$("#www");
			$("www");
		</script>

四、jQuery的CSS

        原生js的css写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div class="tt">hello word</div>
		
		<script>
			var a= document.querySelector(".tt");
			a.style.color="red";
			a.style.backgroundColor="blue";
			a.style.width="300px";
			a.style.fontSize="50px";
			a.style.height="200px"
		</script>
	</body>
</html>

        jQuery的css写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<div class="tt">hello word</div>
		
		<script>
			$(".tt").width(500).height(300).css({"color":"yellow","background-color":"purple","font-size":"30px"});
		</script>
	</body>
</html>

五、jQuery的选择器

这只是其中的一个使用方法  具体实现方法看jQuery API 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<ul>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
		</ul>
		
		<script>
			$("li:first").width(300).height(200).css({"color":"yellow","background-color":"red"});
		</script>
	</body>
</html>

六、jQuery的筛选

这只是其中的一个使用方法  具体实现方法看jQuery API 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<ul>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
		</ul>
		
		<script>
			$("li").last().width(300).height(200).css({"color":"yellow","background-color":"red"});
		</script>
	</body>
</html>

七、jQuery的事件实现

这只是其中的一个使用方法  具体实现方法看jQuery API 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<ul>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
		</ul>
		
		
		<script>
			$("li").click(function(){
				alert(123);
			})
		</script>
	</body>
</html>

八、jQuery的属性

这只是其中的一个使用方法  具体实现方法看jQuery API 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			.tt{
				color: red;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
		</ul>
		
		
		<script>
			$("li").click(function(){
				$(this).addClass("tt").siblings().removeClass("tt");
			})
		</script>
	</body>
</html>

九、jQuery的效果

这只是其中的一个使用方法  具体实现方法看jQuery API 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			.tt{
				color: red;
				background-color: yellow;
			}
			li{
				color: red;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li class="pp">快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
			<li>快速学习jQuery</li>
		</ul>
		
		
		<script>
			$("li").click(function(){
				$(this).children().stop().slideToggle();
				$(this).animate({ 
					width: "50px",
					height: "50px", 
					fontSize: "1em", 
					borderWidth: 10
				  }, 1000 );
			})
		</script>
	</body>
</html>

十、jQuery的文档处理

这只是其中的一个使用方法  具体实现方法看jQuery API 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style>
			select{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<select multiple id="left">
			<option>JAVA</option>
			<option>HTML</option>
			<option>CSS</option>
			<option>VUE</option>
			<option>HAHA</option>
			<option>HEHE</option>
		</select>
		<select multiple id="right"></select>
		<div>
			<button>去右边</button>
			<button>全去右边</button>
			<button>去左边</button>
			<button>全去左边</button>
		</div>
		<script>
			$("button").eq(0).click(function(){
				$("#left option:selected").appendTo("#right");
			});
			$("button").eq(1).click(function(){
				$("#left option").appendTo("#right");
			});
			$("button").eq(2).click(function(){
				$("#right option:selected").appendTo("#left");
			})
			$("button").eq(3).click(function(){
				$("#right option").appendTo("#left");
			})
		</script>
	</body>
</html>

 使用jQuery编写购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
    <body>
		
		<div class="row">
			<div class="col-md-2">
				<div class="form-group">
				    <label for="exampleInputEmail1">商品名称</label>
				    <input type="email" class="form-control" id="i1" placeholder="Email">
				</div>
				<div class="form-group">
				    <label for="exampleInputEmail1">商品价格</label>
				    <input type="email" class="form-control" id="i2" placeholder="Email">
				  </div>
				  <div class="form-group">
				      <label for="exampleInputEmail1">商品数量</label>
				      <input type="email" class="form-control" id="i3" placeholder="Email">
				  </div>
				  <button class="btn btn-success" id="add">添加</button>
				  <button class="btn btn-danger" id="del">删除</button>
				  <button class="btn btn-primary" id="fanxuan">反选</button>
			</div>
			<div class="col-md-10">
				<table class="table table-bordered table-hover table-striped ">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll"></th>
							<th>商品名称</th>
							<th>商品价格</th>
							<th>商品数量</th>
							<th>商品操作</th>
							<th>总计</th>
						</tr> 
					</thead>
					<tbody id="tb"></tbody>
				</table>
			</div>
		</div>
		<script type="text/template" id="temp">
			<tr>
				<td><input type="checkbox" class ="gs"/></td>
				<td>xxx</td>
				<td>yyy</td>
				<td>zzz</td>
				<td><button class="btn btn-danger"  onclick="dele(this)">删除</button></td>
			</tr>
		</script>
		<script>
			//删除所有
			$("#del").click(function(){
				$(".gs:checked").parents("tr").remove();
			})
			//反选
			$("#fanxuan").click(function(){
				$(".gs").each(function(){
					var t = $(this).prop("checked");
					$(this).prop("checked",!t)
				})
			})
			//全选
			$("#checkAll").change(function(){
				$(".gs").prop("checked",checkAll.checked);
			})
			//添加
			$("#add").click(function(){
				$("#tb").append(temp.innerHTML.replace("xxx",i1.value).replace("yyy",i2.value).replace("zzz",i3.value));
			})
		</script>
	</body>
</html>

jQuery教程https://www.runoob.com/jquery/jquery-tutorial.html

 十一、JS对象的存储

数据存储的一种格式
    
        A  变量：就是编程中最小的存储单元 能存储单一数据
           var a = 20;
           但是变量只能存储一个数据不能表现数据之间的联系：
           var a = 180; var b = 190; var c = 50; var d = 60;

        B  数组：一个数组能存储一组数据
           var arr1 = [180,190];  var arr2 = [50,60];
           但是数组对数据的操作是使用索引值/下标，我们只知道数组中数据的编号 arr1[0] 所以没有语义化

        C  对象：能存储一组数据（能存储多个）并且有语义化 【字符串  正则 日期 FileReader

 简单的存取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//object array
			var obj1 = new Object();
			var obj2 = {};
			//对象储存的格式是 key:value 键值对
			var obj3 = {"name":"张三","age":18,"address":"北京"};
			
			
			obj3["height"]=180;
			var a = obj3["name"];
			obj3.hobby = "太极";
			var b= obj3.name;
			var c = "haha";
			obj3[c] = "咏春";
			obj3["c"] = "八极";
			console.log(obj3);
			
			for( x in obj3){
				console.log(x);
				console.log(obj3[x]);
			}
		</script>
	</body>
</html>

复杂的存取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj = {
				"name":"张三",
				"age" : 18 ,
				"address":"南京",
				"hobby"  : ["唱","跳","篮球"],
				"friends": [
					{"name":"李四","age":18},
					{"name":"王五","age":18}
				]
			};
			console.log(obj.hobby[2]);
			console.log(obj.friends[0]);
		</script>
	</body>
</html>

省市联动 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<select id="p"></select>省
		<select id="c"></select>市
		
		<script>
			var data={
				"河南":["郑州","开封","洛阳"],
				"山东":["淄博","青岛","烟台"],
				"内蒙古":["呼和浩特","阿拉善","鄂尔多斯"],
				"新疆":["南疆","北疆"]
			}
			for(  w in data){
				$("<option>"+w+"</option>").appendTo("#p");
			}
			$("#p").change(function(){
				var test = $(this).val();
				var arr = data[test];
				$("#c").html("");
				for(i=0;i<arr.length;i++){
					$("<option>"+arr[i]+"</option>").appendTo("#c");
				}
			})
			$("#p").change();
		</script>
	</body>
</html>

 Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		
		<div id="haha">
			
		</div>
	
	    <script type="text/template" id="temp">
			<div class="col-sm-6 col-md-2" style="height:500px">
			    <div class="thumbnail">
			      <img src="XXX" alt="...">
			      <div class="caption">
			        <h3>YYY</h3>
			        <p>ZZZ</p>
			        <p><a href="AAA" class="btn btn-primary" role="button">查看详情</a> <a href="#" class="btn btn-default" role="button">BBB</a></p>
			      </div>
			    </div>
			</div>
            </script>
	    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			
			$.get( "haha.json"  , function(backData){  
				var arr = backData.data.result;
				for(var i = 0;i<arr.length;i++){
					var g = arr[i];
					var content =  temp.innerHTML.replace("BBB", g.month_sale ).replace("XXX", g.pict_url ).replace("YYY", g.title ).replace("ZZZ", g.real_wap_price ).replace("AAA", g.click_url );
					$("#haha").append( content );
				}
			});
			
			
		</script>
	</body>
</html>
一条要上岸的鱼
关注
  • 0
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
框架JQuery
m0_58495313的博客
01-05 1362
JQuery框架知识点，通过JQuery可以非常方便的操作html的元素
jQuery框架的使用
笑三年-Dylen
05-25 440
jQuery 1. 概念 : 一个JavaScript框架,简化js开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 * JavaScript框架 :
前端基础之jQuery
qq_53350943的博客
04-07 3455
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
推荐几个精致的web UI框架及常用前端UI框架
最新发布
2401_84153102的博客
05-09 985
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jQuery框架
qq_57167753的博客
04-05 2268
let stuArr = [{'sid':1,'sname':'闫凯','ssex':'1','score':0},{},{}];在jQuery中将HTML中事件都封装成了一系统的事件方法。三、如何在HTML页面中使用jQuery框架。还需要在HTML页面中导入相应的js文件。jQuery是一个封装了JS脚本的框架。在jQuery中封装了一系列的方法。.min.js 这是压缩的版本。也就是说是已经写好的JS代码。核心方法： jquery();四、jQuery的核心方法。五、jQuery中事件方法。
JavaScript--jQuery框架
zhqi9277的博客
04-28 1308
概述：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；
JavaScript框架_JQuery
D大调奏鸣曲_第七序章_de博客
04-07 1303
目录 一、概述 1.1 概念 1.2 快速入门 1.3JQuery对象和JS对象区别与转换 二、选择器 2.1 基本操作学习 2.2 分类 1. 基本选择器 2. 层级选择器 3. 属性选择器 4. 过滤选择器 5. 表单过滤选择器 三、DOM操作 3.1. 内容操作 3.2. 属性操作 3.3. CRUD操作 四、JQuery高级知识 4.1. 动画 4.2. 遍历 4.3. 事件绑定 4.4. 案例 4.5. 插件 一、概述 1.1 概念 一个J.
前端Jquery框架
09-20
**jQuery框架概述** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年发布以来，jQuery已经成为了前端开发的标准工具之一，因其简洁的语法和丰富的功能而...
甘特图前端jquery框架
06-05
在"甘特图前端jquery框架"中，主要涉及以下几个关键知识点： 1. **jQuery基础**：首先，你需要熟悉jQuery的基本用法，包括选择器（如ID选择器、类选择器等）、DOM操作（如`$(selector).html()`、`$(selector)....
前端开发框架对比
02-26
近几年随着jQuery、Ext以及CSS3的发展，以Bootstrap为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些...
jQuery前端UI框架表单样式代码
06-24
在本资源"jQuery前端UI框架表单样式代码"中，我们聚焦于jQuery如何与前端UI设计相结合，特别是针对表单元素的样式定制和交互效果。 表单是网页中不可或缺的部分，用于收集用户输入数据。传统的HTML表单样式往往单调...
JQuery知识框架
11-05
**jQuery知识框架** ...通过这个知识框架，你可以逐步掌握jQuery的核心概念和实践技巧，从而在前端开发中更加游刃有余。使用Xmind或其他思维导图工具打开提供的文件，将这些知识点可视化，能更好地理解和记忆。
jQuery前端框架 - 一小时了解与使用
m0_52336378的博客
06-22 1013
jQuery简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库在我们开始学习之前，有几个问题希望大家明白1.什么是jQuery？jQuery是JS写的插件库，说白了，就是一个JS文件。jQuery 极大地简化了JS编程。所以jQuery 相对JS来说，学习起来会很容易。
✿✿✿JavaScript --- jQuery框架一
naoguoteng的博客
12-31 1014
1.jQuery的介绍和在线学习网址以及下载网址5.jQuery如何达到获取原生的DOM对象6.jQuery选择器(1)常见选择器(2)高级选择器以及方法(4)过滤选择器7.常用到的方法(1)html()和 text()方法(2)attr()和 removeAttr()(3)元素样式操作方法和其他方法8(1)创建节点(2)插入节点(3)包裹节点(4)其他节点操作9.jQuery基础事件相关(1) 基础事件(3)解绑事件(4)简写事件(5)复合事件(6)事件对象event(7)事件之冒泡和默认行为以及行为
jQuery 选择器语法
weixin_33836874的博客
07-09 142
转自 http://www.pyzy.net/log_content.asp?LogId=223 jQuery选择器分为如下几类（点击“名称”会跳转到此方法的jQuery官方说明文档）： 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 el...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值