前端 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

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

智能推荐

Eclipse中配置WebMagic(已配置好Maven)_使用eclipse搭建webmagic工程-程序员宅基地

文章浏览阅读364次。1.WebMagicWebMagic是一个简单灵活的Java爬虫框架。基于WebMagic，你可以快速开发出一个高效、易维护的爬虫。2.在Eclipse中配置WebMagic1.首先需要下载WebMagic的压缩包官网地址为：WebMagic官网最新版本为：WebMagic-0.7.3，找到对应版本，打开下载界面，注意，下载要选择Source code(zip)版本，随便下载到哪里都可以；2.下载好的压缩包需要解压，此时解压到的位置即为后续新建的Eclipse的project位置，比如我的Ecli_使用eclipse搭建webmagic工程

linux启动mysql_linux如何启动mysql服务_linux启动mysql服务命令是什么－系统城-程序员宅基地

文章浏览阅读1.9k次。mysql数据库是一种开放源代码的关系型数据库管理系统，有很多朋友都在使用。一些在linux系统上安装了mysql数据库的朋友，却不知道该如何对mysql数据库进行配置。那么linux该如何启动mysql服务呢？接下来小编就给大家带来linux启动mysql服务的命令教程。具体步骤如下：1、首先，我们需要修改mysql的配置文件，一般文件存放在/etc下面，文件名为my.cnf。2、对于mysql..._linux中 mysql 启动服务命令

php实现在线oj,详解OJ(Online Judge)中PHP代码的提交方法及要点-程序员宅基地

文章浏览阅读537次。详解OJ(Online Judge)中PHP代码的提交方法及要点Introduction of How to submit PHP code to Online Judge SystemsIntroduction of How to commit submission in PHP to Online Judge Systems在目前常用的在线oj中，codeforces、spoj、uva、zoj..._while(fscanf(stdin, "%d %d", $a, $b) == 2)

java快捷键调字体_设置MyEclipse编码、补全快捷键、字体大小-程序员宅基地

