JQuery
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery相关的知识，希望对你有一定的参考价值。
JQuery是把DOM和javascript的功能封装了的模块，可以获取到网页元素并操作元素。
没有JQuery仅用DOM也能实现功能，但是需要考虑的就多了，如下例：
DOM的document.getElementById(\'i1\'); 等价于 JQuery的$(\'#i1\')，可见JQuery简化了。
#几乎所有的运维开发都能用JQuery，哪种情况不用JQuery呢，开发app的时候，app好多使用移动流量的，向服务器请求JQuery是会产生流量的，为了节省用户流量，app不会使用JQuery。
DOM存在浏览器兼容性问题，在chrome和firefox上没事，在IE上可能有问题，JQuery的出现也变相了解决了DOM兼容问题，你只需要用JQuery即可，不会产生浏览器不兼容的情况。
无特殊要求的话，用JQuery1.12及以上的版本，但不要用2.X的版本，因为从2.X开始就不支持IE9及以下的浏览器了，所以1.X的兼容性更好。
1.内容概要
2.jQuery组件说明
http://jquery.cuishifeng.cn/
2.1 基本选择器
#id ：根据id来找，$(#i1) element：根据元素 .class：根据类 * ：所有的 selector1,selector2,selectorN ： selector1和selector2和selectorN
2.2 层级选择器
ancestor descendant ：查找id是ancestor的下面的子子孙孙里的id或class或其他是descendant 的元素 parent > child ：查找id是parent的下面的子标签里id或class或其他是child的元素 prev + next ：下一个 prev ~ siblings：兄弟
2.3 基本筛选器
:first ，获取匹配的第一个元素，$(\'li:first\');，获取<li></li>的第一个元素。 :not(selector) ，不是 :even ，查找表格的1、3、5...行（即索引值0、2、4...） :odd ，偶数行 :eq(index) ，索引等于 :gt(index) ，索引大于
画框为需要重点看的，用的多，
3. 实现菜单点击隐藏的效果
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> p{ margin:0; } .hide{ display:none !important; } .menu{ width:200px; height:800px; border:1px solid #dddddd; } .menu .item .title{ height:40px; line-height:40px; background-color:#27408B; color:white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowBody(this)">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowBody(this)">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowBody(this)">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowBody(ths){ //$(ths)，DOM标签对象转换为JQuery标签对象 //$(ths)[0]，JQuery标签对象转换为DOM标签对象 //将当前div下一个标签添加hide样式 $(ths).next().removeClass(\'hide\'); //将当前div的父标签的所有兄弟标签下面，查找到的.body的class加上hide样式 $(ths).parent().siblings().find(\'.body\').addClass(\'hide\'); } </script> </body> </html>
4.用jquery实现全选反选
object.prop(\'checked\')，判断是否为true；object.attr(\'checked\')，获取checked的值；
object.prop(\'checked\',true)，将checked设置为true，即打上对勾；object.attr(\'checked\',\'checked\')，将checked的值设置为checked，作用也是打上对勾。
注：推荐使用prop形式，更简单；千万不要两者混用，不然会出现打钩的混乱，不是代码有错误，而是两者混用导致的打钩混乱。
<body>
<input type="button" value="全选" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CheckCancel()" />
<input type="button" value="反选" onclick="CheckReverse()" />
<table>
<thead>
<tr>
<td>选择</td>
<td>用户列表</td>
<td>密码列表</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" id="c1" /></td>
<td>用户1</td>
<td>密码1</td>
</tr>
<tr>
<td><input type="checkbox" id="c2" /></td>
<td>用户2</td>
<td>密码2</td>
</tr>
<tr>
<td><input type="checkbox" id="c3" /></td>
<td>用户3</td>
<td>密码3</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckAll(){
//取到id是tb的标签下的input标签的type是checkbox的所有标签，prop是循环所有匹配的标签，然后执行checked=true;
$(\'#tb input[type="checkbox"]\').prop(\'checked\',true);
}
function CheckCancel(){
$(\'#tb input[type="checkbox"]\').prop(\'checked\',false);
}
function CheckReverse(){
//each，对每个匹配的标签执行后面的方法。
$(\'#tb input[type="checkbox"]\').each(
function(){
if($(this).prop(\'checked\')){
$(this).prop(\'checked\',false);
}else{
$(this).prop(\'checked\',true);
}
}
);
}
</script>
</body>
5. +添加标签，-删除标签
<body>
<div>
<p>
<a id="i1" onclick="Clone(this)"> + </a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Clone(ths){
#将a标签的父标签p克隆一份，找到a标签，设置内容为“-”，设置onclick="Remove(this)"，给a标签的父标签的父标签即div标签追加克隆出来的p标签。
var p = $(ths).parent().clone();
p.find(\'a\').text(\' - \');
p.find(\'a\').attr(\'onclick\',\'Remove(this)\');
$(ths).parent().parent().append(p);
}
function Remove(ths){
//remove，删除标签；empty，清空标签内容，标签保留。
$(ths).parent().remove();
}
</script>
</body>
6. 实现菜单点击隐藏的效果，利用JQeury事件简化代码
<body>
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//找到菜单的div，添加click事件，这样就不用在每个菜单div里添加“onclick”事件了。
$(\'.item .title\').click(function ShowBody(){
$(this).next().removeClass(\'hide\');
$(this).parent().siblings().find(\'.body\').addClass(\'hide\');
}
);
//下面利用bind的代码效果等同于上面
$(\'.item .title\').bind(\'click\',function ShowBody(){
$(this).next().removeClass(\'hide\');
$(this).parent().siblings().find(\'.body\').addClass(\'hide\');
}
);
//$(function{//将代码写入这里面，就会当html的文档树加载完毕后就执行这段scripts，不会等待加载文档内容再执行，所以会更快点执行。});，所以一般将代码JQuery事件放到$(function{});内。
$(function{
$(\'.item .title\').click(function ShowBody(){
$(this).next().removeClass(\'hide\');
$(this).parent().siblings().find(\'.body\').addClass(\'hide\');
}
);
});
</script>
</body
7. 延迟绑定事件
没有加延迟绑定的情况：
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> </head> <body> <div> <input type="button" onclick="Add()" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ $(\'ul li\').click(function(){ alert($(this).text()); }) }); function Add(){ var tag = document.createElement(\'li\'); tag.innerText = \'666\'; $(\'ul\').append(tag); } </script> </body> </html>
加载完html后所有li标签就绑定了alert事件，所以点击按钮触发Add()事件后添加的li都没有alert事件，因为$(function() {})是在加载完页面后执行的，不会因为Add()方法再执行一次，所以新加的li标签都没有alert事件。
加延迟绑定的情况：
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> </head> <body> <div> <input type="button" onclick="Add()" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ //$(\'ul li\').click(function(){ // alert($(this).text()); //}) $("ul").delegate( "li","click",function(){ alert($(this).text()); } ); }); function Add(){ var tag = document.createElement(\'li\'); tag.innerText = \'666\'; $(\'ul\').append(tag); } </script> </body> </html>
这样所有新添加的li标签也都能触发alert了。
延迟绑定的意思是，不是文档树加载完后就自动执行$(function(){})，而是当需要触发的时候，再执行$(function(){})。拿上面的代码来说，页面加载完之后并没有执行$(function(){})里的代码，而是点击li标签时，立刻绑定$(function(){})代码并且执行。所以点击新添加的li标签时，也是先绑定再执行。
如果要绑定的标签特别特别多的时候，用延迟绑定会更快，因为它无需页面加载完后一股脑的都绑定了。
事件总结：
1.绑定事件
2.${function(){}};文档树加载完毕后自动执行
3.延迟绑定
4.return false，返回false后，就不执行这个事件之后的代码了，如表单提交，验证用户信息不符合则就不提交了。
8.表格编辑内容后保存
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/1.css"> </head> <body> <div class="head-div"> <input type="button" class="allchoice" value="全选" onclick="Allchoice()" > <input type="button" class="nochoice" value="取消" onclick="Nochoice()" > <input type="button" class="reversechoice" value="反选" onclick="Reversechoice()" > <input type="button" id="e1" class="editmode" value="进入编辑模式" onclick="Editmode()" > </div> <br/> <div> <table> <thead> <tr> <td> </td> <td>IP</td> <td>PORT</td> <td>STATUS</td> </tr> </thead> <tbody id="tb"> <tr> <td><span> + <span></td> <td class="input-checkbox"><input type="checkbox" class="checks" /></td> <td id="ip1">10.33.25.6</td> <td>22</td> <td> <select> <option>在线</option> <option>离线</option> </select> </td> </tr> <tr> <td><span> + <span></td> <td class="input-checkbox"><input type="checkbox" class="checks" /></td> <td id="ip2">10.33.25.7</td> <td>22</td> <td> <select> <option>在线</option> <option>离线</option> </select> </td> </tr> <tr> <td><span> + <span></td> <td class="input-checkbox"><input type="checkbox" class="checks" /></td> <td id="ip3">10.33.25.8</td> <td>22</td> <td> <select> <option>在线</option> <option>离线</option> </select> </td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> //delegate,延迟绑定 $(function(){ $(".input-checkbox").delegate( "input","click",function(){ var editmode = $(\'.editmode\').attr(\'onclick\'); //console.log(\'tag\'); //console.log($(this).prop(\'checked\')); if(editmode == "ExitEditmode()"){ var dqtd = $(this).parent().next(); if(dqtd.find(\'input\').length == 0){ var textlog = dqtd.text(); //console.log(textlog); dqtd.empty(); dqtd.append(\'<input type="text" />\'); dqtd.children().val(textlog); }else{ var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); } } } ); }); //如果是编辑模式，就进入AllChoiceMode function Allchoice(){ var editmode = $(\'.editmode\').attr(\'onclick\'); if(editmode == "ExitEditmode()"){ //$(\'#tb input[type="checkbox"]\').prop(\'checked\',true); AllChoiceMode(); }else{ $(\'#tb input[type="checkbox"]\').prop(\'checked\',true); } } function Nochoice(){ var editmode = $(\'.editmode\').attr(\'onclick\'); if(editmode == "ExitEditmode()"){ //$(\'#tb input[type="checkbox"]\').prop(\'checked\',true); AllNoChoiceMode(); }else{ $(\'#tb input[type="checkbox"]\').prop(\'checked\',false); } } function Reversechoice(){ var editmode = $(\'.editmode\').attr(\'onclick\'); if(editmode == "ExitEditmode()"){ //$(\'#tb input[type="checkbox"]\').prop(\'checked\',true); ReverseChoiceMode(); }else{ $(\'#tb input[type="checkbox"]\').each( function(){ if($(this).prop(\'checked\')){ $(this).prop(\'checked\',false); }else{ $(this).prop(\'checked\',true); } } ); } } function Editmode(){ $(\'.editmode\').val("进入显示模式"); $(\'.editmode\').attr(\'onclick\',\'ExitEditmode()\'); $(\'#tb input[type="checkbox"]\').each( function(){ if($(this).prop(\'checked\')){ var dqtd = $(this).parent().next(); var textlog = dqtd.text(); //console.log(textlog); dqtd.empty(); dqtd.append(\'<input type="text" />\'); dqtd.children().val(textlog); }else{ console.log("fdaf"); } } ); } function AllChoiceMode(){ $(\'#tb input[type="checkbox"]\').each( function(){ var dqtd = $(this).parent().next(); //console.log($(this).parent().next().find(\'input\')); if($(this).prop(\'checked\')){ }else{ $(this).prop(\'checked\',true); var textlog = dqtd.text(); dqtd.empty(); dqtd.append(\'<input type="text" />\'); dqtd.children().val(textlog); } } ); } function AllNoChoiceMode(){ $(\'#tb input[type="checkbox"]\').each( function(){ var dqtd = $(this).parent().next(); if($(this).prop(\'checked\')){ $(this).prop(\'checked\',false); var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); } //console.log($(this).parent().next().find(\'input\')); } ); } function ReverseChoiceMode(){ $(\'#tb input[type="checkbox"]\').each( function(){ var dqtd = $(this).parent().next(); if($(this).prop(\'checked\')){ $(this).prop(\'checked\',false); var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); }else{ $(this).prop(\'checked\',true); var textlog = dqtd.text(); dqtd.empty(); dqtd.append(\'<input type="text" />\'); dqtd.children().val(textlog); } //console.log($(this).parent().next().find(\'input\')); } ); } function ExitEditmode(){ $(\'.editmode\').val("进入编辑模式"); $(\'.editmode\').attr(\'onclick\',\'Editmode()\'); $(\'#tb input[type="checkbox"]\').each( function(){ if($(this).prop(\'checked\')){ var dqtd = $(this).parent().next(); var inputtext = dqtd.children().val(); //console.log(inputtext); dqtd.empty(); dqtd.append(inputtext); //dqtd.children().val(textlog); }else{ console.log("123456789900"); } } ) } </script> </body> </html>
css/1.css里的内容：
.head-div input{ margin-right:10px; color:red; } td{ padding-right:10px; }
9.提交表单前验证
9.1 DOM绑定事件方式
<!DOCTYPE html> <html lang="en"> <head> <title>fazhan</title> <meta charset="UTF-8" /> <style> .item{ width:250px; height:60px; position:relative; } .item span{ position:absolute; top:20px; left:0; display:inline-block; background-color:red; color:white; } </style> </head> <body> <form> <div class="item"> 用户名：<input type="text" class="c1" name="username" label="用户名" /> <!--span>用户名不能为空</span--> </div> <div class="item"> 密码：<input type="password" class="c1" name="password" label="密码" /> <!--span>密码不能为空</span--> </div> <div> <input type="submit" onclick="return CheckForm();"/> </div> </form> <script src="jquery-1.12.4.js"></script> <script> function CheckForm(){ //为防止错误提示一直存在，所以每次做检测之前都把span标签移除。 $(\'form .item span\').remo以上是关于JQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段