27Python之jQuery基础
Posted 中国先疯队队长
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了27Python之jQuery基础相关的知识，希望对你有一定的参考价值。
一、jQuery基础
jQuery是一个类库，类似于python中的模块，其封装了JavaScript对dom的操作，我们使用jQuery可以用更少的代码完成复杂的场景，而jQuery的内部本质上也是dom的操作。jQuery类库有3个系列，可以去jQuery的官网进行下载，然后使用<script src="jQuery的路径"></script>导入到我们的项目中，就可以使用了jQuery了。jquery的中文手册地址是：http://jquery.cuishifeng.cn/
1、jQuery对象和document对象的转换
jQuery[0] =====> Dom对象
Dom对象 ======>$(Dom对象) 调用jQuery类库时使用$符或jQuery。
2、元素查找
jQuery中常见的元素查找有：id，class，标签查找，组合查找，层级查找，基本查找，属性查找，表单查找，表单对象查找等，基本使用如下;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="id">hello jquery 9 <div class="c1"> 10 <a></a> 11 </div> 12 <a></a> 13 <label>123</label> 14 <a id="a11">456</a> 15 </div> 16 <a id="a1">hello</a> 17 <a age></a> 18 <a age="18"></a> 19 20 <form id="f1"> 21 <input type="text"/> 22 <input type="password"/> 23 <input type="checkbox"/> 24 <input type="button"value="按钮"> 25 </form> 26 <script src="jquery-3.3.1.js"> 27 28 </script> 29 <script> 30 $(\'#id\');//id查找 31 $(\'.c1\');//class查找 32 $(\'div\');//标签查找 33 $(\'#id,.c1,a\');//组合查找 34 //----层级查找 35 $(\'#id a\');//查找子子孙孙 36 $(\'#id>a\');//查找儿子 37 //---基本查找 38 $(\'#id>a:first\'); 39 $(\'#id>a:last\'); 40 $(\'#id>a:eq(1)\'); 41 //----属性查找 42 $(\'[age]\'); 43 $(\'[age="18"]\'); 44 //表单查找 45 $(\':text\'); 46 $(\':password\'); 47 $(\':checkbox\'); 48 $(\':button\'); 49 //表单对象属性查找 50 $(\':checked\'); //查找所有被选中的checkbox 51 </script> 52 </body> 53 </html>
jQuery实现多选，反选，取消操作实例。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table id="tb" border="1" cellspacing="0" style="width: 300px"> 9 <thead> 10 <th>操作</th> 11 <th>IP</th> 12 <th>PORT</th> 13 </thead> 14 <tbody> 15 <tr> 16 <td><input type="checkbox"/></td> 17 <td>1.1.1.1</td> 18 <td>8080</td> 19 </tr> 20 <tr> 21 <td><input type="checkbox"/></td> 22 <td>1.1.1.1</td> 23 <td>8080</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"/></td> 27 <td>1.1.1.1</td> 28 <td>8080</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"/></td> 32 <td>1.1.1.1</td> 33 <td>8080</td> 34 </tr> 35 </tbody> 36 </table> 37 <input id="all_id" type="button" value="全选"/> 38 <input id="rev_id" type="button" value="反选"/> 39 <input id="canel_id" type="button" value="取消"/> 40 41 <script src="jquery-3.3.1.js"></script> 42 <script> 43 $(\'#all_id\')[0].onclick = function(){ 44 $(\'#tb :checkbox\').prop(\'checked\',true); 45 } 46 47 $(\'#canel_id\')[0].onclick = function () { 48 $(\'#tb :checkbox\').prop(\'checked\',false); 49 } 50 51 $(\'#rev_id\')[0].onclick = function () { 52 $(\'#tb :checkbox\').each(function () { 53 $(this).prop(\'checked\',!$(this).prop(\'checked\')); 54 // this.checked = !this.checked; 55 }) 56 } 57 </script> 58 </body> 59 </html>
其中prpo是专门用于checkbox，radio属性设置，each方法是jQuery内置循环。$(\'#tb :checkbox\').each(function(k){ //k当前索引 //this当前循环的元素})。
3、筛选(next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil(), parent(), parents(), parentsUntil(), children(), siblings(), find(), $(\'#id\').eq(index), $(\'#id:eq(index)\'), first(), last())
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <a id="i2"></a> 10 <a>asdf</a> 11 <a>asdf</a> 12 <a id=\'i1\' class="c1">asdf</a> 13 <a>asdf</a> 14 <a id=\'ii1\'>asdf</a> 15 <a>asdf</a> 16 </div> 17 18 <script src="jquery-3.3.1.js"> 19 20 </script> 21 <script> 22 $(\'#i1\').next();//下一个元素 23 $(\'#i1\').nextAll(); //下面所有元素 24 $(\'#i1\').nextUntil(\'#ii1\');//直到#ii1,不包含#ii1 25 $(\'#i1\').prev(); //前一个元素 26 $(\'#i1\').prevAll(); //前面所有元素 27 $(\'#i1\').prevUntil("#i2"); //前面的元素 直到i2 28 $(\'#i1\').parent();//父标签 29 $(\'#i1\').parents(); //所有父标签 30 $(\'#i1\').parentsUntil(\'#id\'); //查找所有父标签直到id 31 $(\'#i1\').children(); //查找所有孩子 32 $(\'#i1\').siblings(); //查询所有兄弟 33 $(\'#i1\').find(); //查询子子孙孙 34 $(\'#i1:eq(1)\'); //查找第一个元素 35 $(\'#i1\').eq(1); //查找第一个元素 36 $(\'#i1\').first(); //查找第一个元素 37 $(\'#i1\').hasClass(\'c1\'); //查找是否有某个类 38 </scriptjQuery基础教程详解的目录