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 ...
随机推荐
- Java EE 学习（6）：IDEA + maven + spring 搭建 web（2）- 配置 Spring
参考:https://my.oschina.net/gaussik/blog/513353 注:此文承接上一文:Java EE 学习(5):IDEA + maven + spring 搭建 web(1 ...
- 简单实现UIlabel可复制功能
作者 Sunshine_tt 关注 在我们日常的开发中经常会遇到一些小需求,比如需要长按控件来拷贝控件中得内容.我们知道在iOS中有三个控件自身是支持拷贝,粘贴的,如:UITextField,UITe ...
- pat 团体天梯赛 L2-007. 家庭房产
L2-007. 家庭房产 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产 ...
- Magenta源代码笔记(3) —— 内存管理【转】
转自:http://blog.csdn.net/boymax2/article/details/52550197 版权声明:本文为博主原创文章,未经博主允许不得转载. Magenta内核支持虚拟地址的 ...
- Linux 6.x 下Oracle 11g R2 安装配置
Oracle 11g R2 数据库安装硬件配置要求: 最小内存 1 GB of RAM 虚拟内存容量,这个oracle也有要求,不用担心此时的swap分区不够oracle的要求 .虚拟内存swap如何 ...
- springBoot 快捷键
设置idea导入包 勾选标注 2 选项,IntelliJ IDEA 将在我们书写代码的时候自动帮我们优化导入的包,比如自动去掉一些没有用到的包. 勾选标注 1 选项,IntelliJ IDEA 将在我 ...
- CSU 1777: 大还是小？【模拟/后导0】
293419 roniking 1777 Accepted 2032 0 C++ 2000 2018-04-03 19:21:25 Description 输入两个实数,判断第一个数大,第二个数大还是 ...
- python安装在windows server2008，故障排除
python安装在windows server2008,故障排除 我也在虚拟机上的win2008安装python2.7.9多次回滚了.搜了一通 Windows Server 2003/2008无法 ...
- usaco-Money Systems
题意: 给出几种硬币,求可用这几种硬币组合出价值为n的方案数.分析: 设dp[i]表示组合出价值i的方案数,则,dp[i]=∑dp[i-val[j]]. #include <iostream&g ...
- OnTouchListener
1.布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...