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 ...
随机推荐
- git常用命令符
全局配置 $ git config --global user.name "姓名" 告诉git你是谁 $ git config --global user.email " ...
- Docker 开源项目之 registry - 部署 registry （注册表）服务器
原文地址 在部署 registry 之前需要现在主机上安装 Docker.registry 实际上就是运行在 Docker 中的 registry 镜像的实例. 本主题提供关于部署和配置 regist ...
- pat 甲级 Public Bike Management
Public Bike Management (30) 题目描述 There is a public bike service in Hangzhou City which provides grea ...
- requireJs杂项
如果设置了baseUrl,那么baseUrl目录下的模块可以被加载,那么被加载之后的模块Id是什么?文件名吗? 入口函数的写法?是不是要执行,后面加() 中文网中指的优化工具是什么? ...
- android基本控件学习-----TextView
一.TextView的讲解 <实例一> <?xml version="1.0" encoding="utf-8"?> <Linea ...
- 八、 Java程序初始化的顺序（一）
今天在写构造器方法的时候,遇到了一个小问题,由这个问题引发了一连串的思考,在一个Java类中变量与类的初始化执行顺序是什么样的呢?## 发现问题 class Student{ private Stri ...
- C#图解教程学习笔记——类和继承
一.屏蔽基类的成员所有类都派生自object类.虽然类只能直接继承一个基类,但继承的层次没有限制.虽然派生类不能删除它继承的任何成员,但可以用与基类同名的成员来屏蔽(mask)基类成员.1. 要屏蔽一 ...
- Python Challenge 第十一关
第十一关,一张模糊的图,题目为 odd even,源代码中也没任何提示,看来又是图像处理. 这张模糊的图看起来没什么头绪,但是题目给了个奇数和偶数,就先试试坐标吧,根据原图来生成一个新图.我第一次尝试 ...
- js坑 把数字型的字符串默认为数字 把前面的0给去掉了（"001"）
<script> b("); function b(id) { console.log("b函数的id:"+id); //var history = &quo ...
- .NET Core微服务 权限系统+工作流（一）权限系统
一.前言 实际上权限系统老早之前我就在一直开发,大概在刚毕业没多久就想一个人写一个系统,断断续续一直坚持到现在,毕竟自己亲动手自写的系统才有收获,本篇仅介绍权限. 小小系统上不了台面,望各位大神勿喷. ...