【python】-- web开发之jQuery
jQuery
jQuery 是一个 JavaScript 函数库，jQuery库包含以下特性(HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities)。
jQuery目前包含三个版本：jQuery的1.x、jQuery的2.x、jQuery的3.x（jquery-2.0以上版本不再支持IE 6/7/8），每个版本中都会有两个类型提供选择uncompressed（未压缩版,用于测试和开发）, minified（压缩版，用于实际的网站中），jQurey下载引用地址：点击
jQuery的两种使用方式：
- 下载jQuery文件放到与页面相同的目录中使用
<script src="jquery-1.12.4.js"></script>
- 通过 CDN（内容分发网络） 引用jQuery
#百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> #微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script> #官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery与Dom对象之间的转换：
// $(Dom对象) =>jQuery对象
var a = document.getElementById("MySignature")
<div id="MySignature"></div>
$(a)
//输出：n.fn.init [div#MySignature, context: div#MySignature]0: div#MySignaturecontext: div#MySignaturelength: 1__proto__: Object(0) //jquery对象[0] => Dom对象
$(a)[0]
//输出：<div id="MySignature"></div>
一、查找元素
1、jQuery常用选择器，直接找到某个或者某类标签：
1.1、id、class、标签、组合、层级查找元素
$('#id') //根据id查找元素
$(".c1") //根据class查找元素
$('a') //查找出所有标签为a的元素
$('a,.c2,#i10') //查找出所有标签为a、class=c2、id=i10的元素，并将匹配到的元素合并到一个结果内
$('#i10 a') //查找出id=i10标签下的所有的后代元素
$('#i10>a') //查找出id=i10标签下的子元素
$('#i10+a') //查找出id=i10标签的下一个兄弟元素
$('#i10~a') //查找出id=i10标签的下一个siblings元素
1.2、基本筛选器、属性查找元素
常用的基本筛选器
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li:first'); //匹配第一个li元素
$('li:last'); //匹配的最后一个li元素
$('li:eq(2)'); //匹配下标索引为2的li元素（从0开始）
$('li:gt(2)'); //匹配下标索引大于2的li元素（从0开始）
$('li:even'); //匹配下标索引为偶数li元素
$('li:odd'); //匹配下标索引为奇数li元素 属性
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
$('[name]') //匹配具有name属性的所有标签
$('[name="milkman"]') //匹配name属性等于milkman的标签
$("input[name='milkman']") //匹配input标签下name属性等于milkman的标签
$("input[name!='milkman']") //匹配input标签下name属性不等于milkman的标签
$("input[name^='milk']") //匹配input标签下name属性以milk开头的标签
$("input[name$='man']") //匹配input标签下name属性以man结尾的标签
$("input[name*='man']") //匹配input标签下name属性包含man的标签
基本筛选器、属性
1.3、表单、表单对象属性
表单
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":input") //匹配表单中所有 input, textarea, select 和 button 元素
$(":text") //匹配表单中所有单行文本框
$(":checkbox") //匹配表单中所有的复选框
$(":radio") //匹配表单中所有的单项按钮
$(":image") //匹配表单中所有的图像域
$(":file") //匹配表单中所有的文件域
$(":submit") //匹配表单中所有提交按钮
$(":reset") //匹配表单中所有重置按钮
$(":password") //匹配表单中所有密码框
$(":button") //匹配表单中所有按钮 [ <input type="button" />,<button></button> ] 表单的对象属性
<form>
<input name="email" disabled="disabled" />
<input name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</form> $("input:enabled") //匹配所有可用元素
$("input:disabled") //匹配所有不可用元素
$("input:checked") //匹配所有选中的被选中元素复选框、单选框等，select中的option（对于select元素来说，获取选中推荐使用 :selected）
$("select option:selected") //匹配所有选中的option元素
表单、表单对象属性
2、jQuery筛选（作为jQuery选择器的补充）：
查找
$('#i1').next() //匹配id=i1标签下面的第一个同级标签
$('#i1').nextAll() //匹配id=i1标签下面的所有同级标签
$('#i1').nextUntil('#ii1') //匹配id=i1标签下面的所有同级标签，直到id=ii1的标签为止 $('#i1').prev() //匹配id=i1标签上面的第一个同级标签
$('#i1').prevAll() //匹配id=i1标签上面的所有同级标签
$('#i1').prevUntil('#ii1') //匹配id=i1标签上面的所有同级标签，直到id=ii1的标签为止 $('#i1').parent() //匹配id=i1标签的父标签
$('#i1').parents() //匹配id=i1标签的所有祖先标签
$('#i1').parentsUntil('#ii1') //匹配id=i1标签的所有祖先标签，直到id=ii1的标签为止 $('#i1').children() //匹配id=i1标签的所有子标签，children(".i2")通过可选的表达式来过滤所匹配的子元素（parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素）
$('#i1').siblings() //匹配id=i1标签的所有同辈标签，.siblings(".i2") 可用的表达式进行筛选。
$('#i1').find(".i2") //搜索id=i1标签下的后代标签中class=i2的标签 过滤
$('li').eq(1) //匹配li标签中下标索引为1的li标签（当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，与选择器$('li:eq(1)')类似）
$('li').first() //匹配第一个li标签
$('li').last() //匹配最后一个li标签
$(this).hasClass("protected") //判断当前标签中的class属性中是否有protected值，有则true,反之false
$("p").filter(".selected, :first") //筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
jQuery筛选
二、操作元素
1、文本操作：
$("p").text(); // 获取P标签文本内容
$("p").text("Hello world!"); //重新赋值设置P标签文本内容
$("p").html() //返回p元素的内容。
$("p").html("hello <b>world</b>!"); //重新赋值设置P元素的内容
//区别：text是文本形式，html是html形式
$("input").val(); //获取文本框中的值
$("input").val("hello world!"); //设定文本框的值
2、样式操作：
$("p").addClass("selected1 selected2"); //为每个匹配的元素添加指定的类名（多个类名用空格分开）
$("p").removeClass("selected selected2"); //从所有匹配的元素中删除全部（不指定类名默认删全部）或者指定的类（多个类名用空格分开）
$("p").toggleClass("selected"); //如果存在（不存在）就删除（添加）一个类。
3、属性操作：
# 专门用于做自定义属性
$(..).attr('n') //返回标签中的n的属性值
$(..).attr('n','v') //重新复制设置标签中n的属性值
$(..).removeAttr('n') //将标签中的为n的属性删除 # 专门用于chekbox,radio
$(..).prop('checked') //选中复选框为true，没选中为false
$(..).prop('checked', true) //将复选框设置为选中状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();"/> <table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb"> <tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table> <script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function cancleAll() {
$('#tb :checkbox').prop('checked',false);
}
function reverseAll() {
$(':checkbox').each(function(k){
// this,代指当前循环的每一个元素
// Dom
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/
// 三元运算var v = 条件? 真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
Demo-全选/反选/取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div> </div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
Demo-菜单详情框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >内容一</div>
<div class="hide" >内容二</div>
<div class="hide">内容三</div> </div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); });
</script>
</body>
</html>
Demo-菜单详情索引版
4、文档操作：
$("p").append("<b>Hello</b>"); //向每个匹配的元素内部追加（结尾处）内容。
$("p").appendTo("div"); //把匹配的元素追加到另一个指定的元素元素集合中的尾部。
$("p").prepend("<b>Hello</b>"); //向所有匹配元素内部（开始处）插入内容
$("p").prependTo("#foo"); //把匹配的元素插入到另一个指定的元素元素集合中的开始处。
$("p").after("<b>Hello</b>"); //在每个匹配的元素之后插入内容。
$("p").insertAfter("#foo"); //颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
$("p").before("<b>Hello</b>"); //在每个匹配的元素之前插入内容。
$("p").insertBefore("#foo"); //颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面
$("p").remove(".hello"); //删除所有匹配的元素。
$("p").empty(); //把所有的子元素（包括文本节点）删除
$("b").clone().prependTo("p"); //克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a> <table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td> </tr>
</table> <div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div> <div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="confirmModal();" />
</div>
</div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script>
<script> $('.del').click(function () {
$(this).parent().parent().remove();
}); function confirmModal() { var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001"; $(tr).append(td1);
$(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide');
// $('.modal input[type="text"]').each(function () {
// // var temp = "<td>..."
//
//
//
// })
} function addElement() {
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
} $('.edit').click(function(){
$(".modal,.shadow").removeClass('hide');
// this
var tds = $(this).parent().prevAll();
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
$(temp).val(text);
}); // var port = $(tds[0]).text();
// var host = $(tds[1]).text();
//
// $('.modal input[name="hostname"]').val(host);
// $('.modal input[name="port"]').val(port);
// 循环获取tds中内容
// 获取 <td>内容</td> 获取中间的内容
// 赋值给input标签中的value });
</script>
</body>
</html>
Demo-编辑框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<input id="a2" type="button" value="删除" />
<input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li>
<li>2</li> </ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val(); var temp = "<li>" + v + "</li>";
// $('#u1').append(temp);
$('#u1').prepend(temp);
// $('#u1').after(temp)
// $('#u1').before(temp)
}); $('#a2').click(function () {
var index = $('#t1').val();
$('#u1 li').eq(index).remove();
//$('#u1 li').eq(index).empty();
});
$('#a3').click(function () {
var index = $('#t1').val();
var v = $('#u1 li').eq(index).clone();
$('#u1').append(v); //$('#u1 li').eq(index).remove();
//$('#u1 li').eq(index).empty();
})
</script>
</body>
</html>
Demo-添加/复制/删除
5、css操作：
$(..).css('样式名称', '样式值')
$("p").css({ "color": "#ff0011", "background": "blue" });
$("p").css("color","red");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
}); function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1; var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40); }
</script> </body>
</html>
Demo-点赞
6、位置操作：
$("div.demo").scrollTop(); //获取滚动条距离顶部的值
$("div.demo").scrollTop(100)； //设置滚动条距离顶部的值
$("div.demo").scrollLeft(); //获取滚动条距离左部的值
$("div.demo").scrollLeft(300); //设置滚动条距离左部的值
//window表示当前浏览器的滚动条
$(window).scrollLeft(100)
$(window).scrollTop(100)
<p>Hello</p><p>2nd Paragraph</p>
offset().left //指定标签在html中的坐标
offset().top //指定标签在html中的坐标
$("p:last").offset({ top: 10, left: 30 });
position() //指定标签相对父标签(relative)标签的坐标
<p>Hello</p><p>2nd Paragraph</p>
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
$('i1').height() //获取标签的高度 纯高度
$('i1').innerHeight() //获取第一个匹配元素内部区域高度（包括补白、不包括边框）
$('i1').outerHeight() //获取第一个匹配元素外部高度（默认包括补白和边框）
$('i1').outerHeight(true) //设置为 true 时，计算边距在内。
$('i1').width() //取得第一个匹配元素当前计算的宽度值（px）
$('i1').innerWidth() //获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
$('i1').outerWidth() //获取第一个匹配元素外部宽度（默认包括补白和边框）
$('i1').outerWidth(true) //设置为 true 时，计算边距在内。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 300px;"></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
Demo-拖动选中框
7、效果：
效果演示：点击
三、事件
1、jQuery事件的几种绑定触发方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" /> <ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
//事件的几种绑定方式
// 1，第一种$(".c1").click(function(){})
// $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// }) // 2,第二种$('.c1').bind('click',function(){})，对应的取消绑定方式$('.c1').unbind('click',function(){})
// $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// }) //对未来元素（由脚本创建的元素）绑定事件，jquery3.0以下版本使用delegate("选择器","事件名称",function(){事件处理函数})jquery3.0+版本使用.on("事件名称","选择器",function(){}) // 3，第三种方式$('.c1').on('click', function(){})， 对应的取消绑定方式$('.c1').off('click', function(){})
// $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// }) // 4,第四种绑定方式$('.c').delegate('a', 'click', function(){})，对应的取消绑定方式$('.c').undelegate('a', 'click', function(){})
// $('ul').delegate('li','click',function () {
// var v = $(this).text();
// alert(v);
// }) </script>
</body>
</html>
2、阻止事件发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="http://www.baidu.com">go_1</a> <a id="i1" href="http://www.baidu.com">go_2</a>
<script src="jquery-1.12.4.js"></script>
<script>
//dom方式实现阻止事件发生，需要在在标签中增加return，函数中也需要return false
function ClickOn(){
alert(123);
return false;
} //jquery方式实现实现阻止事件发生，只需要在函数中return false即可
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
3、通过自执行函数自动执行事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body> <form id="f1" action="s1.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div>
<input type="submit" value="提交" />
</form>
<script src="jquery-1.12.4.js"></script>
<script>
// 之前接触定义事件绑定触发方式，会在当页面所有元素完全加载完毕后才会执行，这样如果有张图片过大的时候加载的慢，事件绑定效果就会随之变慢
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false; 如果这里不注释的return话,点击button只对当前输入框进行检查校验，注释了则对全部输入框进行校验
}
});
return flag;
}); // 通过自执行函数$(function(){绑定的事件})解决问题，这样在当页面框架加载完毕后，自动执行，这样的话，即使图片没有加载完毕，事件却已绑定
$(function(){
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false; 如果这里不注释的return话,点击button只对当前输入框进行检查校验，注释了则对全部输入框进行校验
}
});
return flag;
}); }); </script>
</body>
</html>
4、jQuery扩展
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<!--<script src="plugin.js"></script>可以将扩展的方法添加在其他文件中，然后引入-->
<div id="i1">hello word</div>
<script>
// 第一种扩展方法：$.extend，通过“$.方法”使用
$.extend({
'print': function () {
return 'hello word';
}
});
var v = $.print();
alert(v); // 第二种扩展方法：$.fn.extend，通过“$(..).方法”使用
$.fn.extend({
'print_1': function () {
return 'hello word';
}
});
var v1 = $("#i1").print_1();
alert(v1) //在引用多个外部jquery插件时候可能会遇到公共变量命名重复的问题，这个时间可通过自执行函数解决这个问题
(function (arg) { var status = 1; arg.extend({
'print_2': function () {
return 'hello word';
}
}); })(jQuery); </script>
</body>
</html>
【python】-- web开发之jQuery的更多相关文章
- python Web开发之 WSGI & uwsgi & uWSGI
首先弄清下面几个概念: WSGI 全称是Web Server Gateway Interface,WSGI不是服务器,python模块,框架,API或者任何软件,只是一种规范,描述web server ...
- HTML5+JS手机web开发之jQuery Mobile初涉
一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...
- python web开发之django
上一篇介绍了python-web.py的开发,本节课我们详细说明django的开发与使用. 简介及可以学习到的内容: 1.Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表 ...
- Python Web开发之Flask
PythonWEB框架之Flask 前言: Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form.Admin.分页.中间件.信号.缓存.ContenT ...
- python web开发之flask框架学习(1) 创建flask项目
python 开发越来越火,作为菜鸟,也应该学习一下,感觉还可以,记录下来,方便学习参考. 不管做什么开发首先肯定是安装环境,这里我用的是pycharm,python3.如果不清楚怎么安装环境可以去网 ...
- Python Web开发之路
Flask相关 1.DBUtils数据库连接池 2.Flask之初体验 3.Flask之WTForms 4.Flask之信号 5.Flask之flask-session 6.Flask之flask-s ...
- python web开发之flask框架学习(2) 加载模版
上次学习了flask的helloword项目的创建,这次来学习flask项目的模版加载: 第一步:创建一个flask项目 第二步:在项目目录的templates文件夹下创建一个html文件 第三步: ...
- Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
随机推荐
- 【HTML 元素】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...
- 【BIEE】11_根据显示指标展示不同报表
报表开发过程中,我们经常会需要根据所选择的不同指标,展示不同的报表!例如: 显示指标有:金额与合同数,可以根据显示指标选择的内容进行相应报表数据展示 一.环境准备 create table crm_i ...
- iconfont的简单使用
下载-阿里巴巴矢量图标 网站链接:http://www.iconfont.cn/ 首页如下: 首页-进入图标库--所有图标--搜索/点击你想要的图标--添加购物车 点击购物车(下载) 如下图: 点击下 ...
- 安装npm install时，长时间停留在某一处的解决方案
默认情况npm install安装时,会从 github.com 上下载文件,大部分安装不成功的原因都源自这里 因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com ...
- PHP面试题及答案解析(8)—PHP综合应用题
1.写出下列服务的用途和默认端口. ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的协议,它基于传输层,为用户服务,它 ...
- 安装Glass Box代理程序
安装玻璃盒代理程序 目前版本的玻璃代理程序主要支持主流 Java EE 应用程序服务器(如 JBoss,Tomcat,WebLogic 和 WebSphere).玻璃盒代理程序可以自动化安装,但考虑到 ...
- CSS实现绝对定位居中
我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { m ...
- Html.BeginForm 与Section、Partial View 和 Child Action
该方法用于构建一个From表单的开始,他的构造方法为: Html.BeginForm("ActionName","ControllerName",FormMet ...
- C++中没有定义类的引用。
在有时候由于类太大.须要在类在后面定义: 比如: class Y{ void f(X); }; class X{ //一些成员数据和函数 }; //error 由于c++要求不论什么一个变量在引用之前 ...
- hibernate单向多对一映射
n21: 1.new 两个实体类,一个代表"多"的一端,一个代表"一"的一端. Customer类: public class Customer { priva ...