Python自动化运维之24JQuery
Posted Python自动化运维之路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python自动化运维之24JQuery相关的知识，希望对你有一定的参考价值。
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理html（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
一、查找元素
1、常用选择器
1.1 基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")
1.2层级选择器
$(".outer div") // 所有的后代
$(".outer>div") // 所有的子代
$(".outer+div") // 匹配所有跟在.outer后面的div
$(".outer~div") // .outer后面的所有div
1.3 基本筛选器
$("li:first") // 所有li标签中第一个标签
$("li:last") // 所有li标签中最后一个标签
$("li:even") // 所有li标签中偶数标签
$("li:odd") // 所有li标签中奇数标签
$("li:eq(2)") // 所有li标签中，索引是2的那个标签
$("li:gt(1)") // 所有li标签中，索引大于1的标签
1.4 属性选择器
$(\'[id="div1"]\')
$(\'[alex="sb"]\')
$("input[type=\'text\']") 可以缩写:text
2、常用筛选器
2.1 过滤筛选器
$("li").eq(2) // 和:eq是一样的
$("li").first() // 和:first是一样的
$("li").last() // 和:last是一样的
$("ul li").hasclass("test") // 检测li中的是否含有某个特定的类名，有的话返回true
2.2 查找筛选器
$("div").children() // div中的子标签,只找儿子辈 $("div").children(".div").css("color","red")
$("div").find() // div中的子标签,后代都找 $("form").find(:text,:password) // form标签中找到:text,:password标签
$("div").next() // div标签下一个标签
$("div").nextAll() // div标签下一个同级所有标签
$("div").nextUntil() // div标签下一个同级区间内所有标签
$("div").prev() // div标签上一个标签
$("div").prevAll() // div标签上一个同级所有标签
$("div").prevUntil() // div标签上一个同级区间内所有标签
$("div").parent() // div标签的父标签
$("div").parents() // div标签的爷爷标签集合
$("div").parentsUntil() // div标签的爷爷标签区间内
$("input").siblings() // input的同辈标签
二、操作元素
1、属性操作
$(":text").val() // text输入的内容
$(".test").attr("name") // test类中name属性对应的值
$(".test").attr("name","sb") // 设置test类中name属性对应的值
$(".test").attr("checked","checked") // 设置test类中checked属性对应的值为checked
$(":checkbox").removeAttr("checked") // 删除checkbox标签中的checked属性
$(".test").prop("checked",true) // 设置checked为true
$(".test").addClass("hide") // 增加样式
2、CSS操作
(样式) css("{color:\'red\',backgroud:\'blue\'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框
3、文档处理
内部插入 $("#c1").append("<b>hello</b>")
$("p").appendTo("div")
prepend()
prependTo()
外部插入 before()
insertBefore()
after()
insertAfter()
标签内容处理
remove()
empty()
clone()
4、事件
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托，延迟绑定事件的一种方式
三、jquery所有示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> .hide{ display: none; } .menu{ width:200px; height:600px; border:1px solid #dddddd; overflow: auto; } .menu .item .title { height:40px; line-height:40px; background-color: #2459a2; color:white; cursor: pointer; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this)">菜单一</div> <div class="body hide"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this)">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this)">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> function ShowMenu(ths) { // console.log(ths); //Dom中的标签对象 //$(ths) // Dom标签对象转换成jQuery标签对象(便利) //$(ths)[0] // jQuery标签对象转成Dom标签对象 $(ths).next().removeClass(\'hide\'); $(ths).parent().siblings().find(\'.body\').addClass(\'hide\'); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox全选取消反选</title> </head> <body> <input type="button" value="全选" onclick="CheckAll()"/> <input type="button" value="取消" onclick="CancleAll()"/> <input type="button" value="反选" onclick="ReverseAll()"/> <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>22</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.2</td> <td>22</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.3</td> <td>22</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function CheckAll() { $(\'#tb input[type="checkbox"]\').prop(\'checked\',true); } function CancleAll() { $(\'#tb input[type="checkbox"]\').prop(\'checked\',false); } function ReverseAll() { $(\'#tb input[type="checkbox"]\').each(function () { if($(this).prop(\'checked\')){ $(this).prop(\'checked\',false); }else{ $(this).prop(\'checked\',true); } }); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery clone</title> </head> <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(ths) { var p = $(ths).parent().clone(); p.find(\'a\').text(\'-\'); p.find(\'a\').attr(\'onclick\',\'Remove(this)\'); $(ths).parent().parent().append(p); } function Remove(ths) { $(ths).parent().remove(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> .hide{ display: none; } .menu{ width:200px; height:600px; border:1px solid #dddddd; overflow: auto; } .menu .item .title { height:40px; line-height:40px; background-color: #2459a2; color:white; cursor: pointer; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="body hide"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p&以上是关于Python自动化运维之24JQuery的主要内容，如果未能解决你的问题，请参考以下文章