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 ...
随机推荐
- Linux下常用的命令记录
本文章记录我在linux系统下常用或有用的系统级命令,包括软硬件查看.修改命令,有CPU.内存.硬盘.网络.系统管理等命令.但本文不打算介绍生僻命令,也不介绍各个linux发行版下的特有命令,且以后会 ...
- 【HDOJ5976】Detachment（贪心）
题意:给定n,要求构造若干个各不相同且和为n的正整数使得它们的乘积最大 T<=1e6,1<=n<=1e9 思路:From https://blog.csdn.net/qq_34374 ...
- 【UVA10561】Treblecross（SG函数）
题意:有n个格子排成一行,其中一些格子里面有字符X.两个游戏者轮流操作,每次可以选一个空格,在里面放上字符X. 如果此时有3个连续的X出现,则该游戏者赢得比赛.初始条件下不会有3个X连续出现. 判断先 ...
- 【转】SqlCacheDependency的使用 强大的功能
原文发布时间为:2009-10-25 -- 来源于本人的百度文章 [由搬家工具导入] 最近我在忙于研究负载平衡、并发性容错性等性能优化问题，ASP.NET有太多强大的功能等待学习和挖掘。今天， ...
- 解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL不允许从远程访问的方法
1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...
- 远程连接linux和linux的网络配置
linux一般是作为服务器的,并不直接对其进行操作,并且由于地理位置的原因,我们需要对linux服务器进行远程连接. 首先我们要确定linux服务器是否安装了ssh服务,在linux服务器上安装ope ...
- abstract抽象类和interface接口
一.抽象类 1.抽象类不能实例化,因为有抽象方法未实现 2.可以被抽象类或非抽象类继承 3.但不是只能被继承,还可以直接拿来使用的,当然,这个使用是拿来声明,反例如下: public abstract ...
- 【原创】设置EXCEL2010打开多个独立窗口
最近发现一个奇怪的问题,发现office中的word和ppt在我使用笔记本分屏幕(双屏)的时候都可以将2份文档分别在2个窗口打开,但是在使用excel的时候却发现不行,最后研究发现原因 ...
- ARCGIS 二次开发可以参考的资源（长期更新）
背景: 今天,被领导教导,说是你刚入职,要尽快把项目做起.言语忠恳,而且说不要再在电脑上练习那些小的测试例子了,要直接切入项目,熟悉项目的开发框架,与设计理念.得到,我的负责人(TB)把他做的项目的资 ...
- node.js中的exports和module.exports
不同的编程语言都有各自的代码组织和复用的方式,如.net.php中的命名空间,python中的import,ruby中的module等,来避免命名空间污染.一直都没搞清楚node中的exports和m ...