总体概述
一、jQuery相当于Python中的模块，其诞生的目的就是简化DOM操作。DOM操作基本上都封装在jQuery中。不过也有例外，比如createElement创建标签的操作，还是需要DOM完成。Dom对象与jQuery对象可互相转换
jQuery对象 --------> Dom对象：$('#i1')[0]
DOM对象------> jQuery对象：$(<dom对象>)
二、参考网站：http://jquery.cuishifeng.cn
三、版本号：
1.x 推荐使用这个，这是为了兼容旧版本浏览器
2.x
3.x
四、基本用法：
jQuery的用法大致可以分为以下4步
1、下载jQuery
2、在HTML文件中，在body标签最底部写一个script的子标签，其中写一个src属性导入jQuery
3、查找元素（使用时可以以$开头或jQuery）
4、操作元素
选择器
cond1、cond2为标签的条件
一、id选择器：$('#<id>')
二、class选择器：$('.<classname>')
三、标签选择器：$('<tagname>')
四、*：代表所有标签
五、组合选择器：$('a,.c1,#i10')，此选择器会选择a标签、class为c1、id为i10的标签。注意是用逗号分隔
六、层级选择器：$('cond1 cond2')，查找cond1标签下的符合cond2的所有标签（子孙也查找），用空格分隔
$('parent>child')：查找parent下了子元素，而不查找孙子。
七、属性选择器：$('[name]') 查找具有name属性的标签
$(''[name='alex']") 查找name属性为alex的标签
$('[attribute!=value]') 查找属性不等于value的标签
attribute^=value
attribute$=value
attribute*=value
[attrSet1][attrSet2][attrSetN]
八、表单相关：$('[:disabled]')：查找属性为disabled，比如text不能输入的标签
二 、筛选器
1、:first：$('a:first')相当于$('a').first() 找到第一个a标签
2、:not(selector) 除了selector以外的
3、:even 奇数
4、:odd 偶数
5、:last：$('a:last')相当于$('a').last() 最后一个标签
6、:eq(index)：相当于$('.类名').eq(1) （$('.<classname>:eq(1)')） 找到索引为index的标签
7、:gt(index)
8、:lt(index)
9、:header 找到类似h1 h2 h3的标签
16、hasclass：$('a').hasclass(expr) 判断在a标签中找到有expr类的标签
10、<jQuery对象>.find(...) 在jQuery对象中的子子孙孙查找
11、<jQuery对象>.next() jQuery对象的下一下对象
nextAll()
nextUntil(expr) 直到找到expr
12、<jQuery对象>.prev() jQuery对象的上一个对象
prevAll()
prevUntil()
13、<jQuery对象>.parent 父亲
parents 找到他的所有前辈
parentsUntil()
14、<jQuery对象>.children 孩子
15、<jQuery对象>.siblings 兄弟
红色字体的返回的是DOM对象？
案例：全选、反选、取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选"> <input type="button" value="反选"> <input type="button" value="取消"> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>端口</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"> </td> <td>192.168.0.20</td> <td>808</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>192.168.0.10</td> <td>9999</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>192.168.0.30</td> <td>8080</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>192.168.0.40</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> // 全选 // 不用循环，会自动循环 $('[value="全选"]').click(function () { $(':checkbox').prop('checked', true); }) // 取消 $('[value="取消"]').click(function () { $(':checkbox').prop('checked', false); }) // 反选 // 利用DOM完成 // $('[value="反选"]').click(function () { // $(':checkbox').each(function () { // if(this.checked){ // this.checked=false; // }else{ // this.checked=true; // } // }) // }) // 利用jQuery完成 // $('[value="反选"]').click(function () { // $(':checkbox').each(function () { // if($(this).prop('checked')){ // $(this).prop('checked', false) // }else{ // $(this).prop('checked', true) // } // }) // }) // jQuery结合三元运算 $('[value="反选"]').click(function () { $(':checkbox').each(function () { var res = $(this).prop('checked')?false:true; $(this).prop('checked', res) }) }) </script> </body> </html>
知识点：
1、三元运算：res = condition?res1:res2;
condition成立返回res1，否则返回res2
2、在jQuery中，不需要使用循环，会自动循环，否则使用<jquery对象>.each()循环
样式操作
<jQuery对象>.addClass(...) 添加样式
<jQuery对象>.removeClass() 删除样式
<jQuery对象>.toggleClass(...) 样式存在则删除样式，不存在则添加
<jQuery对象>.css(<name>,<val) 样式中的某个属性设置
案例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .content{ background-color: red; width:200px;height: 200px; } </style> </head> <body> <input type="button" value="开关"> <div class="content"></div> <script src="jquery-1.12.4.js"></script> <script> $('input[type="button"]').click(function () { $('.content').toggleClass('hide') }) </script> </body> </html>
案例：显示菜单内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color:blue; width:100px; } .hide{ display:none; } </style> </head> <body> <div class="item"> <div class="header">菜单1</div> <div class="content"> <div>内容1</div> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> </div> <div class="item"> <div class="header">菜单2</div> <div class="content hide"> <div>内容2</div> <div>内容2</div> <div>内容2</div> <div>内容2</div> </div> </div> <div class="item"> <div class="header">菜单3</div> <div class="content hide"> <div>内容3</div> <div>内容3</div> <div>内容3</div> <div>内容3</div> </div> </div> <div class="item"> <div class="header">菜单4</div> <div class="content hide"> <div>内容4</div> <div>内容4</div> <div>内容4</div> <div>内容4</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function () { // $(this).next().removeClass('hide') // $(this).parent().siblings().children('.content').addClass('hide') // 支持链式编程 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
支持链式编程
属性设置
1、jquery对象.prop(attr,val) 设置值
2、jquery对象.prop(attr) 获取值
1、2专门用于checkbox和radio （这是由于3版本以下的jQuery的问题）
3、<jQuery对象>.attr(name) 获取属性
4、<JQuery对象>.attr(name,val) 设置属性
5、JQuery对象.removeAttr(name) 删除属性
HTML内容 文本 值
1、jQuery对象.text() 获取文本内容
2、jQuery对象.text(str) 设置文本内容
3、jQuery对象.html() 获取HTML内容
4、jQuery对象.html(str) 设置HTML内容
5、jQuery对象.val() 获取val值
6、jQuery对象.val(str) 设置val值
5、6主要是针对input系列的标签，注意其中的select标签使用5、6，如果是多选，5返回的是列表，6的参数要求是列表。
案例：模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ position: fixed; top:0;bottom: 0;left: 0;right: 0; background-color: black; opacity: 0.5;z-index: 9; } .hide{ display: none; } .modal{ position: fixed; top:50%;left:50%; width:300px;height:300px; z-index: 10;background-color: white; margin-left:-150px;margin-top:-150px; } .modal .ip{ margin-top:20px; margin-left:20px; } .modal .port{ margin-top:20px; } .modal .confirm{ margin-top:10px; margin-right: 90px; text-align:right; } </style> </head> <body> <input type="button" value="添加" \> <table border="1"> <thead> <tr> <th>IP</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>192.168.10.10</td> <td>8080</td> <td> <a class="edit">编辑</a>|<a>删除</a> </td> </tr> <tr> <td>192.168.10.20</td> <td>8088</td> <td> <a class="edit">编辑</a>|<a>删除</a> </td> </tr> <tr> <td>192.168.10.30</td> <td>808</td> <td> <a class="edit">编辑</a>|<a>删除</a> </td> </tr> </tbody> </table> <div class="shadow hide"></div> <div class="modal hide"> <div class="ip"> <span>IP</span> <input type="text" name="ip" \> </div> <div class="port"> <span>端口</span> <input type="text" name="port"\> </div> <div class="confirm"> <input type="button" value="确定"> <input type="button" value="取消"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('input[type="button"]').click(function () { $('.shadow,.modal').removeClass('hide') }) $('input[value="取消"]').click(function () { $('.shadow,.modal').addClass('hide') $('.modal .port input[name="port"]').val('') $('.modal .ip input[name="ip"]').val('') }) $('.edit').click(function () { tds = $(this).parent().prevAll() var port = $(tds[0]).text() var ip = $(tds[1]).text() $('.modal .port input[name="port"]').val(port) $('.modal .ip input[name="ip"]').val(ip) $('.shadow,.modal').removeClass('hide') }) </script> </body> </html>
模态对话框（改进版）：为了实现多列的扩展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ position: fixed; top:0;bottom: 0;left: 0;right: 0; background-color: black; opacity: 0.5;z-index: 9; } .hide{ display: none; } .modal{ position: fixed; top:50%;left:50%; width:300px;height:300px; z-index: 10;background-color: white; margin-left:-150px;margin-top:-150px; } .modal .ip{ margin-top:20px; margin-left:20px; } .modal .port{ margin-top:20px; } .modal .confirm{ margin-top:10px; margin-right: 90px; text-align:right; } </style> </head> <body> <input type="button" value="添加" \> <table border="1"> <thead> <tr> <th>IP</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td target="ip">192.168.10.10</td> <td target="port">8080</td> <td> <a class="edit">编辑</a>|<a>删除</a> </td> </tr> <tr> <td target="ip">192.168.10.20</td> <td target="port">8088</td> <td> <a class="edit">编辑</a>|<a>删除</a> </td> </tr> <tr> <td target="ip">192.168.10.30</td> <td target="port">808</td> <td> <a class="edit">编辑</a>|<a>删除</a> </td> </tr> </tbody> </table> <div class="shadow hide"></div> <div class="modal hide"> <div class="ip"> <span>IP</span> <input type="text" name="ip" \> </div> <div class="port"> <span>端口</span> <input type="text" name="port"\> </div> <div class="confirm"> <input type="button" value="确定"> <input type="button" value="取消"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('input[type="button"]').click(function () { $('.shadow,.modal').removeClass('hide') }) $('input[value="取消"]').click(function () { $('.shadow,.modal').addClass('hide') $('.modal .port input[name="port"]').val('') $('.modal .ip input[name="ip"]').val('') }) $('.edit').click(function () { var tds = $(this).parent().prevAll() tds.each(function () { var text = $(this).text() var target = $(this).attr('target') $('.modal input[name='+target+']').val(text) $('.shadow,.modal').removeClass('hide') }) // var port = $(tds[0]).text() // var ip = $(tds[1]).text() // $('.modal .port input[name="port"]').val(port) // $('.modal .ip input[name="ip"]').val(ip) // $('.shadow,.modal').removeClass('hide') }) </script> </body> </html>
案例：切换菜单，内容随之改变（利用自定义属性完成）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ width:980px;height:40px; background-color: #eeeeee; margin:0 auto; } .menu .menu-item{ float:left; padding: 10px; border-right:1px solid red; cursor: pointer; } .menu .active{ background-color: brown; } .content{ width:960px;min-height: 100px; margin:0 auto; padding:10px; } </style> </head> <body> <div class="menu"> <div class="menu-item" a="1">菜单1</div> <div class="menu-item" a="2">菜单2</div> <div class="menu-item" a="3">菜单3</div> </div> <div class="content"> <div b="1">内容1</div> <div class="hide" b="2">内容2</div> <div class="hide" b="3">内容3</div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu .menu-item').click(function () { $(this).addClass('active'); $(this).siblings().removeClass('active'); var prop = $(this).attr('a'); $('.content div[b='+prop+']').removeClass('hide'); $('.content div[b='+prop+']').siblings().addClass('hide') }) </script> </body> </html>
案例：菜单切换，改进版（利用索引完成）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ width:980px;height:40px; background-color: #eeeeee; margin:0 auto; } .menu .menu-item{ float:left; padding: 10px; border-right:1px solid red; cursor: pointer; } .menu .active{ background-color: brown; } .content{ width:960px;min-height: 100px; margin:0 auto; padding:10px; } </style> </head> <body> <div class="menu"> <div class="menu-item">菜单1</div> <div class="menu-item">菜单2</div> <div class="menu-item">菜单3</div> </div> <div class="content"> <div>内容1</div> <div class="hide">内容2</div> <div class="hide">内容3</div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu .menu-item').click(function () { $(this).addClass('active'); $(this).siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide') }) </script> </body> </html>
知识点：
1、$(this).index 获取this在父类标签中的索引值
文档操作
1、<jQuery对象>.append(<obj>) 在子标签中尾部添加
2、<jQuery对象>.prepend(<obj>)（相当于<html_string).prepentto(jQuery对象)) 在子标签头部添加
3、<jQuery对象>.after(<obj>) 在标签的后面添加
4、<jQuery对象>.before(<obj>) 在标签之前添加
obj可为jQuery对象、dom对象或字符串
5、<jQuery对象>.empty() 清空内容
6、<jQuery对象>.clear() 删除整个标签
7、<jQuery对象>.clone() 复制整个标签
位置操作
一、滑轮
1、$(window).scrollTop() 获取window滑轮位置
2、$(window).scrollTop(val) 设置window滑轮位置
3、$(...).scrollTop() 获取标签滑轮位置
4、$(...).scrollTop() 设置标签滑轮位置
scrollLeft
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height:100px;overflow: auto;width:200px;"> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> <p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p><p>aaaaa</p> </div> <div style="height:2000px;"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
二、offset 获取标签左上角在html中的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="height:100px;"></div> <div id="i2"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
$(...).offset().left
$(...).offset().top
三、position()：获取子标签在父标签中的坐标
标签高度
1、<jQuery对象>.height() 获取标签内容的高度
2、<jQuery对象>.innerHeight() 获取标签内容的高度+2*padding高度
3、<jQuery对象>.outerHiehgt() 获取标签内容的高度+2*padding-top+2*border
4、<jQuery对象>.outerHeight() 获取标签内容的高度+2*padding-top+2*border+2*margin-top
事件绑定方式
1、<jQuery对象>.on(<event>,<func>)
2、<jQuery对象>.off(<event>,<func>)
以下绑定方式的底层都是基本1、2
3、<jQuery对象>.<event>(<func>)
4、<jQuery对象>.bind(<event>,<func>)
5、<jQuery对象>.unbind(<event>,<func>)
6、<jQuery对象>.delegate(<选择器>,<event>,<func>)
7、<jQuery对象>.undelegate(<选择器>,<event>,<func>)
第6种绑定方式是委托方式，意思就是此处的代码不会立马绑定事件，而是当用户点击时，搜索此标签是否符合<jQuery对象>、<选择器>，符合即绑定事件。
适用范围：在Html添加新元素，而在新元素绑定事件
案例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="添加"> <input type="text"> <ul> <li>Treelight</li> <li>Alex</li> <li>Syvia</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('input[value="添加"]').click(function () { var new_obj = document.createElement('li'); $(new_obj).text($('input[type="text"]').val()) $('ul').append(new_obj) }); $('ul').delegate('li','click',function () { alert($(this).text()); }) </script> </body> </html>
阻止事件发生
案例如下（DOM方式）：
JQuery方式
默认事件先执行的：checkobx
自定义事件先执行：a submit
当页面框架加载完成就执行函数
$(<func>)
页面框架是指标签，但不指标签的内容，比如图片，这样不用加载完图片就能迅速绑定事件，
jQuery函数扩展
一、创建：$.extend(<fun_name>:function(){
...}
调用：$.<fun_name>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div></div> <script src="jquery-1.12.4.js"></script> <script> $.extend({ sum:function (a,b) { return a+b; } }); var v = $.sum(10,11); console.log(v); </script> </body> </html>
二、创建：
$.fn.extend(<fun_name>:function(){
...}
调用：
<jQuery对象>.<fun_name>
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div></div> <script src="jquery-1.12.4.js"></script> <script> $.fn.extend({ sum:function (a,b) { return a+b; } }); var v = $('div').sum(40,11); console.log(v); </script> </body> </html>
三、外部文件扩展
用法
1、<script src='path/to/file'></script>
2、$.<fun_name>
引用外部扩展的问题：
1、有可能函数名相同，没法解决
2、有可能全局变量一样，可用自执行函数解决，把jQuery传进去，如：。
(function(){
var status = 1;
arg.extend({
function ...})
// 封装变量
})(jQuery)
其它
设置select中的选项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select> <option>Scholes</option> <option>Kean</option> <option>Beckham</option> <option>Giggs</option> </select> <script src="jquery-1.12.4.js"></script> </body> </html>
绑定ctrl+鼠标左键事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button"> <script src="jquery-1.12.4.js"></script> <script> $('input').mousedown(function (e) { console.log(e.button,e.ctrlKey) }) </script> </body> </html>
option标签不能绑定mousedown事件
作业问题
关于select标签绑定click事件：点击标签和选一个选项都会触发click事件。我们需要的是后者触发的click事件。
表单验证
================================== 验证 ================================
JS： 验证
各种验证
$(':submit').click(function(){
$(':text,:password').each(function(){
...
return false;
})
return false;
})
后端：python实现
业务处理
....
Ajax
初步感觉也是提交数据，也有请求方式、数据、请求的URL，也会从服务器端返回数据，但不会自动刷新页面
初步体验Ajax和Django的交互
success：有数据返回时才执行
Ajax中数据的打包
$(<form选择器>).serialize()
Ajax中的参数
url：请求地址
data：发送给服务器的数据
type：请求类型
dataType：指定从服务器端返回的数据类型
traditional：设为true，则可以给客户端发送列表
error：请求错误时调用
4620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