文章浏览阅读534次。一、设置MyEclipse编码(1)修改工作空间的编码方式：Window-->Preferences-->General-->Workspace-->Text file encoding(2)修改一类文件的编码方式：Window-->Preferences-->General-->content Types-->修改default Encoding(..._java修改快捷缩写内容

解析蓝牙原理_蓝牙原理图详解-程序员宅基地

文章浏览阅读1.4w次，点赞19次，收藏76次。1.前言市面上关于Android的技术书籍很多，几乎每本书也都会涉及到蓝牙开发，但均是上层应用级别的，而且篇幅也普遍短小。对于手机行业的开发者，要进行蓝牙模块的维护，就必须从Android系统底层，至少框架层开始，了解蓝牙的结构和代码实现原理。这方面的文档、网上的各个论坛的相关资料却少之又少。分析原因，大概因为虽然蓝牙协议是完整的，但是并没有具体的实现。蓝牙芯片公司只负责提供最底层的API_蓝牙原理图详解

从未在一起更让人遗憾_“从未在一起和最终没有在一起哪个更遗憾”-程序员宅基地

文章浏览阅读7.7k次。图/源于网络文/曲尚菇凉1.今天早上出门去逛街，在那家冰雪融城店里等待冰淇淋的时候，听到旁边两个女生在讨论很久之前的一期《奇葩说》。那期节目主持人给的辩论题是“从未在一起和最终没有在一起哪个更遗憾”，旁边其中一个女生说，她记得当时印象最深的是有个女孩子说了这样一句话。她说:“如果我喜欢一个人呢，我就从第一眼到最后一眼，把这个人爱够，把我的感觉用光，我只希望那些年让我成长的人是他，之后的那些年他喝过..._从未在一起更遗憾

随便推点

Spring Cloud Alibaba 介绍_sprngcloud alba-程序员宅基地

文章浏览阅读175次。Spring Cloud Alibaba 介绍Sping体系Spring 以 Bean（对象）为中心，提供 IOC、AOP 等功能。Spring Boot 以 Application（应用）为中心，提供自动配置、监控等功能。Spring Cloud 以 Service（服务）为中心，提供服务的注册与发现、服务的调用与负载均衡等功能。Sping Cloud介绍官方介绍 Tools for building common patterns in distributed systems_sprngcloud alba

测试数据类型的一些测试点和经验_基础字段的测试点-程序员宅基地

文章浏览阅读3.2k次，点赞4次，收藏21次。我这里是根据之前在测试数据类项目过程中的一些总结经验和掉过个坑，记录一下，可以给其他人做个参考，没什么高深的东西，但是如果不注意这些细节点，后期也许会陷入无尽的扯皮当中。1 需求实现的准确度根据产品需求文档描述发现不明确不详细的或者存在歧义的地方一定要确认，例如数据表中的一些字段，与开发和产品确认一遍，如有第三方相关的，要和第三方确认，数据类项目需要的是细心，哪怕数据库中的一个字段如果没有提前对清楚，后期再重新补充，会投入更大的精力。2 数据的合理性根据业务场景/常识推理，提..._基础字段的测试点

一文看懂：行业分析怎么做？_码工小熊-程序员宅基地

文章浏览阅读491次。大家好，我是爱学习的小xiong熊妹。在工作和面试中，很多小伙伴会遇到“对XX行业进行分析”的要求。一听“行业分析”四个字，好多人会觉得特别高大上，不知道该怎么做。今天给大家一个懒人攻略，小伙伴们可以快速上手哦。一、什么是行业？在做数据分析的时候，“行业”两个字，一般指的是：围绕一个商品，从生产到销售相关的全部企业。以化妆品为例，站在消费者角度，就是简简单单的从商店里买了一支唇膏回去。可站在行业角度，从生产到销售，有相当多的企业在参与工作（如下图）在行业中，每个企业常常扮._码工小熊

LLaMA 简介：一个基础的、650 亿参数的大型语言模型_llma-程序员宅基地

文章浏览阅读1.6w次，点赞2次，收藏2次。还需要做更多的研究来解决大型语言模型中的偏见、有毒评论和幻觉的风险。我们在数万亿个令牌上训练我们的模型，并表明可以仅使用公开可用的数据集来训练最先进的模型，而无需诉诸专有和不可访问的数据集。在大型语言模型空间中训练像 LLaMA 这样的小型基础模型是可取的，因为它需要更少的计算能力和资源来测试新方法、验证他人的工作和探索新的用例。作为 Meta 对开放科学承诺的一部分，今天我们公开发布 LLaMA（大型语言模型元 AI），这是一种最先进的基础大型语言模型，旨在帮助研究人员推进他们在 AI 子领域的工作。_llma

强化学习在制造业领域的应用：智能制造的未来-程序员宅基地

文章浏览阅读223次，点赞3次，收藏5次。1.背景介绍制造业是国家经济发展的重要引擎，其产能和质量对于国家经济的稳定和发展具有重要意义。随着工业技术的不断发展，制造业的生产方式也不断发生变化。传统的制造业通常依赖于人工操作和手工艺，这种方式的缺点是低效率、低产量和不稳定的质量。随着信息化、智能化和网络化等新技术的出现，制造业开始向智能制造迈出了第一步。智能制造的核心是通过大数据、人工智能、计算机视觉等技术，实现制造过程的智能化、自动化...

ansible--安装与使用_pip安装ansible-程序员宅基地

文章浏览阅读938次。系列文章目录文章目录系列文章目录前言一、ansible是什么？二、使用步骤 1.引入库 2.读入数据总结前言菜鸟一只，刚开始使用，仅作以后参考使用。边学习，边记录，介绍一下最基础的使用，可能会有理解不到位的地方，可以共同交流，废话不多说，走起。一、ansible 简介？ansible是自动化运维工具的一种，基于Python开发，可以实现批量系统配置，批量程序部署，批量运行命令，ansible是基于模块工作的，它本身没有批量部署的能力，真正.._pip安装ansible