jQuery--基础(实例)
jQuery的操作方法并不需要都记下来，但是使用什么功能需要什么样的方法，我们是一定会知道的。所以写实例来进行对功能方法的练习和熟练，是最快能够掌握jQuery的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.bei{
background-color: #9d9d9d;
position: fixed;
top:0;
left:0;
bottom: 0;
right: 0;
opacity: 0.5;
}
.shu{
margin-top: 20px;
margin-left :20px;
}
.hide{
display: none;
}
.tian{
width: 50px;
}
.nuo{
margin-left:10px ;
margin-top: 10px;
}
.t5{
width: 400px;
height: 500px;
}
.t6{
width: 300px;
height: 500px;
}
</style>
</head>
<body> <div class="row">
<div class="col-md-6">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Insert
</button> <!-- Modal -->
<div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog j" role="document">
<div class="modal-content j">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form action="">
<div class="form-group">
<label for="d1">姓名</label>
<input type="text" class="hui form-control" id="d1">
</div>
<div class="form-group">
<label for="d2">密码</label>
<input type="text" class="hui form-control" id="d2">
</div>
<div class="modal-footer">
<input type="reset" class="an btn btn-default" data-dismiss="modal" value="Close">
<input type="reset" class="anq btn btn-primary" value="确定添加" data-dismiss="modal" >
</div>
</form>
</div> </div>
</div>
</div>
<table class="table table-bordered table-hover" >
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody id="t1">
<tr>
<td class="wb">1</td>
<td class="wb">张三</td>
<td class="wb">1222</td>
<td>
<button class="del btn btn-danger">删除</button>
<button class="w btn btn-success " data-toggle="modal" data-target="#myModal">编辑</button>
</td>
</tr> <tr>
<td class="wb">2</td>
<td class="wb">张二</td>
<td class="wb">233</td>
<td>
<button class="del btn btn-danger">删除</button>
<button class="w btn btn-success" data-toggle="modal" data-target="#myModal">编辑</button>
</td>
</tr> <tr>
<td class="wb">3</td>
<td class="wb">赵四</td>
<td class="wb">455</td>
<td>
<button class="del btn btn-danger">删除</button>
<button class="w btn btn-success" data-toggle="modal" data-target="#myModal">编辑</button>
</td>
</tr> </tbody> </table>
</div>
</div>
<div class="tu">
<img src="http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/13/0.jpg" class="t5" id="d4">
<img src='http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/jianzong/0.jpg' class="t5" id="d3">
<img src='http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/nanxizhai/0.jpg' class="t5" id="d5">
</div> <script>
$t1=$("#t1");
$t1.on("click",".del",function () {
($(this).parent().parent()).remove();
var i=1;
$("#t1 tr").each(function () {
$(this).children(".wb:first").text(i);
console.log($(this).children(".wb:first"));
i=i+1
})
});
$t1.on("click",".w",function () {
$(".j").removeClass("hide");
$form=$("form");
$form.data("name",$(this).parent().parent().find(":eq(1)"));
$form.data("pwd",$(this).parent().parent().find(":eq(2)"));
$(".hui:first").val($form.data("name").text());
$(".hui:last").val($form.data("pwd").text())
});
$tan=$(".modal-footer");
function tianjia() {
var ele_tr = document.createElement("tr");
var ele_th = document.createElement("td");
$(ele_th).text($("tr").length).addClass("wb");
ele_tr.appendChild(ele_th);
$(".form-group").each(function () {
zhi = $(this).find("input").val();
var ele_td = document.createElement("td");
$(ele_td).addClass('wb').text(zhi);
ele_tr.appendChild(ele_td)
});
var ele_de = document.createElement("td");
var ele_bu = document.createElement("button");
$(ele_bu).addClass("del btn btn-danger").text('删除');
var bub = document.createElement("button");
$(bub).addClass("w btn btn-success").text('编辑');
$(ele_de).append(ele_bu, " ", bub);
ele_tr.appendChild(ele_de);
$("#t1").append(ele_tr);
$(".hui").each(function () {
$(this).val(''); });
} $tan.on("click",".anq",function () {
$form2=$("form");
if($form2.data("name")==undefined){
tianjia()
}
else {
$form2.data("name").text($(".hui:first").val());
$form2.data("pwd").text($(".hui:last").val());
$form2.removeData("name");
$form2.removeData("pwd");
$(".hui").each(function () {
$(this).val('');
}); } });
$tan.on("click",".an",function () {
$form3=$("form");
$form3.removeData("name");
$form3.removeData("pwd");
$(".hui").each(function () {
$(this).val('');
});
});
$(".hui").each(function () {
this.onkeydown = function (event) {
console.log(event.keyCode);
if (event.keyCode == 13) { $(".anq").click()
}
else if (event.keyCode == 27) { $(".an").click()
}
}
}); var a=0;
setInterval(function () {
a=a+1;
$("#d4").attr("src",'http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/13/'+a.toString()+'.jpg');
if (a==25){
a=0
}
},50);
var b=0;
setInterval(function () {
b=b+1;
$("#d3").attr("src",'http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/jianzong/'+b.toString()+'.jpg');
if (b==26){
b=0
}
},50);
var c=0;
setInterval(function () {
c=c+1;
$("#d5").attr("src",'http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/nanxizhai/'+c.toString()+'.jpg');
if (c==30){
c=0
}
},50); </script> </body>
</html>
增删查改jquery实例
这个实例使用了bootstrap的部分方法，所以一定要导入。
使用了更新图片链接的方法来进行动态图片的显示。
编写思路很简单，先为按钮添加事件，然后将bootstrap的模态框放进去，用模态框中input取的值来进行添加
删除的话，用的方法就是找到按钮的父标签的父标签，从这一个tbody中删除这一条记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.name{
margin-top: 50px;
margin-left: 50px;
}
.uang{
margin-top: 50px;
margin-left: 50px;
}
.c{
color: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="name">用户名<input type="text" class="te"><b class="c hide" id="1">用户名过长</b><b class="c hide" id="3">用户名过短</b><b class="c hide" id="5">请输入用户名</b></div>
<div class="name">密码<input type="password" class="te"><b class="c hide" id="2">密码过长</b><b class="c hide" id="4">密码过短</b><b class="c hide" id="6">请输入密码</b></div>
<button class="uang btn btn-info">login</button>
<script>
(function (jq) {
function login(arg) {
arg.on("click",function () {
jq(".te").each(function () {
if(jq(this).val().length>7){
jq(this).next().removeClass("hide");
console.log(jq(this).next());
return false
}
else if (jq(this).val().length<2&&jq(this).val().length>0){
jq(this).next().next().removeClass("hide");
return false
}
else if (jq(this).val().length==0){
jq(this).next().next().next().removeClass("hide");
return false
}
})
});
jq(".te").on("focus",function () {
jq(this).nextAll().addClass("hide");
});
}
jq(document).ready(function () {
jq(".uang").check()
});
jq.fn.extend({
check:function () {
login(this)
}
})
})(jQuery); </script>
</body>
</html>
登陆校验
判断的就是输入的长度，如果不符合要求的话，两种方法，一种是提交按钮绑定事件，然后判断，循环input的value，如果有不符合输入要求的
用return false来结束循环，这样达到只显示头一个不合格的信息的input框的目的。
第二种方法就是用blur（失焦），这样的话当鼠标挪出input框就开始进行判断输入是否合格，大部分网站用的就是这种。
jQuery--基础(实例)的更多相关文章
- html--前端jquery基础实例
一.左边的菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等
JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JQuery基础教程：入门
JQuery能做什么 JQuery在线手册 1.取得文档中的元素 如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中 ...
- jQuery基础之二
jQuery基础之二 jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...
- jQuery基础之一
jQuery基础之一 初识jQuery jQuery封装JavaScript中多个好用的函数成为并形成代码库,操作时也更符合我们的习惯,并且减少了浏览器之间的兼容性. jQuery官网 引入 本地 ...
- 《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- TypeScript进阶开发——ThreeJs基础实例，从入坑到入门
前言 我们前面使用的是自己编写的ts,以及自己手动引入的jquery,由于第三方库采用的是直接引入js,没有d.ts声明文件,开发起来很累,所以一般情况下我们使用npm引入第三方的库,本文记录使用np ...
随机推荐
- 深入比较选择 Angular 还是 React
我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结.无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划 ...
- XWW的难题（bzoj 3698）
Description XWW是个影响力很大的人,他有很多的追随者.这些追随者都想要加入XWW教成为XWW的教徒.但是这并不容易,需要通过XWW的考核.XWW给你出了这么一个难题:XWW给你一个N*N ...
- 用email实现邮件模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- GC+JVM
1.内存管理模型 ①以对象的方式管理内存,每个对象占据内存中连续的一段,分配在堆中.对象引用可以指向堆中的其他对象.非基本数据类型的对象等价于数据引用. ②基于栈和堆的内存管理都是动态分配,即在运行时 ...
- 网络编程socket-SocketServer-FTP
16章 网络编程?应该是讲网络之间如何编程来进行通信的章节 16.1.1 客户端/服务器架构?客户端请求访问,服务器端监听请求,处理请求,进行相应的模式16.1.2 客户端/服务器编程?服务器端:创建 ...
- vscode Go 1.11.4 编译错误 need Delve built by Go 1.11 or later
更新golang的版本为1.11.4之后vscode编译错误:executables built by Go 1.11 or later need Delve built by Go 1.11 or ...
- C#使用SSDB管理增量日志并提供查询
Program.cs using System; using System.Text; using CommonLinkLibrary.Util; using Newtonsoft.Json; nam ...
- SQL SERVER 查询一个表有多少列
) from syscolumns where id = object_id('tbname') 或者 select * from syscolumns where id = object_id('t ...
- 如何证明一个数的数根(digital root)就是它对9的余数？
数根就是不断地求这个数的各位数之和,直到求到个位数为止.所以数根一定和该数模9同余,但是数根又是大于零小于10的,所以数根模9的余数就是它本身,也就是说该数模9之后余数就是数根. 证明: 假设有一个n ...
- 洛谷——P2205 [USACO13JAN]画栅栏Painting the Fence
题目描述 Farmer John has devised a brilliant method to paint the long fence next to his barn (think of t ...