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属性)

实例:多选,反选,全选

  

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input type="button" value="全选" onclick="checkAll();">
9 <input type="button" value="反选" onclick="reverseAll();">
10 <input type="button" value="取消" onclick="cancleAll();">
11 <table border="1">
12 <thead>
13 <tr>
14 <th>请选择</th><th>IP</th><th>Port</th>
15 </tr>
16 </thead>
17 <tbody id="tb">
18 <tr>
19 <td><input type="checkbox"></td>
20 <td>1.1.1.1</td>
21 <td>80</td>
22 </tr>
23 <tr>
24 <td><input type="checkbox"></td>
25 <td>1.1.1.1</td>
26 <td>80</td>
27 </tr>
28 <tr>
29 <td><input type="checkbox"></td>
30 <td>1.1.1.1</td>
31 <td>80</td>
32 </tr>
33 </tbody>
34 </table>
35 <script src="jquery-1.12.4.js"></script>
36 <script>
37 function checkAll() {
38 $('#tb :checkbox').prop('checked',true);
39 }
40 function cancleAll() {
41 $('#tb :checkbox').prop('checked',false);
42 }
43 function reverseAll() {
44 /*$('#tb :checkbox').each(function () {
45 var v = $(this).prop('checked')?false:true;
46 $(this).prop('checked',v);
47 });*/
48 $('#tb :checkbox').each(function () {
49 // dom操作:
50 // if(this.checked){
51 // this.checked = false;
52 // }else{this.checked = true;}
53
54 // jQuery操作:
55 // if ($(this).prop('checked')){
56 // $(this).prop('checked',false);
57 // }else{$(this).prop('checked',true);}
58
59 // 三元运算:
60 var v = $(this).prop('checked')?false:true;
61 $(this).prop('checked',v);});}
62 </script>
63 </body>
64 </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的标签

代码示例:(筛选器)

  

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .c1 {border: 1px solid #DDDDDD;
8 height: 400px;width: 200px;}
9 .item {color:white;}
10 .hide {display: none;}
11 </style>
12 </head>
13 <body class="c1">
14 <div>
15 <div class="item">标题一</div>
16 <div class="content">内容一</div>
17 </div>
18 <div>
19 <div class="item">标题二</div>
20 <div class="content hide">内容二</div>
21 </div>
22 <div>
23 <div class="item">标题三</div>
24 <div class="content hide">内容三</div>
25 </div>
26 <script src="jquery-1.12.4.js"></script>
27 <script>
28 $('.item').click(function () {
29 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
30 // $(this).next().removeClass('hide');
31 // $(this).parent().siblings().find('.content').addClass('hide')
32 })
33 </script>
34 </body>
35 </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) #设置值

模态对话框代码示例:

  

  1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide {
8 display: none;
9 }
10 .modal {
11 position: fixed;
12 width: 400px;
13 height: 200px;
14
15 top:50%;
16 left:50%;
17 margin-left: -250px;
18 margin-top: -200px;
19 z-index: 10;
20 }
21 .shadow {
22 position: fixed;
23 top:0;
24 right:0;
25 bottom:0;
26 left:0;
27 background-color: black;
28 opacity: 0.6;
29 z-index: 9;
30 }
31 .edit {
32 border-radius:2px;
33 border: 2px outset white;
34 cursor: pointer;
35 }
36 </style>
37 </head>
38 <body>
39 <div class="modal hide">
40 <div style="width: 250px;height: 150px;margin: 20px auto;">
41 Host:<input name="hostname" type="text"><p></p>
42 Port:<input name="port" type="text"><p></p>
43 IP:<input name="IP" type="text">
44 <p></p>
45 <input style="margin-left: 75px;" type="button" value="确定">
46 <input id="i2" type="button" value="取消">
47 </div>
48 </div>
49 <div class="shadow hide"></div>
50 <input id="i1" type="button" value="添加" >
51 <input type="button" value="全选" onclick="checkAll();">
52 <input type="button" value="反选" onclick="reverseAll();">
53 <input type="button" value="取消" onclick="cancleAll();">
54 <table border="1">
55 <thead>
56 <tr> <th>HostName</th><th>Port</th><th>IP</th><th>操作</th>
57 </tr>
58 </thead>
59 <tbody id="tb">
60 <tr>
61 <td target="hostname">1.1.1.1</td>
62 <td target="port">80</td>
63 <td target="IP">80</td>
64 <td>
65 <input type="button" class="edit" value="编辑"/>|<a>删除</a>
66 </td>
67 </tr>
68 <tr>
69 <td target="hostname">1.1.1.2</td>
70 <td target="port">80</td>
71 <td target="IP">80</td>
72 <td>
73 <input type="button" class="edit" value="编辑"/>|<a>删除</a>
74 </td>
75 </tr>
76 <tr>
77 <td target="hostname">1.1.1.3</td>
78 <td target="port">80</td>
79 <td target="IP">80</td>
80 <td>
81 <input type="button" class="edit" value="编辑"/>|<a>删除</a>
82 </td>
83 </tr>
84 </tbody>
85 </table>
86 <script src="jquery-1.12.4.js"></script>
87 <script>
88 $('#i1').click(function () {
89 $('.modal,.shadow').removeClass('hide')
90 });
91 $('#i2').click(function () {
92 $('.modal,.shadow') .addClass('hide')
93 $('.modal input[name="hostname"]').val("");
94 $('.modal input[name="port"]').val("");
95 $('.modal input[name="IP"]').val("");
96 });
97 $('.edit').click(function () {
98 $('.modal,.shadow').removeClass('hide');
99 var tds = $(this).parent().prevAll();
100 tds.each(function () {
101 var n = $(this).attr('target');
102 var text = $(this).text();
103 $('.modal input[name="'+n+'"]').val(text)
104 });});
105 </script>
106 </body>
107 </html>

  TAD切换菜单代码示例:

  

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .menu {
8 height: 38px;
9 line-height: 38px;}
10 .menu-item {
11 float: left;
12 border-right: 1px solid red;
13 padding: 0 10px;
14 cursor: pointer;}
15 .active {
16 }
17 .hide {
18 display: none;}
19 </style>
20 </head>
21 <body>
22 <div style="width:700px;margin: 100px auto;height: 500px;">
23 <div class="menu">
24 <div class="menu-item active" a="1">菜单一</div>
25 <div class="menu-item" a="2">菜单二</div>
26 <div class="menu-item" a="3">菜单三</div>
27 </div>
28 <div class="content" style="height: 300px;border: 1px solid #DDDDDD">
29 <div b="1">内容一</div>
30 <div class="hide" b="2">内容二</div>
31 <div class="hide" b="3">内容三</div>
32 </div>
33 </div>
34 <script src="jquery-1.12.4.js"></script>
35 <script>
36 $('.menu-item').click(function(){
37 $(this).addClass('active').siblings().removeClass('active');
38 $(".content").children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
39 });
40 </script>
41 </body>
42 </html>

  PS: index 获取索引位置

