jQuery操作 - 润新知

jQuery操作

导入juery
s1.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 
 

</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>
 
 <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="全选" onclick="checkAll();"/>
 <input type="button" value="反选" onclick="reverseAll();"/>
 <input type="button" value="取消" onclick="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="全选" onclick="checkAll();"/>
 <input type="button" value="反选" onclick="reverseAll();"/>
 <input type="button" value="取消" onclick="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="全选" onclick="checkAll();"/>
 <input type="button" value="反选" onclick="reverseAll();"/>
 <input type="button" value="取消" onclick="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 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 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 onclick="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="取消" onclick="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">
 
 <span id="i1">Hello</span>
 
 <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>



索引的方式实现
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>



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;">
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 asdff<a>asdf</a>sddffgasdff<a>asdf</a>sddffg
 </div>

 <div id="i2"></div>
 <div style="height: 1000px;"></div>
 <script src="jquery-1.12.4.js"></script>
</body>
</html>




鼠标拖动模块
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 onclick="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>






绑定事件
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>
 


 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
</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);
相关阅读:
刘汝佳，竖式问题
 二叉树
 sort
hash
贪心算法
 FFT，NTT 专题
 hdu 5861 Road 两棵线段树
 hdu 5862 Counting Intersections
hdu 5833 Zhu and 772002 ccpc网络赛高斯消元法
 hdu 5800 To My Girlfriend + dp
原文地址：https://www.cnblogs.com/leiwenbin627/p/10924153.html