Python自动化 【第十七篇】：jQuery介绍
jQuery
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
http://www.php100.com/manual/jquery/ jQuery 1.12中文文档
jQuery和dom之间的转换关系：
jQuery对象[0] => Dom对象
Dom对象 => $(Dom对象)
查找元素：引入jQuery后用$调用其方法
1.选择器，直接找到某个或者某类标签
1.1 id
$('#id') #通过id找到对应标签
1.2. class
<div class='c1'></div>
$(".c1") #通过class找到对应标签
1.3. 标签
$('a') #找到所有的a标签
1.4 组合查找
$('a') #找到所有的a标签
$('.c2') #找到所有的class=c2的标签
$('a,.c2,#i10') #找到所有的a标签和class=c2的标签以及id=i10的标签
1.5 层级查找
$('#i10 a') #子子孙孙（匹配id=i10的标签下面所有的a标签）
$('#i10>a') #只匹配子标签（只匹配id=i10的标签子标签中的a标签）
1.6 基本选择器
:first #匹配符合要求的所有标签的第一个标签
:last #匹配符合要求的所有标签的最后一个标签
:eq(index) #通过索引匹配，index从0开始
1.7 属性
$('[tony]') #具有tony属性的所有标签
$('[tony="123"]') #tony属性等于123的标签
$("input[type='text']") #先匹配标签后匹配属性
$(':text') #简写（匹配所有的text属性）
实例：多选，反选，全选
<!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="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>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() {
/*$('#tb :checkbox').each(function () {
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
});*/
$('#tb :checkbox').each(function () {
// dom操作:
// if(this.checked){
// this.checked = false;
// }else{this.checked = true;}
// jQuery操作:
// if ($(this).prop('checked')){
// $(this).prop('checked',false);
// }else{$(this).prop('checked',true);}
// 三元运算:
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);});}
</script>
</body>
</html>
1.8对checkbox标签的操作（prop方法）：
- $('#tb:checkbox').prop('checked'); #不传值表示获取值
- $('#tb:checkbox').prop('checked', true); #传值表示设置值为true
1.9 jQuery方法内置循环：
- $('#tb :checkbox').xxxx （xxxx为直接做操作），例如：
$('#tb :checkbox').prop('checked', true) #给匹配到的每一个chackbox标签加上checked属性为true
或者.each() 内套函数：
- $('#tb :checkbox').each(function(k){
// k为当前索引
// this，DOM对象（代指当前循环的元素），$(this)转换成jQuery对象
})
三元运算：
- var v = 条件 ? 真值 : 假值 （若条件成立则v为true，否则false）
2.筛选：
$('#i1').next() #获取当前标签的下一个标签
$('#i1').nextAll() #获取当前标签的下边所有标签
$('#i1').nextUntil('#i2') #获取当前标签以下直到id为i2的标签
$('#i1').prev() #上一个
$('#i1').prevAll()
$('#i1').prevUntil('#i2')
$('#i1').parent() #父标签
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children() #子标签
$('#i1').siblings() #获取当前标签的所有同级（兄弟）标签
$('#i1').find(‘#c1’) #匹配当前标签所有子孙标签中class=c1的标签
代码示例：（筛选器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {border: 1px solid #DDDDDD;
height: 400px;width: 200px;}
.item {color:white;}
.hide {display: none;}
</style>
</head>
<body class="c1">
<div>
<div class="item">标题一</div>
<div class="content">内容一</div>
</div>
<div>
<div class="item">标题二</div>
<div class="content hide">内容二</div>
</div>
<div>
<div class="item">标题三</div>
<div class="content hide">内容三</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
$('li:eq(1)') #选择器都由字符串包裹
$('li').eq(1) #筛选器查找
first()
last()
hasClass(class) #是否具有样式
3.文本操作：
$(..).text() # 获取文本内容
$(..).text("<a>1</a>") # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
$(..).val() ## 获取表单内容
$(..).val(..) ## 设置表单内容
4.样式操作：
addClass #添加样式
removeClass #移除样式
toggleClass #设置开关样式效果
5.属性操作：
# 专门用于做自定义属性 *****
$(..).attr('n') #获取属性值
$(..).attr('n','v') #设置属性值
$(..).removeAttr('n') #删除属性
<input type='checkbox' id='i1' />
# 专门用于chekbox,radio *****
$(..).prop('checked') #获取值
$(..).prop('checked', true) #设置值
模态对话框代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide {
display: none;
}
.modal {
position: fixed;
width: 400px;
height: 200px;
top:50%;
left:50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
.shadow {
position: fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.edit {
border-radius:2px;
border: 2px outset white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="modal hide">
<div style="width: 250px;height: 150px;margin: 20px auto;">
Host:<input name="hostname" type="text"><p></p>
Port:<input name="port" type="text"><p></p>
IP:<input name="IP" type="text">
<p></p>
<input style="margin-left: 75px;" type="button" value="确定">
<input id="i2" type="button" value="取消">
</div>
</div>
<div class="shadow hide"></div>
<input id="i1" type="button" value="添加" >
<input type="button" value="全选" onclick="checkAll();">
<input type="button" value="反选" onclick="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr> <th>HostName</th><th>Port</th><th>IP</th><th>操作</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="IP">80</td>
<td>
<input type="button" class="edit" value="编辑"/>|<a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">80</td>
<td target="IP">80</td>
<td>
<input type="button" class="edit" value="编辑"/>|<a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">80</td>
<td target="IP">80</td>
<td>
<input type="button" class="edit" value="编辑"/>|<a>删除</a>
</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function () {
$('.modal,.shadow').removeClass('hide')
});
$('#i2').click(function () {
$('.modal,.shadow') .addClass('hide')
$('.modal input[name="hostname"]').val("");
$('.modal input[name="port"]').val("");
$('.modal input[name="IP"]').val("");
});
$('.edit').click(function () {
$('.modal,.shadow').removeClass('hide');
var tds = $(this).parent().prevAll();
tds.each(function () {
var n = $(this).attr('target');
var text = $(this).text();
$('.modal input[name="'+n+'"]').val(text)
});});
</script>
</body>
</html>
TAD切换菜单代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu {
height: 38px;
line-height: 38px;}
.menu-item {
float: left;
border-right: 1px solid red;
padding: 0 10px;
cursor: pointer;}
.active {
}
.hide {
display: none;}
</style>
</head>
<body>
<div style="width:700px;margin: 100px auto;height: 500px;">
<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" style="height: 300px;border: 1px solid #DDDDDD">
<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');
$(".content").children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
});
</script>
</body>
</html>
PS: index 获取索引位置
6.文档处理：
append #在匹配标签的内部最下边添加标签
prepend #在匹配标签的内部最上边添加标签
after #在匹配标签外部后边追加标签
before #在匹配标签外部前边追加标签
remove #删除某个标签
empty #清空标签内容，标签不删除
clone #复制一个标签
7.css处理
$('.t1').css('样式名称', '样式值')
点赞代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {padding: 50px;
border:1px solid #DDDDDD;}
.content {position: relative;
width:30px;}
</style>
</head>
<body>
<div class="container">
<div class="content">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="content">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.content').click(function () {
addFavor(this);});
function addFavor(self) {
var fontsize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('i');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontsize',fontsize + 'px');
$(tag).css('top',top + 'px');
$(tag).css('right',right + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontsize = fontsize + 10;
top -= 10;right -= 10;opacity -= 0.2;
$(tag).css('fontSize',fontsize + 'px');
$(tag).css('top',top + 'px');
$(tag).css('right',right + 'px');
$(tag).css('opacity',opacity);
if (opacity < 0) {
clearInterval(obj);
$(tag).remove();}},100)}
</script>
</body>
</html>
上例用到的方法：
- $('.t1').append()
- $('.t1').remove()
- setInterval #设置定时时间
- 透明度 1 ==> 0
- position
- 字体大小，位置
8.位置：
$(window).scrollTop() #获取位置（高度）信息
$(window).scrollTop(0) #设置像素高度
scrollLeft([val])
offset().left #指定标签在html中的坐标
offset().top #指定标签在html中的坐标
position() #指定标签相对父标签(relative标签)的坐标
移动面板代码示例：
<!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="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');
}).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;
$(this).bind('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');})
}).mouseup(function(){
$(this).unbind('mousemove');});})
</script>
</body>
</html>
9.事件
DOM：四种绑定方式
- $('.c1').click()
$('.c1').....
- $('.c1').bind('click',function(){
})
- $('.c1').unbind('click',function(){
})
- $('.c').delegate('a', 'click', function(){
}) #委托（delegate）（新添加的标签也可以通过该方法绑定时间）
- $('.c').undelegate('a', 'click', function(){
})
- $('.c1').on('click', function(){
})
- $('.c1').off('click', function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...) #在function里面执行jQuery操作
})
10.jQuery扩展：
- $.extend 执行： $.方法
- $.fn.extend 执行：$(..).方法
第一种调用方法示例：
<script src="jquery-1.12.4.js"></script>
<script>
// $('#i1').css();
// $.ajax();
// jQuery扩展
$.extend({
'test':function () {
return 'success';}});
$.text(); //直接调用test方法
</script>
第二种调用方法示例：
<script src="jquery-1.12.4.js"></script>
<script>
$.fn.extend({
'test':function () {
return 'success';}}); //必须是$.fn.extend()
$('#i1').text(); //必须选中某个标签后才可以调用
</script>
还可以上网找各种jQuery扩展，解决不同jQuery之间（插件和插件间）全局变量和函数名称冲突的方法（将变量和函数封装在自执行函数里）：
(function(arg){
var status = 1;
// 封装变量
})(jQuery) #或者传 $，实参是将参数传递给自执行函数
Python自动化 【第十七篇】：jQuery介绍的更多相关文章
- 【python自动化第十一篇】
[python自动化第十一篇:] 课程简介 gevent协程 select/poll/epoll/异步IO/事件驱动 RabbitMQ队列 上节课回顾 进程: 进程的诞生时为了处理多任务,资源的隔离, ...
- Appium+python自动化（十七）- 你难道猴哥失散多年的混血弟弟 - Monkey简介之开山篇（超详解）
简介 今天由宏哥给小伙伴们来介绍猴哥的混血弟弟=Monkey.Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monk ...
- python自动化运维篇
1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...
- python【第十七篇】jQuery
1.jQuery是什么? jQuery是一个 JavaScript/Dom/Bom 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. 2.jQuery对象与D ...
- 【python自动化第六篇：面向对象】
知识点概览: 面向对象的介绍 面向对象的特性(class,object)实例变量,类变量 面型对象编程的介绍 其他概念 一.面向对象介绍 编程范式:面向对象,面向过程,函数式编程 面向过程:通过一组指 ...
- 【python自动化第五篇：python入门进阶】
今天内容: 模块的定义 导入方法 import的本质 导入优化 模块分类 模块介绍 一.模块定义: 用来在逻辑上组织python代码(变量,函数,逻辑,类):本质就是为了实现一个功能(就是以.py结尾 ...
- 【python自动化第四篇：python入门进阶】
今天的课程总结: 装饰器 迭代器&生成器 json&pickle实现数据的序列化 软件目录结构规范 一.装饰器 装饰器的本质是函数,起目的就是用来为其它函数增加附加功能 原则:不能修改 ...
- Python 学习第十七天 jQuery
一,jQuery 知识详解 利用jquery 查找元素,操作元素 1,jquery 引入 <!DOCTYPE html> <html lang="en"> ...
- Python自动化 【第九篇】：Python基础-线程、进程及python GIL全局解释器锁
本节内容: 进程与线程区别 线程 a) 语法 b) join c) 线程锁之Lock\Rlock\信号量 d) 将线程变为守护进程 e) Event事件 f) queue队列 g) 生 ...
- Python自动化 【第二篇】：Python基础-列表、元组、字典
本节内容 模块初识 .pyc简介 数据类型初识 数据运算 列表.元组操作 字符串操作 字典操作 集合操作 字符编码与转码 一.模块初识 Python的强大之处在于他有非常丰富和强大的标准库和第三方库, ...
随机推荐
- CPU利用率异常的分析思路和方法交流探讨
CPU利用率异常的分析思路和方法交流探讨在生产运行当中,经常会遇到CPU利用率异常或者不符合预期的情况,此时,往往暗示着系统性能问题.那么究竟是核心应用的问题?是监控工具的问题?还是系统.硬件.网络层 ...
- AI(一)：概念与资讯
AI: Artificial Intelligence(人工智能),它是研究.开发用于模拟和扩展人的智能的理论.方法.技术及应用系统的一门新的技术科学,上个世纪50年代一次学术讨论会议上,下图中几位著 ...
- jquery特效大全
http://www.oschina.net/project/tag/300/jquery-effects
- python3-day1-python简介及入门
python简介及入门 python简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为 ...
- Android SQLite 通配符查询找不到参数问题
使用Android SQLite中SQLiteDatabase类的query方法查询时,如果where中包含通配符,则参数会无法设置,如类似下面的方法查询时 SQLiteDatabase db = d ...
- UTF-8编码的字符串拆分成单字、获取UTF-8字符串的字符个数的代码及原理
一.字符编码简介 1. ASCII码 在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(by ...
- [Linux] 关于Centos6中ulimit nproc用户进程数的限制
一.缘由: 在启动mongodb的时候,有Warning提示soft rlimits too low,就是用户使用进程数过小,遂调高系统资源关于用户最大进程数的限制ulimit -u. 先暂时使设置生 ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- lsyncd 实时同步
1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是inotify + rsync,但随着文件数量的增大到100W+,目录下的 ...
- iOS5.0以上使用新浪微博开放平台OAuth 续(及解决登录无效问题)
新浪微博开放平台为第三方应用提供了简便的合作模式,满足了手机用户和平板电脑用户随时随地分享信息的需求.通过调用平台的api即可实现很多微博上的功能. 本篇主要目的是记录新浪微博移动SDK iOS版本的 ...