导入juery
s1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入css-->
<!--<link rel="stylesheet" href="csswenjian"/>-->
</head>
<body>
<input type="text" />
<input type="text" disabled/>
<input type="text" />
<div id="i1">123</div>
<div id='i10' class='c1'>
<div>
<a>f1</a>
</div>
<a ale="123">f2</a>
<a ale="456">f3</a>
<a>f4</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'></div>
</div>
<!--引入js-->
<script src="jquery-1.12.4.js"></script>
<script>
jQuery.href
$("#i1")
</script>
</body>
</html>
操作示例
s2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" οnclick="checkAll();"/>
<input type="button" value="反选" οnclick="reverseAll();"/>
<input type="button" value="取消" οnclick="cancleAll();"/>
<table border="1px">
<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对象
//反选
//Dom实现
if(this.checked){
this.checked=false;
}else {
this.checked=true;
}
})
}
</script>
</body>
</html>
全选反选
s2-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" οnclick="checkAll();"/>
<input type="button" value="反选" οnclick="reverseAll();"/>
<input type="button" value="取消" οnclick="cancleAll();"/>
<table border="1px">
<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对象
//反选
//jQuery实现
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
}
</script>
</body>
</html>
三元运算
s2-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" οnclick="checkAll();"/>
<input type="button" value="反选" οnclick="reverseAll();"/>
<input type="button" value="取消" οnclick="cancleAll();"/>
<table border="1px">
<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对象
//反选
//jQuery实现 三元运算实现
//var v=条件? 真值:假值
var v = $(this).prop('checked') ? false : true;
$(this).prop('checked', v);
})
}
</script>
</body>
</html>
筛选器
s3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: white;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 200px;border:1px solid #dddddd;">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题四</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
//$this 当前点击的标签
//获取当前标签header的下一个标签 content
//获取header父标签,再获取父标签的兄弟标签
//添加样式和移除样式 $('.i1').addClass('hide') $('#i1').removeClass('hide')
//筛选器 $(this).next() 获取当前标签的下一个标签
//$(this).prev() 获取当前标签的上一个标签
//$(this).parent() 获取当前标签的父标签
//$(this).children() 获取当前标签的所有子标签
//$(this).siblings() 获取当前标签的所有兄弟标签 不包含自己
//$(this).find('#i1') 在所有中寻找要查找的标签
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
链式编程
s3-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: white;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 400px;width: 200px;border:1px solid #dddddd;">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题四</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
//$this 当前点击的标签
//获取当前标签header的下一个标签 content
//获取header父标签,再获取父标签的兄弟标签
//添加样式和移除样式 $('.i1').addClass('hide') $('#i1').removeClass('hide')
//筛选器 $(this).next() 获取当前标签的下一个标签
//$(this).prev() 获取当前标签的上一个标签
//$(this).parent() 获取当前标签的父标签
//$(this).children() 获取当前标签的所有子标签
//$(this).siblings() 获取当前标签的所有兄弟标签 不包含自己
//$(this).find('#i1') 在所有中寻找要查找的标签
//链式编程的方式实现
//$(...).click(function(){ this})
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
s4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a>1</a>
<a>21</a>
<a id="i1">133</a>
<a>144</a>
<a>155</a>
</div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
编辑表格
s5.html
<!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 οnclick="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>
<!--v=$('#t1').attr('target'); v=hostname-->
<!--$('#t1').text()-->
<!--"asdf"+"asdf" 字符串拼接-->
<!--$( '.modal input[name="' + v + '"]' ) 相当于3个字符串进行拼接 引用变量v时要采用字符串拼接 等于$('.modal input[name="hostname"]')-->
<!--$('.modal input[name="' + v + '"]').val()-->
<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="取消" οnclick="cancelModal();" />
<input type="button" value="确定" οnclick="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 td=document.createElement('td');
// td.innerHTML="用户输入的值"
// })
}
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 () {
//this,代指当前每个td $(this).parent().prevAll();
// 获取td的target属性值
var n=$(this).attr('target');
//获取td中的内容
var text=$(this).text();
var a1='.modal input[name="'; //找出对应的input标签
var a2='"]';
var temp= a1 + n + a2; //拼接 找出对应的input标签
$(temp).val(text); // 赋值给input标签中的value
})
// 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>
s5-1.html
<!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 οnclick="addElement();">添加</a>
<table border="1">
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a class="edit">编辑</a>|<a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
<td>
<a class="edit">编辑</a>|<a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>80</td>
<td>
<a class="edit">编辑</a>|<a>删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
</div>
<div>
<input type="button" value="取消" οnclick="cancleModal();"/>
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function addElement() {
//
$(".modal").removeClass('hide');
//
$(".shadow").removeClass('hide');
$(".modal,.shadow").removeClass('hide');
}
function cancleModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
}
$('.edit').click(function(){
$(".modal,.shadow").removeClass('hide');
//this
var tds=$(this).parent().prevAll();
var port=$(tds[0]).text();
var host=$(tds[1]).text();
console.log(host,port);
$('.modal input[name="hostname"]').val(host)
$('.modal input[name="port"]').val(port)
//循环获取tds中的
//获取<td>内容<td> 获取中间的内容
//赋值给input标签中的value
});
</script>
</body>
</html>
s6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<html>
<body>
<div class="c1">
<p>
<span id="i1">Hello</span>
</p>
<span>Hello Again</span>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
</html>
s7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">aassdddff<a>asdsdds</a></div>
<input id="i2" type="text" />
<script src="jquery-1.12.4.js"></script>
</body>
</html>
s8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' checked='checked'/>
<input id="i1" type="button" value="开关">
<div class="c1 hide">asdfssssxss</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function () {
// if($('.c1').hasClass('hide')){
//
$('.c1').removeClass('hide');
// }else{
//
$('.c1').addClass('hide');}
// })
$('.c1').toggleClass('hide');
})
</script>
</body>
</html>
自定义属性实现
s9.html
<!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: 150px;
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>
<!--cursor: pointer; 点击时箭头变成小手指图标-->
<!--$('.menu-item').click(function () {} 对标签$('.menu-item') click绑定事件-->
索引的方式实现
s10.html
<!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: 150px;
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>
<!--cursor: pointer; 点击时箭头变成小手指图标-->
<!--$('.menu-item').click(function () {} 对标签$('.menu-item') click绑定事件-->
s11.html
<!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="u2">
<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>";
$('#u2').append(temp); //追加到id=u2标签里面的后边
// $('#u2').prepend(temp);追加到id=u2标签里面的前边
// $('#u2').after(temp); 追加到id=u2标签的后边
// $('#u2').before(temp);追加到id=u2标签的前边
});
$('#a2').click(function () {
var index=$('#t1').val();
$('#u2 li').eq(index).remove() //标签和内容都删除
// $('#u2 li').eq(index).empty(); 清空内容 标签还在
});
$('#a3').click(function () {
var index=$('#t1').val();
var v= $('#u2 li').eq(index).clone();
$('#u2').append(v);
})
</script>
</body>
</html>
点赞字体漂移
s12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding:50px;
border:1px solid
blue;
}
.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 - 12;
opacity=opacity - 0.2;
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right+"px");
$(tag).css('top',top+"px");
$(tag).css('opacity',opacity);
console.log(opacity);
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
}, 150);
}
</script>
</body>
</html>
滚轮操作实例
s13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1"></div>
<div style="height: 100px;width: 100px;overflow: auto;">
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
<p>asdff</p><a>asdf</a><p>sddffg</p><p>asdff</p><a>asdf</a><p>sddffg</p>
</div>
<div id="i2"></div>
<div style="height: 1000px;"></div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
<!--div默认边距有8px-->
鼠标拖动模块
s14.html
<!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>
delegate绑定事件
s15.html
<!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="u2">
<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>";
$('#u2').append(temp);
});
// $('ul li').click(function () {
// var v=$(this).text();
// alert(v);
// })
// $('ul li').bind('click',function ()
{
// var v=$(this).text();
// alert(v);
// })
// $('ul li').on('click',function () {
// var v=$(this).text();
// console.log(v);
// })
$('ul').delegate('li','click',function () {
var v=$(this).text();
alert(v);
});
</script>
</body>
</html>
return
false 阻止事件发生实例
s16.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a οnclick="return ClickOn()" href="http://www.baidu.com">走你1</a>
<a id="i1" href="http://www.baidu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
<!--a标签是一个默认的跳转事件click-->
<!--绑定的onclick先执行，默认的click后执行-->
<!--return false;不会执行默认的click-->
<!--return true;执行默认的click-->
绑定事件
s17.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="s5.html" method="POST">
<div><input name="n1" type="text"/></div>
<div><input name="n2" type="password"/></div>
<div><input name="n3" type="text"/></div>
<div><input name="n4" type="text"/></div>
<div><input name="n5" type="text"/></div>
<input type="submit" value="提交"/>
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//当页面框架加载完毕后，自动执行 图片没加载完 框出来 这个函数就会执行
$(function () {
//当页面所有元素完全加载完毕后，执行
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if (v.length <= 0) {
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerText = "必填";
$(this).after(tag);
//return false;//相当于break 终止循环
}
});
return flag;
});
});
// $(':submit').click(function(){
// var v=$(this).prev().val();
// if(v.length>0){
// return true;
// }else{
// alert("请输入内容");
// return false;
// }
// })
</script>
</body>
</html>
jQuery宽展
s18.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="plugin1.js"></script>
<script>
var v=$.ws();
alert(v);
</script>
<!--<script>-->
<!--// $('#i1').css()-->
<!--// $.ajax()-->
<!--//jQuery扩展-->
<!--$.fn.extend({-->
<!--'nb':function ()
{-->
<!--return 'DB'-->
<!--}-->
<!--});-->
<!--var v=
$('#i1').nb();-->
<!--alert(v);-->
<!--$.extend({-->
<!--'ws': function ()
{-->
<!--return 'sb';-->
<!--}-->
<!--});-->
<!--var v= $.ws();-->
<!--alert(v);-->
<!--</script>-->
</body>
</html>
扩展js
plugin1.js
$.extend({
'ws': function () {
return 'sb';
}
});
扩展js
plugin2.js
(function (arg) {
var status=1;
arg.extend({
'ws': function () {
return 'sb';
}
});
})(jquery);
转载于:https://www.cnblogs.com/leiwenbin627/p/10924153.html