6.文档处理:

append    #在匹配标签的内部最下边添加标签

prepend   #在匹配标签的内部最上边添加标签

after      #在匹配标签外部后边追加标签

before     #在匹配标签外部前边追加标签

remove    #删除某个标签

empty      #清空标签内容,标签不删除

clone      #复制一个标签

7.css处理

$('.t1').css('样式名称', '样式值')

点赞代码示例:

  

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .container {padding: 50px;
8 border:1px solid #DDDDDD;}
9 .content {position: relative;
10 width:30px;}
11 </style>
12 </head>
13 <body>
14 <div class="container">
15 <div class="content">
16 <span>赞</span>
17 </div>
18 </div>
19 <div class="container">
20 <div class="content">
21 <span>赞</span>
22 </div>
23 </div>
24 <script src="jquery-1.12.4.js"></script>
25 <script>
26 $('.content').click(function () {
27 addFavor(this);});
28 function addFavor(self) {
29 var fontsize = 15;
30 var top = 0;
31 var right = 0;
32 var opacity = 1;
33 var tag = document.createElement('i');
34 $(tag).text('+1');
35 $(tag).css('color','green');
36 $(tag).css('position','absolute');
37 $(tag).css('fontsize',fontsize + 'px');
38 $(tag).css('top',top + 'px');
39 $(tag).css('right',right + 'px');
40 $(tag).css('opacity',opacity);
41 $(self).append(tag);
42 var obj = setInterval(function () {
43 fontsize = fontsize + 10;
44 top -= 10;right -= 10;opacity -= 0.2;
45 $(tag).css('fontSize',fontsize + 'px');
46 $(tag).css('top',top + 'px');
47 $(tag).css('right',right + 'px');
48 $(tag).css('opacity',opacity);
49 if (opacity < 0) {
50 clearInterval(obj);
51 $(tag).remove();}},100)}
52 </script>
53 </body>
54 </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标签)的坐标

移动面板代码示例:

  

 1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
9 <div id="title" style="height: 40px;"></div>
10 <div style="height: 300px;"></div>
11 </div>
12 <script type="text/javascript" src="jquery-1.12.4.js"></script>
13 <script>
14 $(function(){
15 $('#title').mouseover(function(){
16 $(this).css('cursor','move');
17 }).mousedown(function(e){
18 //console.log($(this).offset());
19 var _event = e || window.event;
20 var ord_x = _event.clientX;
21 var ord_y = _event.clientY;
22 var parent_left = $(this).parent().offset().left;
23 var parent_top = $(this).parent().offset().top;
24 $(this).bind('mousemove', function(e){
25 var _new_event = e || window.event;
26 var new_x = _new_event.clientX;
27 var new_y = _new_event.clientY;
28 var x = parent_left + (new_x - ord_x);
29 var y = parent_top + (new_y - ord_y);
30 $(this).parent().css('left',x+'px');
31 $(this).parent().css('top',y+'px');})
32 }).mouseup(function(){
33 $(this).unbind('mousemove');});})
34 </script>
35 </body>
36 </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     执行:$(..).方法

  第一种调用方法示例:

  

 1 <script src="jquery-1.12.4.js"></script>
