JQuery
1.JQ设置缓存数据
1.1 程序中保存数据的方式
- 变量,数组,对象,本地存储,属性,自定义属性…
1.2JQ通过data方法设置/获取数据
-
语法
$对象.data('键', '值'); //设置 $对象.data('键'); // 获取 代码演示: $('div').data('myage', 18); console.log($('div').data('myage'));
-
与attr区别
1.attr是将值通过自定义属性的方式将值保存到标签上 2.data是将值保存到标签上,但是在标签上无法体现
2.JQ方式获取元素大小和位置
1.1 JQ获取元素大小
-
获取元素大小
-
$对象.width()
语法: $对象.width(); //获取当前元素大小,只包含内容区域大小 代码演示: console.log($('div').width());
-
$对象.height()
语法: $对象.height(); //获取当前元素高度,只包含内容区域高度 代码演示: console.log($('div').height());
-
$对象.innerWidth()
语法: $对象.innerWidth(); //获取当前元素宽度 = 内容区域大小 + 内边距 代码演示: console.log($('div').innerWidth());
-
$对象.innerHeight()
语法: $对象.innerHeight(); //获取当前元素高度 = 内容区域大小 + 内边距 代码演示: console.log($('div').innerHeight());
-
$对象.outerWidth([booloean])
语法: $对象.outerWidth(); //获取当前元素宽度 = 内容区域大小 + 内边距 +边框 代码演示: console.log($('div').outerWidth(false)); //注意,默认是false,可以不用写
-
$对象.outerHeight([boolean])
语法: $对象.outerHeight(true); //获取当前元素高度= 内容区域大小 + 内边距 +边框 + 外边距 代码演示: console.log($('div').outerHeight(true));
-
-
设置元素大小
-
$对象.width(值)
$对象.height(值)
扫描二维码关注公众号,回复: 12224993 查看本文章代码演示: $('div').width('200').height('200'); //注意: 1. 在设置值的时候可以带单位px也可以不用带单位px
-
$对象.innerWidth(值)
$对象.innerHeight(值)
代码演示: $('div').innerWidth('200').innerHeight('200'); //注意: 1. 此时设置的值中已经包含内边距,内边距默认为0,如果在css中给当前元素设置内边距,则元素大内容区域大小会发生改变
-
$对象.outerWidth(值)
$对象.outerHeight(值)
代码演示: $('div').outerWidth('200', true).outerHeight('200', true); //注意 1. 此时设置的值是包含外边距的,如果通过css给当前元素设置外边距,则元素内容区域大小会发生改变
-
1.2JQ获取元素位置
-
offset()
语法: $(对象).offset(); //总结: 1. $对象.offset() 返回的是一个对象 2. $对象.offset() 返回对象中包含 left 属性 和 top属性 3. 获取当前元素的位置是相对整个页面,不是相对父元素 4. 类似于固定定位(相对视口或者文档) //代码演示: $('.one').offset().left $('.one').offset().top
-
position()
语法: $(对象).position(); //总结: 1. $对象.position() 返回的是一个对象 2. $对象.position() 返回对象中包含 left 属性和 top属性 3. 获取当前元素的位置,如果当前父元素没有定位,相对整个页面,如果父元素有定位,参照父元素 4. 类似于绝对定位 //代码演示: $('.one').position().left $('.one').position().top
-
scrollTop()
语法: $(对象).scrollTop(); $(对象).scrollleft(); //总结: 1. 获取当前元素(内容)滚动出去的距离 2. 如果希望在程序中获取当前距离大小,需要在scroll事件中获取 //代码演示: $('.box').scroll(function(){ console.log($(this).scrollTop()); });
1.3 案例-返回顶部案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.btn {
width: 200px;
height: 80px;
background-color: orange;
text-align: center;
line-height: 80px;
cursor: pointer;
position: fixed;
right: 20px;
bottom: 30px;
display: none;
}
</style>
</head>
<body>
<div class="btn">返回顶部</div>
<script src="./jQuery.min.js"></script>
<script>
//1. 给window注册滚动事件
$(window).scroll(function(){
//2. 获取到滚动出去的位置
var top = $(this).scrollTop();
//3. 判断当前滚动出去的位置 1500
if(top >= 1500) {
//4. 显示div
$('div').fadeIn('fast');
}else {
$('div').fadeOut('fast');
}
})
//2. 给按钮注册点击事件
// 注意: 如果希望页面滚动条以动画的形式滚动,则需要给html设置动画位置即可
$('div').click(function(){
$(window).scrollTop(0);
//以动画的形式设置
// $('html').animate({
// 'scrollTop': 0
// })
})
</script>
</body>
</html>
1.4 案例-电梯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.other {
width: 980px;
height: 300px;
margin: 0 auto;
background-color: skyblue;
text-align: center;
line-height: 300px;
font-size: 100px;
font-weight: 700;
}
.content {
width: 980px;
margin: 15px auto;
}
.item {
width: 100%;
height: 200px;
background-color: orange;
margin: 15px 0;
font-size: 40px;
}
.footer {
width: 980px;
height: 500px;
background-color: skyblue;
margin: 0 auto;
text-align: center;
line-height: 500px;
font-size: 100px;
font-weight: 700;
}
.floor {
width: 100px;
text-align: center;
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.floot_item {
height: 50px;
line-height: 50px;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.floot_item.active {
background-color: #e1251b;
color: #fff;
}
</style>
</head>
<body>
<div class="other">网页其他内容区域</div>
<div class="content">
<div class="item" id="sk">秒杀</div>
<div class="item" id="ts">特色</div>
<div class="item" id="tj">推荐</div>
<div class="item" id="kf">客服</div>
<div class="item" id="fk">反馈</div>
</div>
<div class="footer">网页其他内容区域</div>
<!-- 楼层 -->
<div class="floor">
<div class="floot_item" data-msg="sk">秒杀</div>
<div class="floot_item" data-msg="ts">特色</div>
<div class="floot_item" data-msg="tj">推荐</div>
<div class="floot_item" data-msg="kf">客服</div>
<div class="floot_item" data-msg="fk">反馈</div>
</div>
<script src="./jQuery.min.js"></script>
<script>
//功能1: 点击每一个按钮,设置背景颜色
$('.floot_item').click(function(){
//点击的时候,页面滚动时候还会设置样式,所以将该处代码去掉即可
// $(this).addClass('active').siblings().removeClass('active');
//功能2: 点击当前按钮,选中对应的内容区域,设置内容滚动到当前位置
var id = $(this).attr('data-msg');
var top = $('#'+id).offset().top;
$('html').stop().animate({
scrollTop : top
})
// 或者
// $(window).scrollTop(top);
})
//功能3: 拖拽滚动条设置按钮样式
$(window).scroll(function(){
//获取当前滚动的位置(加20的目的是为了拖拽滚动条的时候更好的选中对应的内容,默认内容之间有15像素的间距)
var position = $(this).scrollTop() + 20;
//获取每一个元素在网页中的位置
$('.item').each(function(index, item1){
if(position >= $(item1).offset().top) {
$('.floot_item').eq($(item1).index()).addClass('active').siblings().removeClass('active');
}else {
$('.floot_item').eq($(item1).index()).removeClass('active');
}
})
});
</script>
</body>
</html>
3.JQ方式注册事件
1.1 通过常规方式注册事件
事件源.事件类型(function(){
});
//代码演示:
$('.box').click(function(){
$(this).css('background','pink');
});
$('.box').mouseenter(function(){
$(this).css('background','blue');
});
$('.box').mouseleave(function(){
$(this).css('background', 'red')
});
特点:
1. 只能给事件源注册一个事件
2. 如果注册多个事件,重复设置,不符合JQ的特性(do more do less)
1.2 通过on方式注册事件
事件源.on('事件类型', function(){
});
//代码演示:
$('.box').on('click', function(){
console.log(123);
})
事件源.on({
事件类型 : function(){
},
事件类型 : function(){
}
})
//代码演示:
$('.box').on({
click: function(){
$(this).css('background','blue');
},
mouseenter: function(){
$(this).css('background', 'pink');
}
})
//如果事件中的代码相同还可以这样写:
$('.box').on('click mouseenter mouseleave', function(){
console.log(123);
})
1.3 通过委托方式注册事件
父事件源.on('事件类型', '子选择器', function(){
})
// 代码演示:
$('.box').on('click', '.one', function(){
console.log(123);
})
// 注意:
// 1. 如果页面中的元素是动态创建的,给元素注册事件,需要使用委托的方式
//代码演示:
$('.box').on('click', '.one', function(){
console.log(123);
})
$('<div class="one"></div>').appendTo('.box');
1.4案例-发布微博案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.msg {
width: 980px;
padding-bottom: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
textarea {
width: 880px;
height: 100px;
border: 0 none;
border: 1px solid orange;
resize: none;
outline-style: none;
border-radius: 10px;
display: block;
margin: 50px auto 0 auto;
padding-left: 20px;
padding-top: 20px;
box-sizing: border-box;
}
.btn {
width: 80px;
height: 40px;
display: block;
float: right;
margin-right: 50px;
margin-top: 20px;
background-color: blue;
color: #fff;
text-align: center;
text-decoration: none;
line-height: 40px;
border-radius: 10px;
clear: both;
}
.content {
width: 880px;
margin: 80px auto 0 auto;
}
.item {
height: 50px;
line-height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 20px;
}
.item p {
float: left;
}
.del {
float: right;
text-decoration: none;
color: #999;
}
.del:hover {
color: orange;
}
</style>
</head>
<body>
<div class="msg">
<textarea></textarea>
<a href="javascript:;" class="btn">发布</a>
<div class="content">
</div>
</div>
<script src="./jQuery.min.js"></script>
<script>
var input_v = $('textarea');
var btn = $('.btn');
btn.click(function(){
var item = $(`<div class="item">
<p>${
input_v.val()}</p>
<a href="javascript:;" class="del">删除</a>
</div>`);
$('.content').prepend(item);
})
$('.content').on('click', '.del', function(){
if(confirm('确定删除么?')) {
$(this).parents('.item').remove();
}
})
</script>
</body>
</html>
1.5 解绑事件
-
off()
$对象.off([事件名]); //代码演示1: $('.box').click(function(){ alert(123); }) $('.box').off(); //代码演示2: $('div').on('click', function(){ alert(123); }) $('.box').off(); // 如果元素身上有很多事件如何解绑? $('.box').on({ click: function() { alert(123); }, mouseenter: function() { alert(789); } }) $('.box').off(); 或者: $('.box').off('mouseenter'); // 总结 1. 如果off() 中没有设置任何参数,代表将所有的事件移除 2. 如果要移除对应的事件,在off方法中设置对应的方法名称即可
-
off()解绑委托事件
$父元素对象.off('事件类型', '选择器'); // 代码演示: $('.box').on('click', '.one', function(){ console.log(123); }) $('.box').off('click', '.one');
-
one()
$对象.one('事件类型', function(){ }) //总结 1. 通过one方式给元素注册事件,只能执行一次
4. 自动触发事件
1.1 事件类型()
$对象.事件类型();
//原生写法
var div = document.querySelector('div');
div.onclick = function(){
this.style.background = 'pink';
}
div.click();
//JQ方式
var div = $('div');
div.click(function(){
$(this).css('background','pink');
})
div.click();
1.2 trigger方式
$对象.trigger('事件类型');
var div = $('div');
div.click(function(){
$(this).css('background','pink');
})
div.trigger('click');
5. JQ事件对象参数
1.1 绍事件对象参数
//原生:获取鼠标点击位置
var div = document.querySelector('div');
div.onclick = function(e){
var x = e.clientX;
console.log(x);
}
//JQ方式;
var div = $('div');
div.click(function(e){
console.dir(e);
var x = e.clientX;
console.log(x);
})
//总结: JQ中事件对象参数与DOM中的事件对象参数操作方式一样
//备注:
// 1.阻止事件冒泡 e.stopPropagation();
// 2.阻止默认行为: e.preventDefault()
6. JQ拷贝
1.1 extend
语法:
$.extend([deep], targetObject, currentObject);
参数介绍:
1. deep : 布尔类型 默认值是 false,
false 代表是浅拷贝 (浅拷贝中如果遇到对象,将对象的地址赋值)
true 代表深拷贝 (深拷贝中如果遇到对象,将对象直接拷贝赋值)
2. targetObject: 拷贝后赋值的对象
3. currentObject: 被拷贝的对象
//代码演示浅拷贝 : 浅拷贝遇到对象的时候,是将对象对应的内存地址进行拷贝复制
var obj1 = {
uname: '张三',
uage : 28,
msg : {
uheight: 180
}
}
var obj2 = {
};
obj2 = $.extend(obj2, obj1);
obj2.uname = '李四';
console.log(obj2);
console.log(obj1);
// 代码演示深拷贝: 深拷贝的时候遇到对象,是将对象的值重新复制一份,然后将新的内存地址赋值给另外一个变量
var obj1 = {
uname: '张三',
uage : 28,
msg : {
uheight: 180
}
}
var obj2 = {
};
obj2 = $.extend(true,obj2, obj1);
obj2.msg.uheight = '190';
console.log(obj2);
console.log(obj1);
7. 扩展部分
1.1 插件介绍
-
作用
提高代码效率
-
全屏切换插件
-
插件地址: https://github.com/alvarotrigo/fullPage.js
-
中文地址: http://www.dowebok.com/demo/2014/77/
-
使用步骤
-
下载插件
-
设置html结构
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
-
引用文件
//JQ插件依赖于jQ,第一步必须先引用jQ插件 <script type="text/javascript" src="jQuery.min.js"></script> //引用插件文件 <script type="text/javascript" src="fullpage.min.js"></script> //引用插件样式表 <link rel="stylesheet" href="fullpage.css">
-
设置入口函数
$(function(){ $('#fullpage').fullpage(); });
-
基本配置
$(function(){ $('#fullpage').fullpage({ // 设置背景颜色 sectionsColor : ['#ccc', 'red', 'blue', 'green'], //显示导航 navigation: true, //导航位置 navigationPosition: 'right', //是否循环 loopTop: true, loopBottom: true }); });
-
-
懒加载插件
-
插件地址: http://www.jq22.com/jquery-info11629
-
使用步骤
-
下载插件
-
设置HTML结构
<img data-lazy-src="..." /> 注意: 图片路径属性必须设置如上方式
-
引用文件
<script type="text/javascript" src="jQuery.min.js"></script> <script type="text/javascript" src="EasyLazyload.min.js"></script> 注意: 1. 懒加载js文件必须放到html结构后面引用
-
调用函数
lazyLoadInit({ // 显示时间 showTime: 0 });
-
-
1.2 其他JQ插件库
http://www.jq22.com/
8. 综合案例
1.1 在线演示地址
http://www.todolist.cn/
1.2 知识点-引用
-
本地存储
-
设置
localStorage.setItem(key, value);
-
获取
localStorage.getItem(key);
-
总结
- 在保存数据的时候,需要将对象转化为字符串进行保存
- 得到的数据也是一个字符串,如果希望继续操作则需要将字符串转化为对象
-
-
对象转字符串
JSON.stringify(对象);
-
字符串转对象
JSON.parse(字符串);
-
从数组中删除值
数组.splice(索引,个数)
1.3 实现添加操作
-
功能一:
-
给输入框注册键盘事件
-
获取输入框中的值添加到本地存储中
☞: 如果本地存储有值,则将数据更新到原来的数据中 ☞: 如果本地存储中没有值,则直接创建一条新的数据到本地存储中
-
获取本地存储数据,更加数据数量,动态创建li标签添加到 ol标签中
-
默认加载数据
-
-
功能二:
-
点击复选框,修改状态
-
将已完成的数据动态加载到ul列表中
注意: 1.先给ol标签中的复选框注册事件 2.当前复选框的索引与其父元素的索引位置一样,所以在遍历父元素的时候,将父元素的索引值保存到当前标签上 3.加载数据的时候,要按照是否完成的状态动态显示对应的数据,既要通过条件判断实现 4.给ul动态创建元素的时候,记得要给ul标签先清空内容 5.最后同样给ul标签中的input标签注册点击事件
-
-
功能三:删除
如有不足,请多指教,
未完待续,持续更新!
大家一起进步!