技术标签: 前端 jquery javascript
目录
bootstrap: 帮我们写好了一个css文件 里面定义好了很多的css样式
.table{width:100%;}
我们在使用的时候 只需要在html中写标签 添加响应的class即可
<table class="table">
学习有哪些class 会有什么效果
jquery : 我们使用原生的js,需要实现很多的页面动态效果,所有的效果都需要我们自己手动写逻辑
jquery就是使用js代码帮我们写好了很多的动态特效,我们需要使用的时候只需要调用其写好的函数即可
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>
原生js的代码
<script>
var div=document.querySelectorAll(".www");
var div1 =document.querySelectorAll("#www");
var div2 = document.querySelectorAll("div");
</script>
jQuery的代码
<script>
$(".www");
$("#www");
$("www");
</script>
原生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 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 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 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 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 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 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>
<!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
数据存储的一种格式
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>
<!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>
文章浏览阅读331次。第一部分:准备工作1 安装虚拟机2 安装centos73 安装JDK以上三步是准备工作,至此已经完成一台已安装JDK的主机第二部分:准备3台虚拟机以下所有工作最好都在root权限下操作1 克隆上面已经有一台虚拟机了,现在对master进行克隆,克隆出另外2台子机;1.1 进行克隆21.2 下一步1.3 下一步1.4 下一步1.5 根据子机需要,命名和安装路径1.6 ..._创建一个hadoop项目
文章浏览阅读1.7k次。心脏滴血漏洞HeartBleed CVE-2014-0160 是由heartbeat功能引入的,本文从深入码层面的分析该漏洞产生的原因_heartbleed代码分析
文章浏览阅读1.4k次。前言ofd是国家文档标准,其对标的文档格式是pdf。ofd文档是容器格式文件,ofd其实就是压缩包。将ofd文件后缀改为.zip,解压后可看到文件包含的内容。ofd文件分析工具下载:点我下载。ofd文件解压后,可以看到如下内容: 对于xml文件,可以用文本工具查看。但是对于印章文件(Seal.esl)、签名文件(SignedValue.dat)就无法查看其内容了。本人开发一款ofd内容查看器,..._signedvalue.dat
文章浏览阅读1.8w次,点赞29次,收藏313次。整体系统设计本设计主要是对ADC和DAC的使用,主要实现功能流程为:首先通过串口向FPGA发送控制信号,控制DAC芯片tlv5618进行DA装换,转换的数据存在ROM中,转换开始时读取ROM中数据进行读取转换。其次用按键控制adc128s052进行模数转换100次,模数转换数据存储到FIFO中,再从FIFO中读取数据通过串口输出显示在pc上。其整体系统框图如下:图1:FPGA数据采集系统框图从图中可以看出,该系统主要包括9个模块:串口接收模块、按键消抖模块、按键控制模块、ROM模块、D.._基于fpga的信息采集
文章浏览阅读2.5w次。1.背景错误信息:-- [http-nio-9904-exec-5] o.s.c.n.z.filters.post.SendErrorFilter : Error during filteringcom.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud..._com.netflix.zuul.exception.zuulexception
文章浏览阅读358次。1.介绍图的相关概念 图是由顶点的有穷非空集和一个描述顶点之间关系-边(或者弧)的集合组成。通常,图中的数据元素被称为顶点,顶点间的关系用边表示,图通常用字母G表示,图的顶点通常用字母V表示,所以图可以定义为: G=(V,E)其中,V(G)是图中顶点的有穷非空集合,E(G)是V(G)中顶点的边的有穷集合1.1 无向图:图中任意两个顶点构成的边是没有方向的1.2 有向图:图中..._给定一个邻接矩阵未必能够造出一个图
文章浏览阅读321次。(十二)、WDS服务器安装通过前面的测试我们会发现,每次安装的时候需要加域光盘映像,这是一个比较麻烦的事情,试想一个上万个的公司,你天天带着一个光盘与光驱去给别人装系统,这将是一个多么痛苦的事情啊,有什么方法可以解决这个问题了?答案是肯定的,下面我们就来简单说一下。WDS服务器,它是Windows自带的一个免费的基于系统本身角色的一个功能,它主要提供一种简单、安全的通过网络快速、远程将Window..._doc server2012上通过wds+mdt无人值守部署win11系统.doc
文章浏览阅读219次。python–xlrd/xlwt/xlutilsxlrd只能读取,不能改,支持 xlsx和xls 格式xlwt只能改,不能读xlwt只能保存为.xls格式xlutils能将xlrd.Book转为xlwt.Workbook,从而得以在现有xls的基础上修改数据,并创建一个新的xls,实现修改xlrd打开文件import xlrdexcel=xlrd.open_workbook('E:/test.xlsx') 返回值为xlrd.book.Book对象,不能修改获取sheett_xlutils模块可以读xlsx吗
文章浏览阅读8.2w次,点赞267次,收藏656次。运行Selenium出现'WebDriver' object has no attribute 'find_element_by_id'或AttributeError: 'WebDriver' object has no attribute 'find_element_by_xpath'等定位元素代码错误,是因为selenium更新到了新的版本,以前的一些语法经过改动。..............._unresolved attribute reference 'find_element_by_id' for class 'webdriver
文章浏览阅读198次。一:模态窗口//父页面JSwindow.showModalDialog(ifrmehref, window, 'dialogWidth:550px;dialogHeight:150px;help:no;resizable:no;status:no');//子页面获取父页面DOM对象//window.showModalDialog的DOM对象var v=parentWin..._jquery获取父window下的dom对象
文章浏览阅读1.7w次,点赞15次,收藏129次。算法(algorithm)是解决一系列问题的清晰指令,也就是,能对一定规范的输入,在有限的时间内获得所要求的输出。 简单来说,算法就是解决一个问题的具体方法和步骤。算法是程序的灵 魂。二、算法的特征1.可行性 算法中执行的任何计算步骤都可以分解为基本可执行的操作步,即每个计算步都可以在有限时间里完成(也称之为有效性) 算法的每一步都要有确切的意义,不能有二义性。例如“增加x的值”,并没有说增加多少,计算机就无法执行明确的运算。 _算法
文章浏览阅读1.5k次,点赞18次,收藏26次。网络安全的标准和规范是网络安全领域的重要组成部分。它们为网络安全提供了技术依据,规定了网络安全的技术要求和操作方式,帮助我们构建安全的网络环境。下面,我们将详细介绍一些主要的网络安全标准和规范,以及它们在实际操作中的应用。_网络安全标准规范