2 <script>
3 // $('#i1').css();
4 // $.ajax();
5 // jQuery扩展
6 $.extend({
7 'test':function () {
8 return 'success';}});
9 $.text(); //直接调用test方法
10 </script>

  第二种调用方法示例:

  

1 <script src="jquery-1.12.4.js"></script>
2 <script>
3 $.fn.extend({
4 'test':function () {
5 return 'success';}}); //必须是$.fn.extend()
6 $('#i1').text(); //必须选中某个标签后才可以调用
7 </script>

还可以上网找各种jQuery扩展,解决不同jQuery之间(插件和插件间)全局变量和函数名称冲突的方法(将变量和函数封装在自执行函数里):

(function(arg){

var status = 1;

// 封装变量

})(jQuery)   #或者传 $,实参是将参数传递给自执行函数

python自动华 (十七)的更多相关文章

  1. python自动华 (十八)

    Python自动化 [第十八篇]:JavaScript 正则表达式及Django初识 本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../  用于定 ...

  2. python自动华 (十二)

    Python自动化 [第十二篇]:Python进阶-MySQL和ORM 本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增 ...

  3. python自动华 (十)

    Python自动化 [第十篇]:Python进阶-多进程/协程/事件驱动与Select\Poll\Epoll异步IO 本节内容: 多进程 协程 事件驱动与Select\Poll\Epoll异步IO   ...

  4. python自动华 (八)

    Python自动化 [第八篇]:Python基础-Socket编程进阶 本节内容: Socket语法及相关 SocketServer实现多并发 1. Socket语法及相关 sk = socket.s ...

  5. python自动华 (七)

    Python自动化 [第七篇]:Python基础-面向对象高级语法.异常处理.Scoket开发基础 本节内容: 1.     面向对象高级语法部分 1.1   静态方法.类方法.属性方法 1.2   ...

  6. python自动华 (六)

    Python自动化 [第六篇]:Python基础-面向对象   目录: 面向过程VS面向对象 面向对象编程介绍 为什么要用面向对象进行开发 面向对象的特性:封装.继承.多态 面向过程 VS 面向对象 ...

  7. python自动华 (三)

    Python自动化 [第三篇]:Python基础-集合.文件操作.字符编码与转码.函数 1.        集合 1.1      特性 集合是一个无序的,不重复的数据组合,主要作用如下: 去重,把一 ...

  8. python自动华 (二)

    Python自动化 [第二篇]:Python基础-列表.元组.字典 本节内容 模块初识 .pyc简介 数据类型初识 数据运算 列表.元组操作 字符串操作 字典操作 集合操作 字符编码与转码 一.模块初 ...

  9. python自动华 (十六)

    Python自动化 [第十六篇]:JavaScript作用域和Dom收尾 本节内容: javascript作用域 DOM收尾 JavaScript作用域 JavaScript的作用域一直以来是前端开发 ...

随机推荐

  1. 使用 netkeeper 创翼网速慢解决方案(13)

    1. 方法1 步骤: 卸载Netkeeper,并删除 卸载以太网(本地连接)驱动 重置网络 重启 重新安装Netkeeper.如果登录出错,卸载「IP,IPv6,Network Monitor」,然后 ...

  2. 汉字在unicode中的位置

    在www.unicode.org中查找汉字.china找不到,后来查资料才明白,应该查CJK,为什么内? unicode这个组织吧中国日本韩国的字合并了   中日韩统一表意文字(CJK Unified ...

  3. 笔记-5:mysql数据更新

    1.插入数据 1.1 插入完整的数据 # 语法格式: INSERT INTO tb_name(column_list) VALUES(value_list); tb_name:指定要插入数据的表名. ...

  4. 十三、GPIO子系统

    由于之后的触摸屏驱动分析中使用到了GPIO子系统和i2c子系统,因此在分析触摸屏驱动之前我准备把这两个子系统进行简单分析. 之前我们使用GPIO引脚的方式并不是推荐的方式,当我们更改某一bit时,很有 ...

  5. linux时间同步ntpdate

    1.安装ntpdate,执行以下命令 yum install ntpdate -y 2.手工同步网络时间,执行以下命令,将从time.nist.gov同步时间 ntpdate 0.asia.pool. ...

  6. 将mdf文件copy到docker对应的目录下

    将mdf文件copy到docker对应的目录下: (<Docker-Container ID> 需要整体替换) docker cp /Users/Jay/Works/db/MyPost.m ...

  7. Java Web 深入分析(8) Servlet工作原理解析

    Servlet Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交互式地浏览和修改数据,生成动态We ...

  8. Linux 命令行:cURL 的十种常见用法

    Linux 命令行:cURL 的十种常见用法 文章目录 1. 获取页面内容 2. 显示 HTTP 头 3. 将链接保存到文件 4. 同时下载多个文件 5. 使用 -L 跟随链接重定向 6. 使用 -A ...

  9. springboot启动流程(七)ioc容器refresh过程(上篇)

    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 在前面的几篇文章中,我们看到Environment创建.application配置文件的 ...

  10. css:display:grid布局

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...