人生苦短，我用python-- Day17 jQuery讲解
jQuery介绍：
1.版本介绍：在官网下载jQuery会下载到1.x、2.x、3.x这三个系列，银角大王说1.x系列兼容性好，功能也能满足。
2.格式介绍：在官网不管下载那个系列的，都会看到有两种格式，a.jquery-1.12.4.js b.jquery-3.1.1.min.js;第二中是压缩格式，如果是编写代码阶段使用第一个方便我们自己好看，如果是项目上线阶段，建议换成第二个，节省空间；
1.html中如何引用jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"> 123 </div> <script src="jquery-1.12.4.js"></script> <script> // 这里可以引用jQuery方法 // 要是用jQuery方法,需要使用jQuery当做关键字进行调用jQuery方法;也可以使用一个$来代替jQuery；下面是来获取id等于i1的标签
jQuery('#i1') </script> </body> </html>
2.jQuery获取的结果和Document获取的结果比较
a.jQuery中获取结果更多，我们暂且可以理解为获取的为一个数组，而domcument获取的结果是一个字符串，看例子：
b.这两种的转换
jQuery---->document:jQuery的结果[0]就可以了，上图可见
document---->jQuery： 把结果放到$()中就可以了
3.选择器
a.id选择器
$("#id")或jQuery("#id")
b.class选择器
<div class = 'c1'></div>
$(".c1") 选择class等于c1的标签
c.标签选择器
<div class = 'c1'> <a>f1</a> <a>f2</a> </div> <div class='c1'> <a>f3</a> </div> <div class='c1'></div>
$('a') 选择所有a标签
d.标签组合选择器
<div id = "i10"class = 'c1'> <a>f1</a> <a>f2</a>
</div> <div class='c1'> <a>f3</a> </div> <div class='c1'></div>
$('a,.c2,#i10')选a标签和class等于c2和id等于10的标签
e.层级选择器
层级筛选一，$('#i1') 找到id等于11的标签---->$('#i11 a')找到id等于11的标签下面所有的a标签（子子孙孙）
层级筛选二，$('#i1') 找到id等于11的标签---->$('#i11>a')找到id等于11的标签下面所有的a标签（儿子层级的a标签，不在往深处找）
f:基本选择器
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
$('li'); 找到所有的li标签---->$('li:first')找所有的li标签中的第一个
$('li'); 找到所有的li标签---->$('li:last')找所有的li标签中的最后一个
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
$("tr")；找到所有的tr标签--->$("tr:eq(1)")；再找的所有的tr标签中获取索引为1的tr标签；注意这里的索引是从0开始的 看一下图
g:属性选择器
h:表单对象属性
补充一下input标签中disabled的属性的用法，当一个input标签加上一个disabled属性的时候，表明这个输入框无法输入数据，看代码：
<input type="text" disabled>
那么问题来了，如果我们想找某个页面中那些input标签是有disabled这个属性的怎么办呢？
$("input:disabled")
实验案例1：全选反选取消按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="Allchoose" type="button" value="全选"/> <input id="AllReverse" type="button" value="反选"/> <input id="AllRemove" type="button" value="取消"/> <table border="1px"> <thead> <tr> <td>选择</td> <td>IP</td> <td>PORT</td> </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="style/jquery-1.12.4.js"></script> <script> //全选按钮事件 var choose = document.getElementById('Allchoose'); choose.onclick = function () { $('#tb :checkbox').prop('checked', true); }; //取消按钮事件 var remove = document.getElementById('AllRemove'); remove.onclick = function () { $('#tb :checkbox').prop('checked', false); }; //反选按钮事件 var Reverse = document.getElementById('AllReverse'); Reverse.onclick = function () { // 第一种方式dom实现 // $('#tb :checkbox').each(function () { // if (this.checked){ // this.checked = false; // }else { // this.checked = true; // } // }) // 第二种方式jQuery实现 // $('#tb :checkbox').each(function () { // if($(this).prop('checked')){ // $(this).prop('checked',false); // }else { // $(this).prop('checked',true); // } // }) // // 第三种方式jQuery+三元运算实现 var v = 条件？真：假 如果条件为真v等于真，条件为假v等于假 $('#tb :checkbox').each(function () { var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
筛选器：
.next() 下一个
$('#i1').nextAll() 对象标签的下面所有标签（同级的）
$('#i1').nextUntil('#ii1') 对象标签的下一个到后面指定标签之间的标签（左闭右开）
.prev() 上一个
$('#i1').prevAll() 对象标签的上面所有标签（同级的）
$('#i1').prevUntil('#ii1') 对象标签的上一个到后面指定标签之间的标签（左闭右开）
.parent() 父亲
$('#i1').parents() 对象标签的所有父亲标签（逐级往上找，直到找到html标签）
$('#i1').parentsUntil() 对象标签的所有父亲标签到指定的until标签为止
.chileren() 所有的孩子
.siblings() 所有的兄弟
.find('#i1') 子子孙孙中找id等于i1的标签
删选器过滤：
eq()等于某个索引
first()第一个
last()最后一个
hasClass(class) 是否有这个类
实验案例二：后台管理左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: white; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="width: 300px;height: 400px;border: 1px solid red"> <div class="item"> <div class="header">标题一</div> <div class="content hide">内容一</div> </div> <div class="item"> <div class="header">标题二</div> <div class="content hide">内容二</div> </div> <div class="item"> <div class="header">标题三</div> <div class="content hide">内容三</div> </div> </div> <script src="style/jquery-1.12.4.js"></script> <script> $('.header').click(function () { $(this).next().removeClass('hide'); $(this).parent().siblings().find('.content').addClass('hide'); }) </script> </body> </html>
属性操作：
attr方法，自定义属性
$(..).attr('n') 获取属性n对应的值
$(..).attr('n','v') 给属性n赋值为v，如果属性n有值那么覆盖n现有的值
$(..).removeAttr('n') 删除属性n对应的值
prop 属性
# 专门用于chekbox的状态设置与选择
$(..).prop('checked') 获取当前chebox是否被选中，true or false
$(..).prop('checked', true) 设置chebox
设置状态时候 false和true不要用引号引起来，测试发现如果用false引号引起来的话不生效，true引起来生效
样式操作
addClass 增加一个类
removeClass 删除一个类
toggleClass 如果这个标签有这个类就删除，如果没有就增加
实验案例：开灯关灯案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c2{ opacity:0.5; position: fixed; top:0; left: 0; right: 0; bottom: 0; background-color: black; opacity:0.5; z-index: 9; } .held{ display: none; } .c1{ z-index: 10; position: fixed; } </style> </head> <body> <div> <input class="c1" type="button" value="开关按钮"> </div> <div class="c2 held"> </div> <script src="jquery-1.12.4.js"></script> <script> $('.c1').click(function () { $('.c2').toggleClass('held') }); </script> </body> </html>
文本操作：
$(..).text() 获取文本内容
$(..).text('<a>1</a>') 设置标签的value内容以字符串的方式设置
$(..).html() 获取标签的内容，以html的形式获取
$(..).html('<a>1</a>') 设置标签的value内容，以html的形式设置
$(..).val() 获取值
$(..).val('测试一下')
val方法讲解
实验案例：模态对话框案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .modle{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-top: -250px; margin-left: -250px; border: 1px solid red; background-color: #eeeeee; z-index: 10; } .back{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .held{ display: none; } </style> </head> <body> <input type="button" value="添加" onclick="ADD()"> <table border="1"> <tr> <td>IP</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>192.168.1.1</td> <td>80</td> <td><a class="edit">编辑</a>|删除</td> </tr> <tr> <td>192.168.1.2</td> <td>3306</td> <td><a class="edit">编辑</a>|删除</td> </tr> <tr> <td>192.168.1.3</td> <td>22</td> <td><a class="edit">编辑</a>|删除</td> </tr> </table> <div class="modle held" > Server:<input name="servername" type="text"><br> Port:<input name="port" type="text"><br> <div> <input type="button" value="取消" onclick="cancel()"> </div> </div> <div class="back held"></div> <script src="jquery-1.12.4.js"></script> <script> function ADD() { $('.modle,.back').removeClass('held'); } function cancel() { $('.modle,.back').addClass('held'); } $('.edit').click(function () { $('.modle,.back').removeClass('held'); var tds = $(this).parent().prevAll(); var port = tds[0].innerText; var server = tds[1].innerText; $('.modle input[name="servername"]').val(server); $('.modle input[name="port"]').val(port); }) </script> </body> </html>
1
