初识jQuery
what
- 一个优秀js函数库
- 使用了jQuery的网站超过90%
- 中大型WEB项目开发首选
- write less, do more
why
- HTML元素选取(选择器)
- HTML元素操作
- CSS操作
- HTML事件处理
- JS动画效果
- 链式调用(每个方法返回值为this)
- **读写合一(**读是针对第一个，写针对是所有)
- 浏览器兼容
- 隐式遍历
- 易扩展插件
- ajax封装
- …
how
- 引入jQuery 库
- 使用文件
- jQuery核心函数:
$或jQuery - jQuery核心对象: 执行
$()返回的对象 - 区别两种js库库文件
- 开发版
- 生产版
- 区别两种引入js库库文件的方式
- 本地引入库
- CDN库远程引入
- 减轻自己服务器的压力
- jQuery的不同版本
- 1.X
- 兼容老版本IE
- 文件更大
- 2.X
- 部分API不支持IE8及以下版本
- 文件小且执行效率高
- 3.X
- 完全不再支持IE8及以下版本
- 提供了一些新的API
- 提供不包含ajax/动画API的版本
jQuery两把利器
jQuery核心函数
简称: jQuery函数($或jQuery)
jQuery库向外暴露的只有$或jQuery
- 当函数用$()
- 参数为函数: 当dom加载完成后执行此回调函数
- 参数为选择器字符串：查找匹配的标签并将它封装成jQuery对象
- 参数为dom对象：将dom对象封装成jQuery对象
- 参数为html标签字符串：创建标签对象并将其封装成jQuery对象
<div>
<button id="btn">测试</button>
<br/>
<input type="text" name="msg1"/><br/>
<input type="text" name="msg2"/><br/>
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my atguigu "两端的空格
*/
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
$(function () { // 绑定文档加载完成的监听
// 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
$('#btn').click(function () { // 绑定点击事件监听
// this是什么? 发生事件的dom元素(<button>)
// alert(this.innerHTML)
// 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
alert($(this).html())
// 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3"/><br/>').appendTo('div')
})
})
</script>
- 当对象用
$.()$.each【隐式遍历数组】$.trim【去除两端的空格】
/*需求2. 遍历输出数组中所有元素值*/
var arr = [2, 4, 7]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log(index, item)
})
// 2). $.trim() : 去除两端的空格
var str = ' my atguigu '
// console.log('---'+str.trim()+'---')
console.log('---' + $.trim(str) + '---')
jQuery核心对象
- 简称: jQuery对象
- 得到jQuery对象: 执行jQuery函数后返回的就是对象
理解
- jq对象内部包含所有匹配的任意多个dom元素对象的伪数组(可能只有一个元素)
- jq对象拥有许多有用的属性与方法来方便操作dom
基本行为
size()/length返回包含的dom元素对象数量[index]/get(index)通过index来查找第index个dom对象each()通过传入回调函数来遍历dom对象
//读取dom元素方法1
var $buttons = $('button');
$buttons.each(function(index, domele){
console.log(domele.innerHTML);
});
//读取dom元素方法2
var $buttons = $('button');
$buttons.each(function(){
console.log(this.innerHTML); //在回调函数中的this指当前遍历中的dom元素
});
index()返回当前jq对象在所在兄弟元素中的位置下标
伪数组
- 是Object对象
- length属性
- 数组下标属性
- 没有数组的特别方法，如forEach(), push(), pop(), splice()等
console.log($buttons instanceof Array) // false
// 自定义一个伪数组
var weiArr = {}
weiArr.length = 0
weiArr[0] = 'atguigu'
weiArr.length = 1
weiArr[1] = 123
weiArr.length = 2
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i]
console.log(i, obj)
}
console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined
使用jQuery核心函数
选择器
选择器本身只是一个有特定语法规则的字符串，没有实质用处
它的基本语法规则使用的就是css的选择器语法，并对基进行了扩展
只有调用$()，，并将选择器作为参数传入才能起作用
$(selector)
- 就是css选择器的格式
- 返回封装好的jQuery对象
基本选择器
#id： id选择器element： 元素选择器.class： 属性（类）选择器*： 任意标签selector1,selector2,selectorN： 取多个选择器的并集(组合选择器)selector1selector2selectorN： 取多个选择器的交集(相交选择器)
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB(title="hello")</li>
<li class="box">CCCCC(class="box")</li>
<li title="hello">DDDDDD(title="hello")</li>
</ul>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选择id为div1的元素
2. 选择所有的div元素
3. 选择所有class属性为box的元素
4. 选择所有的div和span元素
5. 选择所有class属性为box的div元素
*/
//1. 选择id为div1的元素
// $('#div1').css('background', 'red')
//2. 选择所有的div元素
// $('div').css('background', 'red')
//3. 选择所有class属性为box的元素
//$('.box').css('background', 'red')
//4. 选择所有的div和span元素
// $('div,span').css('background', 'red')
//5. 选择所有class属性为box的div元素
//$('div.box').css('background', 'red')
//$('*').css('background', 'red')
</script>
层次选择器
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
- ancestor descendant
在给定的祖先元素下匹配所有的后代元素 - parent>child
在给定的父元素下匹配所有的子元素 - prev+next
匹配所有紧接在 prev 元素后的 next 元素 - prev~siblings
匹配 prev 元素之后的所有 siblings 元素
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span class="box">DDDD</span></li>
<span>EEEEE</span>
</ul>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选中ul下所有的的span
2. 选中ul下所有的子元素span
3. 选中class为box的下一个li
4. 选中ul下的class为box的元素后面的所有兄弟元素
*/
//1. 选中ul下所有的的span
// $('ul span').css('background', 'yellow')
//2. 选中ul下所有的子元素span
// $('ul>span').css('background', 'yellow')
//3. 选中class为box的下一个li
// $('.box+li').css('background', 'yellow')
//4. 选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('background', 'yellow')
</script>
过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选择第一个div
2. 选择最后一个class为box的元素
3. 选择所有class属性不为box的div
4. 选择第二个和第三个li元素
5. 选择内容为BBBBB的li
6. 选择隐藏的li
7. 选择有title属性的li元素
8. 选择所有属性title为hello的li元素
*/
//1. 选择第一个div
// $('div:first').css('background', 'red')
//2. 选择最后一个class为box的元素
//$('.box:last').css('background', 'red')
//3. 选择所有class属性不为box的div
// $('div:not(.box)').css('background', 'red') //没有class属性也可以
//4. 选择第二个和第三个li元素
// $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
//$('li:lt(3):gt(0)').css('background', 'red')
//5. 选择内容为BBBBB的li
// $('li:contains("BBBBB")').css('background', 'red')
//6. 选择隐藏的li
// console.log($('li:hidden').length, $('li:hidden')[0])
//7. 选择有title属性的li元素
// $('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素
$('li[title="hello"]').css('background', 'red')
</script>
表单选择器
<form>
用户名: <input type="text"/><br>
密 码: <input type="password"/><br>
爱 好:
<input type="checkbox" checked="checked"/>篮球
<input type="checkbox"/>足球
<input type="checkbox" checked="checked"/>羽毛球 <br>
性 别:
<input type="radio" name="sex" value='male'/>男
<input type="radio" name="sex" value='female'/>女<br>
邮 箱: <input type="text" name="email" disabled="disabled"/><br>
所在地:
<select>
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br>
<input type="submit" value="提交"/>
</form>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选择不可用的文本输入框
2. 显示选择爱好 的个数
3. 显示选择的城市名称
*/
//1. 选择不可用的文本输入框
// $(':text:disabled').css('background', 'red')
//2. 显示选择爱好 的个数
console.log($(':checkbox:checked').length)
//3. 显示选择的城市名称
$(':submit').click(function () {
var city = $('select>option:selected').html() // 选择的option的标签体文本
city = $('select').val() // 选择的option的value属性值
alert(city)
})
</script>
$工具方法
- $.each(): 遍历数组或对象中的数据
- $.trim(): 去除字符串两边的空格
- $.type(obj): 得到数据的类型
- $.isArray(obj): 判断是否是数组
- $.isFunction(obj): 判断是否是函数
- $.parseJSON(json) : 解析json字符串转换为js对象/数组
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. $.each(): 遍历数组或对象中的数据
var obj = {
name: 'Tom',
setName: function (name) {
this.name = name
}
}
$.each(obj, function (key, value) {
console.log(key, value)
})
//2. $.trim(): 去除字符串两边的空格
//3. $.type(obj): 得到数据的类型
console.log($.type($)) // 'function'
//4. $.isArray(obj): 判断是否是数组
console.log($.isArray($('body')), $.isArray([])) // false true
//5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($)) // true
//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.log($.parseJSON(json))
json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.log($.parseJSON(json))
/*
JSON.parse(jsonString) json字符串--->js对象/数组
JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串
*/
</script>
属性
- 操作任意属性
attr()removeAttr()prop()
- 操作class属性
addClass()removeClass()
- 操作HTML代码/文本/值
html()val()
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. 读取第一个div的title属性
console.log($('div:first').attr('title')) // one
//2. 给所有的div设置name属性(value为atguigu)
$('div').attr('name', 'atguigu')
//3. 移除所有div的title属性
$('div').removeAttr('title')
//4. 给所有的div设置class='guiguClass'
$('div').attr('class', 'guiguClass')
//5. 给所有的div添加class='abc'
$('div').addClass('abc')
//6. 移除所有div的guiguClass的class
$('div').removeClass('guiguClass')
//7. 得到最后一个li的标签体文本
console.log($('li:last').html())
//8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$('li:first').html('<h1>mmmmmmmmm</h1>')
//9. 得到输入框中的value值
console.log($(':text').val()) // 读取
//10. 将输入框的值设置为atguigu
$(':text').val('atguigu') // 设置 读写合一
//11. 点击'全选'按钮实现全选
// attr(): 操作属性值为非布尔值的属性
// prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function () {
$checkboxs.prop('checked', true)
})
//12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
$checkboxs.prop('checked', false)
})
</script>
CSS模块
CSS
<p style="color: blue;">尚硅谷的后裔</p>
<p style="color: green;">太阳的后裔</p>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. 得到第一个p标签的颜色
console.log($('p:first').css('color'))
//2. 设置所有p标签的文本颜色为red
$('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
$('p:eq(1)').css({
color: '#ff0011',
background: 'blue',
width: 300,
height: 30
})
</script>
位置
offset([obj])
- 不加参数返回相对页面左上角的偏移量
- 加参数设置偏移量, 必须同时设置top和left
position()
- 相对父元素左上角的偏移量
- 不能设置偏移量
- 返回值是有left与right属性的对象
<style type="text/css">
* {margin: 0px;}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="div1">
<div class="div2">测试offset</div>
</div>
<div class='div3'>
<button id="btn1">读取offset和position</button>
<button id="btn2">设置offset</button>
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
$('#btn1').click(function () {
// 打印 div1 相对于页面左上角的位置
var offset = $('.div1').offset()
console.log(offset.left, offset.top) // 10 20
// 打印 div2 相对于页面左上角的位置
offset = $('.div2').offset()
console.log(offset.left, offset.top) // 10 70
// 打印 div1 相对于父元素左上角的位置
var position = $('.div1').position()
console.log(position.left, position.top) // 10 20
// 打印 div2 相对于父元素左上角的位置
position = $('.div2').position()
console.log(position.left, position.top) // 0 50
})
$('#btn2').click(function () {
$('.div2').offset({
left: 50,
top: 100
})
})
</script>
</body>
scrollTop([val])
- 不设置参数获取元素的垂直滚动像素
- 设置参数设置元素的垂直滚动像素
- 在chrome与火狐中, 浏览器滚动条的滚动像素在body上
- 在IE中, 浏览器滚动条的滚动像素在html上
$(document.body).scrollTop()+$(document.documentElement).scrollTop()
// 读取页面滚动条的Y坐标(兼容chrome和IE)
$('body,html').scrollTop(60);
// 滚动到指定位置(兼容chrome和IE)
scrollLeft([val])
- 与垂直滚动类似
尺寸
1. 内容尺寸
height(): height
width(): width
2. 内部尺寸
innerHeight(): height+padding
innerWidth(): width+padding
3. 外部尺寸
outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin
<script>
var $div = $('div')
// 1. 内容尺寸
console.log($div.width(), $div.height())
// 2. 内部尺寸
console.log($div.innerWidth(), $div.innerHeight())
// 3. 外部尺寸
console.log($div.outerWidth(), $div.outerHeight())
console.log($div.outerWidth(true), $div.outerHeight(true))
</script>
筛选
jQuery对象的过滤
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
var $liItem = $('ul>li');
1. ul下li标签第一个
$liItem.first().css('background','red');
// 2. ul下li标签的最后一个
$liItem.last().css('background','red');
// 3. ul下li标签的第二个
$liItem.eq(1).css('background','red');
// 4. ul下li标签中title属性为hello的
$liItem.filter('[title=hello]').css('background','red');
// 5. ul下li标签中title属性不为hello的
$liItem.not('[title=hello]').css('background','red');
$liItem.filter('[title!=hello]').css('background','red');
// 5.1 ul下li标签中有title属性，但title属性不为hello的
$liItem.not('[title][title!=hello]').css('background','red');
$liItem.filter('[title!=hello]').filter('[title]').css('background','red');
// 6. ul下li标签中有span子标签的
$liItem.has('span').css('background', 'red');
</script>
jQuery对象的查找
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<div>
<ul>
<span>span文本1</span>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box" id='cc'>CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>span文本2</span></li>
<span>span文本3</span>
</ul>
<span>span文本444</span><br>
<li>eeeee</li>
<li>EEEEE</li>
<br>
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
var $ul = $('ul')
//1. ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background', 'red')
//2. ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background', 'red')
//3. ul标签的父标签
$ul.parent().css('background', 'red')
//4. id为cc的li标签的前面的所有li标签
var $li = $('#cc')
$li.prevAll('li').css('background', 'red')
//5. id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background', 'red')
</script>
文档处理
1. 添加/替换元素
* append(content)
向当前匹配的所有元素内部的最后插入指定内容
* prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容
* before(content)
将指定内容插入到当前所有匹配元素的前面
* after(content)
将指定内容插入到当前所有匹配元素的后面替换节点
* replaceWith(content)
用指定内容替换所有匹配的标签删除节点
2. 删除元素
* empty()
删除所有匹配元素的子元素
* remove()
删除所有匹配的元素
内部插入
append(content)
向当前匹配的所有元素内部的最后插入指定内容
prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容
//1. 向id为ul1的ul下添加一个span(最后)
var $ul1 = $('#ul1')
//$ul1.append('<span>append()添加的span</span>')
$('<span>appendTo()添加的span</span>').appendTo($ul1)
//2. 向id为ul1的ul下添加一个span(最前)
//$ul1.prepend('<span>prepend()添加的span</span>')
$('<span>prependTo()添加的span</span>').prependTo($ul1)
外部插入
before(content)
将指定内容插入到当前所有匹配元素的前面
after(content)
将指定内容插入到当前所有匹配元素的后面替换节点
$('ul').before(htmlString | Element | Array | jQuery) //向ul的前面插入元素
(htmlString | Element | Array | jQuery).insertBefore($('ul')) //将元素插入到ul标签之前
$('ul').after(htmlString | Element | Array | jQuery) //向ul的后面插入元素
(htmlString | Element | Array | jQuery).insertAfter($('ul')) //将元素插入到ul标签之后
//3. 在id为ul1的ul下的li(title为hello)的前面添加span
$ul1.children('li[title=hello]').before('<span>before()添加的span</span>')
//4. 在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').after('<span>after()添加的span</span>')
替换
replaceWith(content)
用指定内容替换所有匹配的标签删除节点
$('ul').replaceWith('<p>a</p>') //用p标签替换ul标签
$('ul').replaceAll(Selector | jQuery | Array | Element) //用匹配到的元素替换ul标签
//5. 将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')
移除
empty()
删除所有匹配元素的子元素
remove()
删除所有匹配的元素
$('ul').empty() //清空ul内部子节点
$('ul').remove('li') //清空ul内部li标签
//6. 移除id为ul2的ul下的所有li
// $('#ul2').empty() //删除匹配的元素集合中所有的子节点。
$('#ul2>li').remove() //
事件
1. 事件绑定(2种)：
* eventName(function(){})
绑定对应事件名的监听, 例如：$('#div').click(function(){});
* on(eventName, funcion(){})
通用的绑定事件监听, 例如：$('#div').on('click', function(){})
* 优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
* off(eventName)
3. 事件的坐标
* event.clientX, event.clientY 相对于视口的左上角
* event.pageX, event.pageY 相对于页面的左上角
* event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件默认行为 : event.preventDefault()
页面载入
- ready(fn)
事件处理
.event()- .on(event, [selector, ][data, ]fn)
- .off([event,][selector, ][fn])
mouseover与mouseenter的区别
mouseover对应mouseout
内部有子元素时, 移入子元素会触发父元素的mouseout事件
mouseenter对应mouseleave
内部有无子元素时没有区别
区别on(‘eventName’, fun)与eventName(fun)
on(‘eventName’, fun): 通用, 但编码麻烦
eventName(fun): 编码简单, 但有的事件没有对应的方法
事件委派
引入：绑定事件监听的问题: 新加的元素没有监听。可以用事件委派解决
1. 事件委托(委派/代理):
* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
* 监听回调是加在了父辈元素上
* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
* 委托方: 业主 li
* 被委托方: 中介 ul
3. 使用事件委托的好处
* 添加新的子元素, 自动有事件响应处理
* 减少事件监听的数量: n==>1
4. jQuery的事件委托API
* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委托: $(parentSelector).undelegate(eventName)
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<li>22222</li>
<br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>
<script src="js/jquery-1.10.1.js"></script>
<script>
// 设置事件委托
$('ul').delegate('li', 'click', function () {
// console.log(this)
this.style.background = 'red'
})
$('#btn1').click(function () {
$('ul').append('<li>新增的li....</li>')
})
$('#btn2').click(function () {
// 移除事件委托
$('ul').undelegate('click')
})
</script>
- delegate() //老方法
- on() //新方法
事件坐标
- event.offsetX //距离当前元素左上角
- event.clientX //距离视图左上角
- event.pageX //距离页面左上角
事件相关
-
停止冒泡
stopPropagation()
-
阻止默认行为
preventDefault()
内置动画
淡入淡出
淡入淡出: 不断改变元素的透明度来实现的
1. fadeIn(): 带动画的显示;淡入
2. fadeOut(): 带动画隐藏；淡出
3. fadeToggle(): 带动画切换显示/隐藏
$div1.fadeOut(1000, function () {
alert('动画完成了!!!')
})
滑动
滑动动画: 不断改变元素的高度实现
1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩
显示与隐藏
显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
自定义动画
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画
<style type="text/css">
* {margin: 0px;}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background: red;
}
</style>
<button id="btn1">逐渐扩大</button>
<button id="btn2">向右下移动</button>
<button id="btn3">向左上移动</button>
<button id="btn4">停止动画</button>
<div class="div1">
纵有疾风起，人生不言弃！
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
var $div1 = $('.div1');
$('#btn1').click(function () {
/*$div1.animate({
width:200,
height:200,
},1000)*/
$div1
.animate({
width:200,
},1000)
.animate({
height:200,
},1000)
})
$('#btn2').click(function () {
$div1.animate({
left:500,
top:100,
},1000)
})
$('#btn3').click(function () {
$div1.animate({
left:'-=100',
top:'-=20',
},1000)
})
$('#btn4').click(function () {
$div1.stop()
})
</script>
多库共存
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
<script type="text/javascript" src="js/myLib.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// 释放$的使用权
jQuery.noConflict()
// 调用myLib中的$
$()
// 要想使用jQuery的功能, 只能使用jQuery
jQuery(function () {
console.log('文档加载完成')
})
console.log('+++++')
</script>
onload与ready的区别
区别: window.onload与 $(document).ready()
* window.onload
* 包括页面的图片加载完后才会回调(晚)
* 只能有一个监听回调
* $(document).ready()
* 等同于: $(function(){})
* 页面加载完就回调(早)
* 可以有多个监听回调
自定义jq插件
扩展插件
扩展jQuery函数的工具对象
$.extend(obj)
扩展jQuery对象的工具对象
$.fn.extend(obj)
/* 自定义简单插件：
需求：
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
*/
(function () {
// 扩展$的方法
$.extend({
min: function (a, b) {
return a < b ? a : b
},
max: function (a, b) {
return a > b ? a : b
},
leftTrim: function (str) {
return str.replace(/^\s+/, '')
},
rightTrim: function (str) {
return str.replace(/\s+$/, '')
}
})
// 扩展jQuery对象的方法
$.fn.extend({
checkAll: function () {
this.prop('checked', true) // this是jQuery对象
},
unCheckAll: function () {
this.prop('checked', false)
},
reverseCheck: function () {
// this是jQuery对象
this.each(function () {
// this是dom元素
this.checked = !this.checked
})
}
})
})()
jQuery-validation
表单验证
- 参考源码里的例子
- 给标签添加属性来制定验证规则
- 使用$().validate(obj)来开启验证
