前端 jQuery框架_jq框架-程序员宅基地

技术标签：前端 jquery javascript

一、框架原理

二、jQuery官方文档

三、jQuery的核心

一、框架原理

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>

本文链接：https://blog.csdn.net/wk3510/article/details/126062629

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码

OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版

关于美国计算机奥赛USACO，你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型（1）_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型

HTML+CSS大作业环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、保护地球、校园环保、垃圾分类、绿色家园、等网站的设计与制作。总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和代码中相对目录还有一些复制到目录的普通文件等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现，SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文