Python自动化运维 - day15 - jQuery基础
jQuery介绍
jQuery作为一个JavaScript函数库，极大地简化了JavaScript 编程。
什么是 jQuery ？
通俗的话来讲的话：jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
它包含但不仅限于以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
为什么使用 jQuery ？
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
兼容性
jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，可以使用1.9版本。
如何引入jQuery？
只需要在你的代码中，像引入其他js文件一样即可。当然你可以选择下载jQuery文件，然后引入，又或者使用提供的CDN进行引入。
// 本地文件
// 百度CDN
其他的静态资源CDN如：
http://cdn.code.baidu.com // 百度的，版本较老
http://www.bootcdn.cn/jquery/ // 国内其他CDN站，版本较新
用CDN的优势时，如果用户访问的其他站点，已经保存了对应的资源，那么访问我们网站就可以直接使用缓存了。
jQuery的使用
鉴于jQuery是一个javascript的类库，它内部封装了很多javascript的操作，接下来的基本使用，会结合这javascript，对javascript不熟的请查看上一篇javascript基础。
在javascript中，我们主要的操作逻辑是查找标签，然后对其做一些函数或者参数的绑定，以及动态效果。所以在javascript存在一个标签的DOM对象，就是我们通过document.getElementXXXX找到的标签对象。
在jQuery中是一样的逻辑，只不过jQuery整体做了一个封装，在页面上，使用jQuery关键字或者使用$,表示使用jQuery对象($ == jQuery)。
// javascript
var tag = document.getElementById('id1')
// jQuery
var tag = $('#id1') 或者 jQuery('#id1')
PS：jQuery是javascript的封装，所以说，它俩是可以互相转换的。
// jQuery --> javascript
$('id1')[0]
// javascript --> jQuery
var d = document.getElemetById('id1')
$(d)
根据上面的例子得知，jQuery查找到的东西，比javascript要更多一些。
标签的查找
可以说jQuery封装的标签查找，和css的标签查找很像，只需要在$()添加选择器即可。
常用的标签查找
$('.class') // 按照class查找
$('#id') // 按照id查找
$('tagname') // 按照标签名查找
$('a,.class') // 组合选择器，只需要用逗号隔开即可
$('#id tagname') // 查找目前标签的子孙中包含，标签类型是tagname的标签
$('#id > child') // 在目标标签中，只查找儿子标签
$('#id + next') // 目标标签的下一个标签
$('#id ~ siblings') // 目标标签的之后的所有兄弟标签(同级)
常用的组合筛选器
$('a:first') // 找到的标签中的第一个
$('a:last') // 找到的a标签的最后一个，前面可以是任意标签选择器
// 根据上面的例子可以得知，筛选器就是在标签后面使用:分割，然后添加一些筛选的功能
:even // 表示奇数的标签
:odd // 表示偶数的标签
:eq(index) // 使用索引进行过滤，索引值从0开始 (有些方法索引并不是从0开始的)
:lt(index) // 索引小于多少的,不包含index本身
:gt(index) // 索引大于多少的，不好含index本身
常用属性选择器
$('[属性]') // 查找所有具有属性名的标签
$("[属性='值']") // 根据属性对应的值进行查找
$("a[属性='值']") // 查找a标签中属性对应的值的标签，可以组合其他类型的选择器
表单选择器
$(':input') // 查找form中 所有的input标签
$(':text') // 其他的类似
$(':password')
$(':radio')
$(':checkbox')
$(':image')
$(':file')
$(':button')
表单对象属性
$(':enabled') // 具有enabled属性的标签，input默认的属性，表示可以编辑
$(':disabled') // 具有disabled属性的标签，input的属性，表示不可以编辑
$(':checked') // 具有ckecked属性的表壳，比如checkbox默认的选中
$(':selected') // 具有selected属性的标签，比如select的默认选中
筛选器
对查找到的标签进行二次筛选等
PS：jQuery支持链式调用，即可以在一行中组合多个筛选器或者赋值操作等。简而言之就是可以一直点下去。
过滤
eq(index|-index) // 筛选索引等于几的标签，和前面说的:eq() 没有实质上的区别，要说有，就是写法不同而已。
first() // 查找出来的第一个标签
last() // 最后一个标签
hasClass(class) // 筛选具有class的标签
例子：
$('.header').last() // last的括号里面不能加额外的选择器
$('.header').first() // 同上
筛选
children([expr]) // 所有的孩子标签
find(e|o|e) // 在孩子中查找某一个标签
next([expr]) // 查找到标签的下一个标签
nextALL([expr]) // 查找到标签的下面的所有标签，同级别
nextUntil([expr]) // 查找到标签的下面直到某个标签
parent([expr]) // 查找到的标签的父亲
parents([expr]) // 嵌套时的所有父亲标签，默认到html
parentsUntil([expr]) // 嵌套时的所有父亲标签直到某个标签
prev([expr]) // 查找到标签的上一个标签
prevALL([expr]) // 查找到标签的上面的所有标签，同级别
prevUntil([expr]) // 查找到标签的上面的直到某个标签
siblings([expr]) // 查找到标签的所有兄弟标签
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 .menu { 8 border: 1px red solid; 9 width:300px; 10 height: 600px; 11 } 12 a{ 13 display: block; 14 } 15 .header{ 16 background: darkgray; 17 } 18 .hide { 19 display: none; 20 } 21 style> 22 head> 23 <body> 24 <div class="menu"> 25 <div class="item"> 26 <div class="header">菜单1div> 27 <div class="content"> 28 <a href="#">1a> 29 <a href="#">1a> 30 <a href="#">1a> 31 div> 32 div> 33 <div class="item"> 34 <div class="header">菜单2div> 35 <div class="content hide"> 36 <a href="#">2a> 37 <a href="#">2a> 38 <a href="#">2a> 39 div> 40 div> 41 <div class="item"> 42 <div class="header">菜单3div> 43 <div class="content hide"> 44 <a href="#">3a> 45 <a href="#">3a> 46 <a href="#">3a> 47 div> 48 div> 49 div> 50 51 <script src="jquery-3.1.1.js">script> 52 <script> 53 $('.header').click(function () { // 不用进行循环，jQuery在内部会循环的绑定事件 54 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); // 链式操作 55 }) 56 script> 57 58 body> 59 html>
循环
当我们查找到多个标签后做批量操作的话，javascript就需要进行循环才能批量操作了，而在jQuery中针对不同的情况有两种形式：
// 方式1
如果对多个标签做批量相同操作，那么直接调用对应的方法即可(方法内部会进行循环操作)
// 方式2
如果不不是批量操作，比如有条件的操作就需要使用each方法
$('.class').each(function(k) { // 这里的k表示索引，可以接受，也可以不接受，看需求
console.log(this) // 这里的this表示的就是当前循环的标签本身，是一个DOM对象
$(this) // 就可以把DOM对象转换为jQuery对象
})
// each接受一个函数，表示每次循环都执行这个函数1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 <input type="button" value="全选" onclick="checkALL()"> 9 <input type="button" value="反选" onclick="reverseALL()"> 10 <input type="button" value="取消" onclick="cancelALL()"> 11 <table border="1px" id="tb"> 12 <thead> 13 <tr> 14 <th>序号th> 15 <th>IPth> 16 <th>端口th> 17 tr> 18 thead> 19 <tbody id="tbody"> 20 <tr> 21 <td><input type="checkbox">td> 22 <td>1.1.1.1td> 23 <td>80td> 24 tr> 25 <tr> 26 <td><input type="checkbox">td> 27 <td>2.2.2.2td> 28 <td>8080td> 29 tr> 30 <tr> 31 <td><input type="checkbox">td> 32 <td>3.3.3.3td> 33 <td>8443td> 34 tr> 35 tbody> 36 table> 37 <script src="jquery-3.1.1.js">script> 38 <script> 39 function checkALL() { 40 // $(':checkbox') 也可以，但是如果页面上的checkbox多了，就不太好了 41 $("#tbody input[type='checkbox']").prop('checked', true); 42 } 43 function cancelALL() { 44 $("#tbody input[type='checkbox']").prop('checked', false); 45 } 46 function reverseALL() { 47 $("#tbody input[type='checkbox']").each(function () { 48 if ($(this).prop('checked')) { 49 $(this).prop('checked',false) 50 } else { 51 $(this).prop('checked',true) 52 } 53 }) 54 55 } 56 script> 57 body> 58 html>
PS：jQuery对象.prop() 针对于selected/checked，用来获取其值，选中表示true，否则表示false，当传递一个参数时表示获取，两个参数时表示设置。
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 <input type="button" value="全选" onclick="checkALL()"> 9 <input type="button" value="反选" onclick="reverseALL()"> 10 <input type="button" value="取消" onclick="cancelALL()"> 11 <table border="1px" id="tb"> 12 <thead> 13 <tr> 14 <th>序号th> 15 <th>IPth> 16 <th>端口th> 17 tr> 18 thead> 19 <tbody id="tbody"> 20 <tr> 21 <td><input type="checkbox">td> 22 <td>1.1.1.1td> 23 <td>80td> 24 tr> 25 <tr> 26 <td><input type="checkbox">td> 27 <td>2.2.2.2td> 28 <td>8080td> 29 tr> 30 <tr> 31 <td><input type="checkbox">td> 32 <td>3.3.3.3td> 33 <td>8443td> 34 tr> 35 tbody> 36 table> 37 38 39 <input type="text" id ='id3'> 40 <script src="jquery-3.1.1.js">script> 41 <script> 42 function checkALL() { 43 // $(':checkbox') 也可以，但是如果页面上的checkbox多了，就不太好了 44 $("#tbody input[type='checkbox']").prop('checked', true); 45 } 46 function cancelALL() { 47 $("#tbody input[type='checkbox']").prop('checked', false); 48 } 49 function reverseALL() { 50 $("#tbody input[type='checkbox']").each(function () { 51 var v = $(this).prop('checked')?false:true // 为真时赋值false，为假时赋值true。达到取反的功能 52 $(this).prop('checked',v) 53 }) 54 } 55 script> 56 body> 57 html>
标签操作
对找到的标签进行操作，比如属性的添加，文本的修改，样式的修改等
创建标签
var li = $(''); // 创建一个jQuery标签对象li
li.text(test); // 设置li标签的value
li.attr('name','daxin'); // 设置li标签的name属性 文本内容操作
$(..).text('string') // 不加参数表示获取标签内的文本内容，添加参数表示设置文本内容
$(..).html('string or label') // 不加参数表表示获取标签内的内容，包含html标签，添加参数表示设置标签内容
// 针对input系列来说
$(..).val() // 不加参数表示获取标签输入框的内容，添加参数表示设置数据框内容1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 .hide { 8 display: none; 9 } 10 11 label { 12 display: inline-block; 13 width: 70px; 14 text-align: right; 15 } 16 17 .motaibutton { 18 width: 200px; 19 text-align: right; 20 } 21 22 .motaiback { 23 position: fixed; 24 top: 0; 25 bottom: 0; 26 right: 0; 27 left: 0; 28 opacity: 0.6; 29 background-color: #000000; 30 z-index: 9; 31 } 32 33 .motaiinfo { 34 width: 400px; 35 height: 300px; 36 position: fixed; 37 top: 50%; 38 left: 50%; 39 margin-top: -150px; 40 margin-left: -200px; 41 background-color: white; 42 z-index: 10; 43 } 44 style> 45 head> 46 <body> 47 48 <input type="button" value="添加" id="addFunc"> 49 <table border="1px"> 50 <thead> 51 <tr> 52 <th>序号th> 53 <th>IPth> 54 <th>Portth> 55 <th>操作th> 56 tr> 57 thead> 58 <tbody> 59 <tr> 60 <td>1td> 61 <td>1.1.1.1td> 62 <td>80td> 63 <td><input class='modifyFunc' type="button" value="编辑">td> 64 tr> 65 <tr> 66 <td>2td> 67 <td>2.2.2.2td> 68 <td>8080td> 69 <td><input class='modifyFunc' type="button" value="编辑">td> 70 tr> 71 <tr> 72 <td>3td> 73 <td>3.3.3.3td> 74 <td>8443td> 75 <td><input class='modifyFunc' type="button" value="编辑">td> 76 tr> 77 tbody> 78 table> 79 80 <div class="motaiback hide">div> 81 <div class="motaiinfo hide"> 82 <p> 83 <label for="hostname">主机IP：label> 84 <input type="text" id="hostname"> 85 p> 86 <p> 87 <label for="port">端口：label> 88 <input type="text" id="port"> 89 p> 90 <div class='motaibutton'> 91 <input type="button" value="确定"> 92 <input type="button" value="取消" id="cancelFunc"> 93 div> 94 95 div> 96 97 98 <script src="jquery-3.1.1.js">script> 99 <script> 100 $('#addFunc').click(function () { 101 $('.motaiback,.motaiinfo').removeClass('hide') 102 }); 103 104 $('#cancelFunc').click(function () { 105 $('.motaiback,.motaiinfo').addClass('hide'); 106 $(".motaiinfo input[type ='text']").val(''); // 取消时删除模态框中标签的内容 107 }); 108 109 $('.modifyFunc').click(function () { 110 $('.motaiback,.motaiinfo').removeClass('hide'); 111 var td_list = $(this).parent().prevAll(); // 获取本行其他标签的值 112 var port = $(td_list[0]).text(); 113 var hostname = $(td_list[1]).text(); 114 $('#hostname').val(hostname); 115 $('#port').val(port); 116 }) 117 script> 118 body> 119 html>
class类操作
$(..).addClass('className') // 为标签对象添加class属性
$(..).removeClass('className') // 为标签对象移除class属性
$(..).hasClass('className') // 判断标签是否含有class属性，返回bool
$(..).toggleClass('className') // 如果标签对象存在class属性那么会删除，不存在则加上1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 body { 8 background-color: #000000; 9 } 10 11 .white { 12 background-color: white; 13 } 14 style> 15 head> 16 <body> 17 <input type="button" value="开灯" id="switch"> 18 body> 19 <script src='jquery-3.1.1.js'>script> 20 <script> 21 $('#switch').click(function () { 22 $('body').toggleClass('white'); 23 }); 24 25 // 效果等同于 26 $('#switch').click(function () { 27 if ($('body').hasClass('white')) { 28 $('body').removeClass('white') 29 } else { 30 $('body').addClass('white') 31 } 32 }); 33 34 35 script> 36 html>
属性操作
$(..).attr('value') // 用来获取自定义属性的值
$(..).attr('value','值') // 用来设置标签的属性及其值
$(..).removeAttr('value') // 删除标签的属性
$(..).prop('checked') // 专门用于checkbox，radio，设置checked等属性的
$(..).prop('checked',true) 注意：
1、虽然我们可以利用attr(),来设置checkbox的checked等属性(select的selected)，但是在jQuery的1，2版本，会有bug，即：多次选中取消，会失效（3版本已经修复了）
2、针对checked类似的这种属性，使用prop()即可。
前面的模态对话框之编辑框中，获取表示是通过索引进行获取的，如果html元素进行修改，那么js也要做相应的修改，这太不方便了，所以进行如下修改，基于属性的操作：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 .hide { 8 display: none; 9 } 10 11 label { 12 display: inline-block; 13 width: 70px; 14 text-align: right; 15 } 16 17 .motaibutton { 18 width: 200px; 19 text-align: right; 20 } 21 22 .motaiback { 23 position: fixed; 24 top: 0; 25 bottom: 0; 26 right: 0; 27 left: 0; 28 opacity: 0.6; 29 background-color: #000000; 30 z-index: 9; 31 } 32 33 .motaiinfo { 34 width: 400px; 35 height: 300px; 36 position: fixed; 37 top: 50%; 38 left: 50%; 39 margin-top: -150px; 40 margin-left: -200px; 41 background-color: white; 42 z-index: 10; 43 } 44 style> 45 head> 46 <body> 47 48 <input type="button" value="添加" id="addFunc"> 49 <table border="1px"> 50 <thead> 51 <tr> 52 <th>序号th> 53 <th>IPth> 54 <th>Portth> 55 <th>操作th> 56 tr> 57 thead> 58 <tbody> 59 <tr> 60 <td>1td> 61 <td target="hostname">1.1.1.1td> 62 <td target="port">80td> 63 <td><input class='modifyFunc' type="button" value="编辑">td> 64 tr> 65 <tr> 66 <td>2td> 67 <td target="hostname">2.2.2.2td> 68 <td target="port">8080td> 69 <td><input class='modifyFunc' type="button" value="编辑">td> 70 tr> 71 <tr> 72 <td>3td> 73 <td target="hostname">3.3.3.3td> 74 <td target="port">8443td> 75 <td><input class='modifyFunc' type="button" value="编辑">td> 76 tr> 77 tbody> 78 table> 79 80 <div class="motaiback hide">div> 81 <div class="motaiinfo hide"> 82 <p> 83 <label for="hostname">主机IP：label> 84 <input type="text" id="hostname"> 85 p> 86 <p> 87 <label for="port">端口：label> 88 <input type="text" id="port"> 89 p> 90 <div class='motaibutton'> 91 <input type="button" value="确定"> 92 <input type="button" value="取消" id="cancelFunc"> 93 div> 94 95 div> 96 97 98 <script src="jquery-3.1.1.js">script> 99 <script> 100 $('#addFunc').click(function () { 101 $('.motaiback,.motaiinfo').removeClass('hide') 102 }); 103 104 $('#cancelFunc').click(function () { 105 $('.motaiback,.motaiinfo').addClass('hide'); 106 $(".motaiinfo input[type ='text']").val(''); // 取消时删除模态框中标签的内容 107 }); 108 109 $('.modifyFunc').click(function () { 110 $('.motaiback,.motaiinfo').removeClass('hide'); 111 var td_list = $(this).parent().prevAll(); 112 td_list.each(function () { 113 if ($(this).attr('target')) { 114 var attr = $(this).attr('target'); 115 var text = $(this).text(); 116 // var a1 = '.motaiinfo input[id="'; 117 // var a2 = '"]'; 118 // var temp = a1 + attr + a2; 119 // $(temp).val(text); // 这4行，利用下面一行就可以搞定 120 $('.motaiinfo input[id="'+ attr +'"]').val(text); // 这里使用字符串拼接，来查找模态对话框的输入框 121 } 122 123 }) 124 }); 125 126 127 script> 128 body> 129 html>
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 *{ 8 margin:0; 9 padding: 0; 10 } 11 .info { 12 width:450px; 13 height:400px; 14 margin:100px auto; 15 border:1px red solid; 16 17 } 18 .menu { 19 width:150px; 20 height:50px; 21 line-height:50px; 22 display: inline-block; 23 cursor: pointer; 24 text-align: center; 25 margin-right:-6px; 26 } 27 .hide { 28 display: none; 29 } 30 .active { 31 background-color: darkred; 32 } 33 .content { 34 background: darkgray; 35 width:450px; 36 height:300px; 37 } 38 style> 39 head> 40 <body> 41 42 <div class="info"> 43 <div class="header"> 44 <div class="menu" name="page-1">菜单1div> 45 <div class="menu" name="page-2">菜单2div> 46 <div class="menu" name="page-3">菜单3div> 47 div> 48 <div class="foot"> 49 <div class="content" name="page-1">内容1div> 50 <div class="content hide" name="page-2">内容2div> 51 <div class="content hide" name="page-3">内容3div> 52 div> 53 div> 54 55 <script src="jquery-3.1.1.js">script> 56 <script> 57 $('.menu').click(function () { 58 $(this).addClass('active').siblings().removeClass('active'); 59 var name = $(this).attr('name'); 60 $('.foot').children('.content[name="'+ name +'"]').removeClass('hide').siblings().addClass('hide'); 61 }) 62 script> 63 64 65 body> 66 html>
文档处理
$(..).append() // 在标签内部，尾部进行追加
$(..).prepend() // 在标签的内部，首部进行追加
$(..).after() // 在标签的后面进行追加
$(..).before // 在标签的前面继续追加
$(..).remove() // 删除该标签
$(..).empty() // 情况该标签内容
$(..).clone() // 复制标签
$(..).index() // 获取当前标签对于父级标签的索引
// 针对操作的对象不同还有两个方法
$(..).appendTo() // 把当前标签，追加到某个标签的尾部
$(..).prependTo() // 把当前标签，追加到某个标签的首部1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 9 <input type="text" id="content"> 10 <input type="button" value="添加" id="add"> 11 <input type="button" value="删除" id="del"> 12 13 <ul id="ul"> 14 <li>1li> 15 <li>2li> 16 ul> 17 <script src="jquery-3.1.1.js">script> 18 <script> 19 $('#add').click(function () { 20 var test = $('#content').val(); 21 var li = $(''); 22 li.text(test); 23 li.attr('name','daxin'); 24 $('#ul').append(li); 25 }); 26 $('#del').click(function () { 27 var test = $('#content').val(); 28 $('#ul').children().eq(test).remove() 29 }) 30 script> 31 body> 32 html>
CSS操作
$(..).css('key','value') // 设置标签的css属性
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 .hide { 8 display: none; 9 } 10 11 label { 12 display: inline-block; 13 width: 70px; 14 text-align: right; 15 } 16 17 .motaibutton { 18 width: 200px; 19 text-align: right; 20 } 21 22 .motaiback { 23 position: fixed; 24 top: 0; 25 bottom: 0; 26 right: 0; 27 left: 0; 28 opacity: 0.6; 29 background-color: #000000; 30 z-index: 9; 31 } 32 33 .motaiinfo { 34 width: 400px; 35 height: 300px; 36 position: fixed; 37 top: 50%; 38 left: 50%; 39 margin-top: -150px; 40 margin-left: -200px; 41 background-color: white; 42 z-index: 10; 43 } 44 style> 45 head> 46 <body> 47 48 <input type="button" value="添加" id="addFunc"> 49 <table border="1px" id="tb"> 50 <thead> 51 <tr> 52 <th>序号th> 53 <th>IPth> 54 <th>Portth> 55 <th>操作th> 56 tr> 57 thead> 58 <tbody> 59 <tr> 60 <td>1td> 61 <td target="hostname">1.1.1.1td> 62 <td target="port">80td> 63 <td><input class='modifyFunc' type="button" value="编辑">td> 64 tr> 65 <tr> 66 <td>2td> 67 <td target="hostname">2.2.2.2td> 68 <td target="port">8080td> 69 <td><input class='modifyFunc' type="button" value="编辑">td> 70 tr> 71 <tr> 72 <td>3td> 73 <td target="hostname">3.3.3.3td> 74 <td target="port">8443td> 75 <td><input class='modifyFunc' type="button" value="编辑">td> 76 tr> 77 tbody> 78 table> 79 80 <div class="motaiback hide">div> 81 <div class="motaiinfo hide"> 82 <p> 83 <label for="hostname">主机IP：label> 84 <input type="text" id="hostname"> 85 p> 86 <p> 87 <label for="port">端口：label> 88 <input type="text" id="port"> 89 p> 90 <div class='motaibutton'> 91 <input type="button" value="确定" id="addHost"> 92 <input type="button" value="取消" id="cancelFunc"> 93 div> 94 95 div> 96 97 98 <script src="jquery-3.1.1.js">script> 99 <script> 100 $('#addFunc').click(function () { 101 $('.motaiback,.motaiinfo').removeClass('hide') 102 }); 103 104 $('#cancelFunc').click(function () { 105 $('.motaiback,.motaiinfo').addClass('hide'); 106 $(".motaiinfo input[type ='text']").val(''); // 取消时删除模态框中标签的内容 107 }); 108 109 $('.modifyFunc').click(function () { 110 $('.motaiback,.motaiinfo').removeClass('hide'); 111 var td_list = $(this).parent().prevAll(); 112 td_list.each(function () { 113 if ($(this).attr('target')) { 114 var attr = $(this).attr('target'); 115 var text = $(this).text(); 116 $('.motaiinfo input[id="'+ attr +'"]').val(text); // 这里使用字符串拼接，来查找模态对话框的输入框 117 } 118 119 }) 120 }); 121 122 $('#addHost').click(function () { 123 var td_list = []; 124 $('.motaiinfo').find('[type="text"]').each(function () { 125 var attr = $(this).attr('id'); 126 var attr_val = $(this).val(); 127 var td = document.createElement('td'); 128 $(td).attr('target',attr); 129 $(td).text(attr_val); 130 td_list.push(td) // 创建好的td标签添加到td_list存储 131 }); 132 var tr = document.createElement('tr'); 133 $(tr).append(td_list); // td加入到tr中 134 $('#tb').append(tr); // tr加入到table中 135 $('.motaiback,.motaiinfo').addClass('hide'); 136 $(".motaiinfo input[type ='text']").val(''); 137 }) 138 139 140 141 script> 142 body> 143 html>
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <style> 7 .main { 8 width: 600px; 9 height: 400px; 10 margin: 0 auto; 11 border: 1px solid darkgray; 12 } 13 14 .content { 15 margin: 20px 0; 16 width: 40px; 17 cursor: pointer; 18 position: relative; 19 } 20 21 style> 22 head> 23 <body> 24 <div class="main"> 25 <div class="content"> 26 <span class="zan">赞span> 27 div> 28 <div class="content"> 29 <span class="zan">赞span> 30 div> 31 <div class="content"> 32 <span class="zan">赞span> 33 div> 34 <div class="content"> 35 <span class="zan">赞span> 36 div> 37 div> 38 <script src="jquery-3.1.1.js">script> 39 <script> 40 $('.zan').click(function () { 41 var span = document.createElement('span'); 42 var top = 0; 43 var right = 0; 44 var fontSize = 16; 45 var opacity = 1; 46 47 $(span).css('position', 'absolute'); 48 $(span).css('color', 'green'); 49 $(span).css('top', top + 'px'); 50 $(span).css('right', right + 'px'); 51 $(span).css('fontSize', fontSize + 'px'); 52 $(span).css('opacity', opacity); 53 $(span).text('+1'); 54 $(this).append(span); 55 56 var obj = setInterval(function () { // 利用定时器来调整标签的动态效果 57 top -= 10; 58 right -= 10; 59 fontSize += 5; 60 opacity -= 0.1; 61 console.log(opacity); 62 $(span).css('position', 'absolute'); 63 $(span).css('color', 'green'); 64 $(span).css('top', top + 'px'); 65 $(span).css('right', right + 'px'); 66 $(span).css('fontSize', fontSize + 'px'); 67 $(span).css('opacity', opacity); 68 69 if (opacity < 0) { 70 clearInterval(obj); // 清除定时器 71 $(span).remove(); // 删除标签 72 } 73 }, 100) 74 75 76 }) 77 script> 78 79 body> 80 html>
位置操作
$(..).scrollTop() // 获取滚轮距离顶部的位置
$(..).scrollLeft() // 获取滚轮距离左边的位置
$(..).offset() // 获取标签对象的偏移量，即标签在文档中的位置,以标签的左上角进行定位
$(..).offset().top() // 获取标签距离顶部的位置
$(..).offset().left() // 获取标签距离左边的位置
$(..).position() // 获取当前标签距离其含有position:relative属性的父标签的坐标
$(..).position().left()
$(..).position().top()
// 不加参数表示获取，加参数表示设置PS：$(window).scrollTop(),表示的是整个页面的滚轮，对象不同,那么作用效果就不同。
高度操作
$(..).height() // 获取 height 属性的值
$(..).innerHeight() // 获取 height + border 的值
$(..).outerHeight() // 获取 height + border + padding 的值
$(..).outerHeight(true) // 获取 height + border + padding + margin 的值
PS：padding 内边距，margin 外边距
事件绑定
我们javascript中列举了DOM绑定事件的方式，有三种，下面看一下jQuery绑定事件的方式
$(..).click(function() {} )
$(..).bind('click',function() {} ) // 绑定
$(..).unbind('click',function() {}) // 解绑
$(..).delegate('a','click',function() {} ) // 为标签下的a标签绑定事件
$(..).undelegate('a','click',function() {} ) // 解绑
$(..).on('click',function(){})
$(..).off('click',function(){})
PS：click、bind、delegate绑定事件在内部，其实调用的都是on方法进行绑定的。
注意：这里的delegate，叫做事件委派，比如利用模态对话框进行标签添加的时候，新添加的标签是没有办法按照之前的绑定规则绑定标签的，因为绑定的时候，我们增加的标签还没有在页面上生成，这就需要利用事件委派了，即在点击的时候才进行标签绑定.
// 事件委派方式一
$('ul').delegate('li','click',function () {
alert($(this).text())
})
// 事件委派方式二
$('ul').on('click','li',function () {
alert($(this).text());
}); // on标签处理的事件要是目标标签的父标签,这样才能委派1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <script src="jquery-3.1.1.js">script> 7 8 head> 9 <body> 10 <ul> 11 <li>111li> 12 <li>222li> 13 <li>333li> 14 ul> 15 <button class="button">ADDbutton> 16 17 <script> 18 // 绑定方法 19 $('button').on('click',function () { 20 $('ul').append('444 '); 21 }); // 通过父标签来添加子标签 22 23 24 // $('ul').on('click','li',function () { 25 // alert($(this).text()); 26 // }); // on标签处理的事件要是目标标签的父标签 27 $('ul').delegate('li','click',function () { 28 alert($(this).text()) 29 }) 30 31 script> 32 body> 33 html>
事件类型
jQuery事件对DOM事件继续了封装，去掉了DOM事件中的on关键字。
blur([[data],fn]) // 当元素失去焦点时触发 blur 事件。
change([[data],fn]) // 当元素的值发生改变时，会发生 change 事件。
click([[data],fn]) // 当元素被点击时，触发 click 事件。
dblclick([[data],fn]) // 当元素被双击时，触发 click 事件。
focus([[data],fn]) // 当元素获得焦点时，触发 focus 事件。
focusin([data],fn) // 当元素获得焦点时，触发 focusin 事件。跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn) // 当元素失去焦点时触发 focusout 事件。跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn]) // 当键盘或按钮被按下时，发生 keydown 事件。
keypress([[data],fn]) // 当键盘或按钮被按下时，发生 keypress 事件。
keyup([[data],fn]) // 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn]) // 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter([[data],fn]) // 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mouseleave([[data],fn]) // 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
mousemove([[data],fn]) // 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout([[data],fn]) // 当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。
mouseover([[data],fn]) // 当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。
mouseup([[data],fn]) // 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize([[data],fn]) // 当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn]) // 当用户滚动指定的元素时，会发生 scroll 事件。
select([[data],fn]) // 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn]) // 当提交表单时，会发生 submit 事件。1 $(window).keydown(function(event){ 2 switch(event.keyCode) { 3 // ... 4 // 不同的按键可以做不同的事情 5 // 不同的浏览器的keycode不同 6 // 更多详细信息: http://unixpapa.com/js/key.html 7 // 常用keyCode： 空格 32 Enter 13 ESC 27 8 } 9 });
PS：更多的用法请参考：http://jquery.cuishifeng.cn/index.html
阻止默认事件
比如a标签，我们都知道当我们点击A标签的时候，它会默认触发一个跳转动作，那我们是否可以再给它绑定一个其他的事件？答案当然是可以的。
Title
百度
通过上面的例子可以看出，我们绑定的事件会先于默认事件发生，那么我们能否阻止默认事件的产生呢？答案当然也是可以的，并且很简单，只需要在事件绑定的函数中return false即可
$('#a').click(function () {
alert(123)
return false // 返回false即可抑制默认事件，true或者不返回，就表示 不抑制
})
利用阻止默认事件来进行form表单的验证
Title
扩展
页面加载自执行
正常情况下，我们加载页面的顺序为，等待页面资源全部加载完毕后，继续加载我们的js代码，但是如果我只是某一个图片(比方)有网络延迟，那么不应该阻止js代码的加载。 这里就需要使用特殊的js加载方式
$(function (){
// jscode
})();
在内部编写的js代码会在HTML页面框架加载完毕后，直接就开始加载js代码了。
// 建议页面中的js代码使用如下方式绑定
PS：当然在jQuery原码中，我们看到自动执行函数，还传递了window变量，这是因为，jQuery在内部封装了很多函数，因为函数作用域的问题，只能在内部调用，如果想要在外部调用，那么可以把方法绑定到window对象上，这样，我们在程序中调用的$,或者 jquery 其实调用的就是绑定在 window上的jQuery提供的函数。
jQuery扩展
根据上面的知识，jquery提供的功能函数其实有两类：
$(..).css() // 选择器对象的方法
$.ajax() // jQuery对象的方法
扩展jQuery对象的方法
jQuery专门提供了对应的方法：$.extend()
$.extend({
'daxin':function () {
return 'daxin,you are so handsome';
}
});
// 参数为字典，key是方法的名称，value是函数体
PS：通过上述方法就给jQuery对象绑定了我们自定义的方法，另外function还可以接收参数，只需要在括号中写入形参即可。
扩展选择器对象的方法
jQuery也提供了专门的方法：$.fn.extend()
$.fn.extend({
'daxin':function () {
return 'you are so handsome'
}
});
var info = $('#abc').daxin();
alert(info);
// 通过标签选择器对象调用扩展的方法
PS：当我们把扩展函数写在一个文件中时，为了防止方法名和变量冲突被覆盖的问题，一般会在文件中使用自执行函数进行包裹。
操作cookies
在javascript中我们可以利用DOM对象来获取cookie，但是设置起来比较麻烦，使用jquery的cookies插件可以方便的进行cookie的修改，插入等。cookies插件独立于jquery需要下载，及引入。
# 引入jquery.cookie
通过jquery.cookie插件操作cookies
$.cookie('user') # 获取cookie中key为user的值
$.cookie('user','dachenzi') # 设置cookie中key为user的值为dachenzi
cookie拥有众多参数，用于设置过期时间等
- expires：cookie过期时间
- path：cookie生效路径
- domain：cookie生效域名
- secure：https传输
添加参数时，传递参数字典即可
$.cookie('user','dachenzi',{'expires':10,...})
posted @
2017-08-14 10:52 Dahlhin 阅读(
...) 评论(
...) 编辑 收藏