jQuery函数与对象
<!--
1. jQuery核心函数
* 简称: jQuery函数($/jQuery)
* jQuery库向外直接暴露的就是$/jQuery
* 引入jQuery库后, 直接使用$即可
* 当函数用: $(xxx)
* 当对象用: $.xxx()
2. jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
-->
jQuery的2把利器
jQuery核心函数
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
//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')
})
})
/*需求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核心对象
<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
-->
使用jQuery核心函数
$工具方法
//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字符串
*/
JQuery属性
//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)
})
CSS
//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
})
offset和position
<!--
获取/设置标签的位置数据
* offset(): 相对页面左上角的坐标
* position(): 相对于父元素左上角的坐标
-->
var offset = $('.div1').offset()
console.log(offset.left, offset.top)
scroll
//1. 得到div或页面滚动条的坐标
$('#btn1').click(function () {
console.log($('div').scrollTop())
// console.log($('html').scrollTop()+$('body').scrollTop())
console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome
})
//2. 让div或页面的滚动条滚动到指定位置
$('#btn2').click(function () {
$('div').scrollTop(200)
$('html,body').scrollTop(300)
})
元素的尺寸
<!--
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
-->
jquery对象的过滤
何为过滤：jquery对象里面包括了多个dom元素，要从中超出几个匹配的dom元素
<!--
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
-->
var $lis = $('ul>li')
//1. ul下li标签第一个
// $lis.first().css('background', 'red')
// $lis[0].style.background = 'red'
//2. ul下li标签的最后一个
// $lis.last().css('background', 'red')
//3. ul下li标签的第二个
// $lis.eq(1).css('background', 'red')
//4. ul下li标签中title属性为hello的
// $lis.filter('[title=hello]').css('background', 'red')
//5. ul下li标签中title属性不为hello的
// $lis.not('[title=hello]').css('background', 'red')
// $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')
//6. ul下li标签中有span子标签的
$lis.has('span').css('background', 'red')jQuery对象的查找
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签
eg:
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')文档增删改
1. 添加/替换元素
* append(content)
向当前匹配的所有元素内部的最后插入指定内容
* prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容
* before(content)
将指定内容插入到当前所有匹配元素的前面
* after(content)
将指定内容插入到当前所有匹配元素的后面替换节点
* replaceWith(content)
用指定内容替换所有匹配的标签删除节点
2. 删除元素
* empty()
删除所有匹配元素的子元素
* remove()
删除所有匹配的元素
eg：
//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)
//3. 在id为ul1的ul下的li(title为hello)的前面添加span
// $ul1.children('li[title=hello]').before('<span>before()添加的span</span>')
// $('#ul1>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>')
//5. 将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('<p>replacewith()替换的p</p>')
//6. 移除id为ul2的ul下的所有li
// $('#ul2').empty() // <p>也会删除
$('#ul2>li').remove()事件绑定与解绑
//1. 给.out绑定点击监听(用两种方法绑定)
/*$('.out').click(function () {
console.log('click out')
})*/
$('.out').on('click', function () {
console.log('on click out')
})
//2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
/*
$('.inner')
.mouseenter(function () { // 进入
console.log('进入')
})
.mouseleave(function () { // 离开
console.log('离开')
})
*/
/*
$('.inner')
.on('mouseenter', function () {
console.log('进入2')
})
.on('mouseleave', function () {
console.log('离开2')
})
*/
$('.inner').hover(function () {
console.log('进入3')
}, function () {
console.log('离开3')
})
//3. 点击btn1解除.inner上的所有事件监听
$('#btn1').click(function () {
$('.inner').off()
})
//4. 点击btn2解除.inner上的mouseenter事件
$('#btn2').click(function () {
$('.inner').off('mouseenter')
})
//5. 点击btn3得到事件坐标
$('#btn3').click(function (event) { // event事件对象
console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
console.log(event.clientX, event.clientY) // 原点为窗口的左上角
console.log(event.pageX, event.pageY) // 原点为页面的左上角
})
//6. 点击.inner区域, 外部点击监听不响应
$('.inner').click(function (event) {
console.log('click inner')
//停止事件冒泡
event.stopPropagation()
})
//7. 点击链接, 如果当前时间是偶数不跳转
$('#test4').click(function (event) {
if(Date.now()%2===0) {
event.preventDefault()
}
})事件面试题
区别mouseover与mouseenter?
* mouseover: 在移入子元素时也会触发, 对应mouseout
* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是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)
内置动画
淡入淡出
淡入淡出: 不断改变元素的透明度(opacity)来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏
/*
需求：
1. 点击btn1, 慢慢淡出
* 无参
* 有参
* 字符串参数
* 数字参数
2. 点击btn3, 慢慢淡入
3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
*/
var $div1 = $('.div1')
$('#btn1').click(function () {
// $div1.fadeOut()
// $div1.fadeOut('slow')
$div1.fadeOut(1000, function () {
alert('动画完成了!!!')
})
})
$('#btn2').click(function () {
$div1.fadeIn()
})
$('#btn3').click(function () {
$div1.fadeToggle()
})滑动动画
滑动动画: 不断改变元素的高度实现
1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩
/*
需求：
1. 点击btn1, 向上滑动
2. 点击btn2, 向下滑动
3. 点击btn3, 向上/向下切换
*/
var $div1 = $('.div1')
// 1. 点击btn1, 向上滑动
$('#btn1').click(function () {
$div1.slideUp(3000)
})
// 2. 点击btn2, 向下滑动
$('#btn2').click(function () {
$div1.slideDown()
})
// 3. 点击btn3, 向上/向下切换
$('#btn3').click(function () {
$div1.slideToggle()
})显示与隐藏
显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
需求:
1. 点击btn1, 立即显示
2. 点击btn2, 慢慢显示
3. 点击btn3, 慢慢隐藏
4. 点击btn4, 切换显示/隐藏
*/
var $div1 = $('.div1')
//1. 点击btn1, 立即显示
$('#btn1').click(function () {
$div1.show()
})
//2. 点击btn2, 慢慢显示
$('#btn2').click(function () {
$div1.show(1000)
})
//3. 点击btn3, 慢慢隐藏
$('#btn3').click(function () {
$div1.hide(1000)
})
//4. 点击btn4, 切换显示/隐藏
$('#btn4').click(function () {
$div1.toggle(1000)
})自定义动画
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画
/*
需求：
1. 逐渐扩大
1). 宽/高都扩为200px
2). 宽先扩为200px, 高后扩为200px
2. 移动到指定位置
1).移动到(500, 100)处
2).移动到(100, 20)处
3.移动指定的距离
1). 移动距离为(100, 50)
2). 移动距离为(-100, -20)
4. 停止动画
*/
var $div1 = $('.div1')
/*
1. 逐渐扩大
1). 宽/高都扩为200px
2). 宽先扩为200px, 高后扩为200px
*/
$('#btn1').click(function () {
/*
$div1.animate({
width: 200,
height: 200
}, 1000)
*/
$div1
.animate({
width: 200
}, 1000)
.animate({
height: 200
}, 1000)
})
/*
2. 移动到指定位置
1).移动到(500, 100)处
2).移动到(100, 20)处
*/
$('#btn2').click(function () {
// 1).移动到(500, 100)处
/*
$div1.animate({ // 向右下移动
left: 500,
top: 100
}, 1000)
*/
// 2).移动到(100, 20)处
$div1.animate({ // 向左上移动
left: 100, // 300
top: 20 // 50
}, 1000)
})
/*
3.移动指定的距离
1). 移动距离为(100, 50)
2). 移动距离为(-100, -20)
*/
$('#btn3').click(function () {
// 1). 移动距离为(100, 50)
/*$div1.animate({
left: '+=100',
top: '+=50'
}, 1000)*/
// 2). 移动距离为(-100, -20)
$div1.animate({
left: '-=100',
top: '-=20'
}, 3000)
})
$('#btn4').click(function () {
$div1.stop()
})多库共存
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
// 释放$的使用权
jQuery.noConflict()
// 调用myLib中的$
$()
// 要想使用jQuery的功能, 只能使用jQuery
jQuery(function () {
console.log('文档加载完成')
})
console.log('+++++')js是异步执行的
onload与ready
区别: window.onload与 $(document).ready()
* window.onload
* 包括页面的图片加载完后才会回调(晚)
* 只能有一个监听回调
* $(document).ready()
* 等同于: $(function(){})
* 页面加载完就回调(早)
* 可以有多个监听回调
jquery插件
扩展插件
/*
需求：
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
})
}
})
})()jQueryValidate
<form id="myForm" action="xxx">
<p>用户名(必须, 最小6位): <input name="username" type="text" required minlength="6"></p>
<p>密码(必须,6到8位): <input id="password" name="pwd1" type="password" required minlength="6" maxlength="8"></p>
<p>确认密码(与密码相同): <input name="pwd2" type="password" equalTo="#password"></p>
<p><input type="submit" value="注册"></p>
</form>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
/*
声明式验证: 程序员只需要声明各种验证规则, 可以自定义验证错误信息
*/
//对此表单开户验证
$('#myForm').validate({
messages: {
username: {
required: '用户名是必须的',
minlength: '用户名至少为6位'
},
pwd1: {
required: '密码是必须的',
minlength: '密码至少为6位',
maxlength: '密码最多8位'
},
pwd2: {
equalTo: '必须与密码相同'
}
}
})
</script>jQueryUI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<!-- Accordion: 手风琴-->
<h2>1. Accordion: 手风琴</h2>
<div id="accordion">
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<!-- 2. Autocomplete: 自动搜索匹配 -->
<h2>Autocomplete</h2>
<div>
<input id="autocomplete" title="type "a"">
</div>
<!-- 3. Tabs: 选项卡 -->
<h2 >3. Tabs: 选项卡</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
// 1. Accordion: 手风琴
$('#accordion').accordion()
// 所有数据的数组
var dataSource = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
]
// 2. Autocomplete: 自动搜索匹配
$( "#autocomplete" ).autocomplete({
source: dataSource // 数据源
});
// 3. Tabs: 选项卡
$('#tabs').tabs()
</script>
</body>
</html>layDate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
<input class="laydate-icon" id="demo" value="2014-6-25更新">
<script type="text/javascript">
;!function(){
laydate.skin('molv');
laydate({
elem: '#demo'
})
}()
</script>
<div id="test1" class="laydate-icon"></div>
<script>
laydate({ // 配置对象
elem: '#test1',
format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas);
}
});
</script>
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
elem: '#hello3',
min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>
</body>
</html>
练习
多Tab点击切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多tab点击切换</title>
<style>
*{
margin:0;
padding:0;
}
h1{
font-weight: bold;
}
#tab li{
float:left;
list-style:none;
width:80px;
height:40px;
line-height: 40px;
cursor: pointer;
text-align:center;
}
#tab1,#div1{
background-color:#ffcc00 ;
}
#tab2,#div2{
background-color:#ff00cc ;
}
#tab3,#div3{
background-color:#00ccff ;
}
#container{
position: relative;
}
#div1,#div2,#div3{
width:300px;
height:100px;
padding:30px;
position: absolute;
/* 这里top为40px是因为上面的ul占面积为40px，不设置的话就覆盖它了 */
top:40px;
left:0;
}
</style>
</head>
<body>
<h1>多Tab点击切换</h1>
<ul id="tab">
<li id="tab1">10元套餐</li>
<li id="tab2">30元套餐</li>
<li id="tab3">50元套餐</li>
</ul>
<div id="container">
<div id="div1">
10元套餐详情：<br/> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="div2" style="display: none">
30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="div3" style="display: none">
50元包月详情：<br/> 每月无限量随心打
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
var $contains=$('#container>div');
// 给3个li加监听
// $('#tab>li').click(function(){
// $contains.css('display', 'none');
// var index=$(this).index();
// $contains[index].style.display= 'block';//注意要加引号
// })
//法2
var nowIndex=0;
$('#tab>li').click(function(){
$contains[nowIndex].style.display= 'none';
var index=$(this).index();
nowIndex=index;
$contains[index].style.display= 'block';
})
</script>
</body>
</html>返回顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_回到顶部</title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 1050px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#to_top').click(function () {
// 瞬间滚到顶部
//$('html,body').scrollTop(0)
// 平滑滚到顶部
// 总距离
var $page = $('html,body')
var distance = $('html').scrollTop() + $('body').scrollTop()
// 总时间
var time = 500
// 间隔时间
var intervalTime = 50
var itemDistance = distance/(time/intervalTime)
// 使用循环定时器不断滚动
var intervalId = setInterval(function () {
distance -= itemDistance
// 到达顶部, 停止定时器
if(distance<=0) {
distance = 0 //修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
}, intervalTime)
})
</script>
</body>
</html>导航动态显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_导航动态显示效果</title>
<style rel="stylesheet">
* {
margin: 0;
padding: 0;
word-wrap: break-word;
word-break: break-all;
}
body {
background: #FFF;
color: #333;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}
a {
color: #0287CA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, li {
list-style: none;
}
img {
border: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
html {
overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
}
#navigation {
width: 784px;
padding: 8px;
margin: 8px auto;
background: #3B5998;
height: 18px;
}
#navigation ul li {
float: left;
margin-right: 14px;
position: relative;
z-index: 100;
}
#navigation ul li a {
display: block;
padding: 0 8px;
background: #EEEEEE;
font-weight: 700;
}
#navigation ul li a:hover {
background: none;
color: #fff;
}
#navigation ul li ul {
background-color: #88C366;
position: absolute;
width: 80px;
overflow: hidden;
display: none;
}
#navigation ul li ul li {
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li>
<a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#navigation>ul>li:has(ul)').hover(function () {
//动画展开
$(this).children('ul').stop(true).slideDown()
}, function () {
// 动画收缩
$(this).children('ul').stop(true).slideUp()
})
</script>
</body>
</html>
爱好选择器——jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选练习</title>
</head>
<body>
<form >
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" value="全选" id="checkedAllBtn">
<input type="button" value="全不选" id="checkedNoBtn">
<input type="button" value="反选" id="checkedRevBtn">
<input type="button" value="提交" id="sendBtn">
</form>
<script src="../js/jquery-1.10.1.js"></script>
<script>
/*
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
*/
var $checkedAllBox=$('#checkedAllBox');
var $items=$(':checkbox[name=items]');
// 1. 点击'全选': 选中所有爱好
$('#checkedAllBtn').click(function(){
$items.prop('checked',true);
$checkedAllBox.prop('checked',true);
})
// 2. 点击'全不选': 所有爱好都不勾选
$('#checkedNoBtn').click(function(){
$items.prop('checked',false);
$checkedAllBox.prop('checked',false);
})
// 3. 点击'反选': 改变所有爱好的勾选状态
$('#checkedRevBtn').click(function(){
$items.each(function(){
this.checked=!this.checked;
})
$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0);
})
// 4. 点击'提交': 提示所有勾选的爱好
$('#sendBtn').click(function(){
$items.filter(':checked').each(function(){
alert(this.value)
})
})
// 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
$checkedAllBox.click(function(){
$items.prop('checked',this.checked)
})
// 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$items.click(function () {
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
</script>
</body>
</html>增加删除记录
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
1. 添加
2. 删除
*/
$('#addEmpButton').click(function () {
//1. 收集输入的数据
var $empName = $('#empName')
var $email = $('#email')
var $salary = $('#salary')
var empName = $empName.val()
var email = $email.val()
var salary = $salary.val()
//2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中
/*
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
*/
var $xxx = $('<tr></tr>')
.append('<td>'+empName+'</td>') // 拼串
.append('<td>'+email+'</td>')
.append('<td>'+salary+'</td>')
.append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
.appendTo('#employeeTable>tbody')
//3. 清除输入
$empName.val('')
$email.val('')
$salary.val('')
})
// 通过table实现对所有a的click事件委托
$('#employeeTable').delegate('a', 'click', clickDelete)
/*
点击删除的回调函数
*/
function clickDelete () {
var $tr = $(this).parent().parent()
var name = $tr.children(':first').html()
if(confirm('确定删除'+name+'吗?')) {
$tr.remove()
}
return false
}
</script>
</body>
</html>
笔记
-
了解jQuery
-
是什么: What?
-
一个JS函数库: write less, do more
-
封装简化DOM操作(CRUD) / Ajax
-
-
为什么用它: why?
-
强大选择器: 方便快速查找DOM元素
-
隐式遍历(迭代): 一次操作多个元素
-
读写合一: 读数据/写数据用的是一个函数
-
链式调用: 可以通过.不断调用jQuery对象的方法
-
事件处理
-
DOM操作(CUD)
-
样式操作
-
动画
-
浏览器兼容
-
-
如何使用: How?
-
引入jQuery库
-
本地引入与CDN远程引入
-
测试版与生产版(压缩版)
-
-
使用jQuery
-
使用jQuery函数: $/jQuery
-
使用jQuery对象: $xxx(执行$()得到的)
-
-
-
jQuery的2把利器
-
jQuery函数: $/jQuery
-
jQuery向外暴露的就是jQuery函数, 可以直接使用
-
当成一般函数使用人: $(param)
-
param是function: 相当于window.onload = function(文档加载完成的监听)
-
param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
-
param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
-
param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
-
-
当成对象使用: $.xxx
-
each(obj/arr, function(key, value){})
-
trim(str)
-
-
-
jQuery对象
-
包含所有匹配的n个DOM元素的伪数组对象
-
执行$()返回的就是jQuery对象
-
基本行为:
-
length/size(): 得到dom元素的个数
-
[index] 得到指定下标对应的dom元素
-
each(function(index, domEle){}): 遍历所有dom元素
-
index(): 得到当前dom元素在所有兄弟中的下标
-
-
-
选择器
-
是什么?
-
有特定语法规则(css选择器)的字符串
-
用来查找某个/些DOM元素: $(selector)
-
-
分类
-
基本
-
#id
-
tagName/*
-
.class
-
selector1,selector2,selector3: 并集
-
selector1selector2selector3: 交集
-
-
层次
-
找子孙后代, 兄弟元素
-
selector1>selector2: 子元素
-
selector1 selector2: 后代元素
-
-
过滤
-
在原有匹配元素中筛选出其中一些
-
:first
-
:last
-
:eq(index)
-
:lt
-
:gt
-
:odd
-
:even
-
:not(selector)
-
:hidden
-
:visible
-
[attrName]
-
[attrName=value]
-
-
表单
-
:input
-
:text
-
:checkbox
-
:radio
-
:checked: 选中的
-
-
-
属性/文本
-
操作标签的属性, 标签体文本
-
attr(name) / attr(name, value): 读写非布尔值的标签属性
-
prop(name) / prop(name, value): 读写布尔值的标签属性
-
removeAttr(name)/removeProp(name): 删除属性
-
addClass(classValue): 添加class
-
removeClass(classValue): 移除指定class
-
val() / val(value): 读写标签的value
-
html() / html(htmlString): 读写标签体文本
-
CSS模块
-
style样式
-
css(styleName): 根据样式名得到对应的值
-
css(styleName, value): 设置一个样式
-
css({多个样式对}): 设置多个样式
-
-
位置坐标
-
offset(): 读/写当前元素坐标(原点是页面左上角)
-
position(): 读当前元素坐标(原点是父元素左上角)
-
scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
-
-
尺寸
-
width()/height(): width/height
-
innerWidth()/innerHeight(): width + padding
-
outerWidth()/outerHeight(): width + padding + border
-
-
筛选模块
-
过滤
-
在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
-
first()
-
last()
-
eq(index)
-
filter(selector): 对当前元素提要求
-
not(selector): 对当前元素提要求, 并取反
-
has(selector): 对子孙元素提要求
-
-
查找
-
查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
-
children(selector): 子元素
-
find(selector): 后代元素
-
preAll(selector): 前的所有兄弟
-
siblings(selector): 所有兄弟
-
parent(): 父元素
-
-
文档处理(CUD)模块
-
增加
-
append() / appendTo(): 插入后部
-
preppend() / preppendTo(): 插入前部
-
before(): 插到前面
-
after(): 插到后面
-
-
删除
-
remove(): 将自己及内部的孩子都删除
-
empty(): 掏空(自己还在)
-
-
更新
-
replaceWith()
-
-
事件模块
-
绑定事件
-
eventName(function(){})
-
on('eventName', function(){})
-
常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
-
hover(function(){}, function(){})
-
-
解绑事件
-
off('eventName')
-
-
事件委托
-
理解: 将子元素的事件委托给父辈元素处理
-
事件监听绑定在父元素上, 但事件发生在子元素上
-
事件会冒泡到父元素
-
但最终调用的事件回调函数的是子元素: event.target
-
-
好处
-
添加新的子元素, 自动有事件响应处理
-
减少监听的数量(n==>1)
-
-
编码
-
delegate(selector, 'eventName', function(event){}) // 回调函数中的this是子元素
-
undelegate('eventName')
-
-
-
事件坐标
-
event.offsetX: 原点是当前元素左上角
-
event.clientX: 原点是窗口左上角
-
event.pageX: 原点是页面左上角
-
-
事件相关
-
停止事件冒泡: event.stopPropagation()
-
阻止事件的默认行为: event.preventDefault()
-
-
动画效果
-
在一定的时间内, 不断改变元素样式
-
slideDown()/slideUp()/slideToggle()
-
fadeOut()/fadeIn()/fadeToggle()
-
show()/hide()/toggle()
-
animate({结束时的样式}, time, fun)
-
stop()
-
-
插件机制
-
扩展jQuery函数对象的方法 $.extend({ xxx: fuction () {} // this是$ }) $.xxx()
-
扩展jQuery对象的方法 $.fn.extend({ xxx: function(){} // this是jQuery对象 }) $obj.xxx()
-
-
jQuery文档的结构图
jQuery 实战
显示隐藏
hover-----》“我的京东”，就显示，然后页面有很多这个效果的，可以指定一个通用函数来执行。
代码如下：
二级菜单的显示隐藏
category是“全部商品分类”，下面的两个cate-item是那两个二级导航菜单。当hover时，触发的是最后一个孩子，即那个div
搜索框功能
输入关键字，可以显示匹配的结果。但如果框里没有值或者值为空格都不显示，另外失去焦点时不显示。
分享的功能
这里可以切换
源代码
分析：设置一个标识当前的状态
preveAll它是从下到上存储的，所以索引小于2就可以了。
地址显示隐藏
源码：
点击“配送至”后面的框，会显示。失去焦点，不显示；点击叉号，不显示。
则：用链式调用，注意this的变化
tab切换
代码：
解析：
minicart显示隐藏
点击后
代码
解析：
点击切换显示商品详情
代码：
解析：
移动小图片
解析：
切换显示中图
代码：
解析：
放大镜效果
代码：
解析：
/*
11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
*/
function bigImg () {
var $mediumImg = $('#mediumImg')
var $mask = $('#mask') // 小黄块
var $maskTop = $('#maskTop')
var $largeImgContainer = $('#largeImgContainer')
var $loading = $('#loading')
var $largeImg = $('#largeImg')
var maskWidth = $mask.width()
var maskHeight = $mask.height()
var maskTopWidth = $maskTop.width()
var maskTopHeight = $maskTop.height()
$maskTop.hover(function () {// 进入
$mask.show()
// 动态加载对应的大图
// images\products\product-s2-m.jpg
// images/products/product-s2-l.jpg
var src = $mediumImg.attr('src').replace('-m.', '-l.')
$largeImg.attr('src', src)
$largeImgContainer.show()
// 绑定加载完成的监听
$largeImg.on('load', function () { // 大图加载完成
// 得到大图的尺寸
var largeWidth = $largeImg.width()
var largeHeight = $largeImg.height()
// 给$largeImgContainer设置尺寸
$largeImgContainer.css({
width: largeWidth/2,
height: largeHeight/2
})
// 显示大图
$largeImg.show()
// 隐藏加载进度条
$loading.hide()
console.log($largeImg.width(), $largeImg.height())
//鼠标移动的监听
$maskTop.mousemove(function (event) {
/*
1. 移动小黄块
2. 移动大图
*/
/*1. 移动小黄块*/
//计算left/top
var left = 0
var top = 0
// 事件的坐标
var eventLeft = event.offsetX
var eventTop = event.offsetY
left = eventLeft - maskWidth/2
top = eventTop - maskHeight/2
// left在[0, maskTopWidth-maskWidth]
if(left<0) {
left = 0
} else if(left>maskTopWidth-maskWidth) {
left = maskTopWidth-maskWidth
}
// top在[0, maskTopHeight-maskHeight]
if(top<0) {
top = 0
} else if(top>maskTopHeight-maskHeight) {
top = maskTopHeight-maskHeight
}
//给$mask重新定位
$mask.css({
left: left,
top: top
})
/*2. 移动大图*/
// 得到大图的坐标
left = -left * largeWidth / maskTopWidth
top = -top * largeHeight / maskTopHeight
// 设置大图的坐标
$largeImg.css({
left: left,
top: top
})
})
})
}, function () {
$mask.hide()
$largeImgContainer.hide()
$largeImg.hide()
})
}
扫一扫
5729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
