目录
后边的笔记先看这个吧
注意事项
1、 写jquery代码之前,先要引入jquery.min.js文件(如果不引入会报错$ undefined),并且记得写入口函数;
2、 使用class选择器时一定要记得写 [点];
一、 jQuery入门基础知识
1、 jQuery定义
- jQuery是一个快速、简洁的 JavaScript 库,封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
- 学习jQuery本质: 就是学习调用这些函数(方法)。
- 意义:jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
2、 jQuery 的基本使用
2.1、jQuery 的入口函数
等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
<script>
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
</script>
2.2、jQuery 的顶级对象 $
1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。
2.3、 jQuery 对象和 DOM 对象
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
注意:
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法
2.4、jQuery 对象和 DOM 对象的互相转换
- DOM对象 =》jQuery 对象----
$(dom对象);
(单双引号都一样)
$('div');
- DOM对象 《= jQuery 对象
方法一:
$('div')[index];
方法二:
$('div').get(index);
二、 jQuery 常用API
1、选择器
1.1、常见选择器
:checked 选择器 :checked 查找被选中的表单元素,可以根据被选中的表单数量来判断是否为全选状态
重点:筛选方法
关于siblings(selector),可以采用选择器指定想要寻找的兄弟
parents(‘选择器’) 可以返回指定祖先元素
1.2、练习–下拉菜单
- css中的注释没有//,只有/**/;
1.3、 jQuery 里面的排他思想
- 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(function(){
// 隐式迭代给所有的按钮绑定单击事件
$('button').click(function(){
// 单击按钮设置样式
$(this).css("color",'red');
// 将其余兄弟元素的样式清空
$(this).siblings().css("color","");
})
})
1.4、练习–精品服饰
$(function(){
$('#left li').mouseover(function(){
var index = $(this).index();
// 所有的图片处于一列,当其余图片被隐藏就不再占用位置,显示的
// 那张图片就可以独自位于div中了
// 链式编程
$("#content div").eq(index).show().siblings().hide();
})
})
2、样式操作
2.1、操作 css 方法
- 获取属性
$(dom对象).css('属性名');
如果是数值会保留单位 - 修改单个属性
$(dom对象).css('属性名','属性值');
- 修改多个属性:属性名和属性值用冒号隔开, 属性可以不用加引号
$(dom对象).css({'属性名':'属性值','属性名':'属性值'})
2.2、操作类的方法
- 添加类
$(dom对象).addClass('类名');
- 移出类
$(dom对象).removeClass('类名');
- 切换类
$(dom对象).toggleClass('类名');
ps:注意操作类里面的参数不要加点
2.3、练习—tab 栏切换分析
先设置display:none; 然后再让其show()显示,hide()隐藏;
$(function(){
$('.tab_list li').click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index = $(this).index();
$(".tab_con div").eq(index).show().siblings().hide();
})
})
3、jQuery 效果
3.1、隐藏显示切换
show();
hide();
toggle();
(1)参数都可以省略, 无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
3.2、滑动
slideDown();向下滑动,相当于显示
slideUp();向上滑动,相当于隐藏
slideToggel();切换
参数与3.1相同
3.3、事件的切换
- 事件的切换 hover 相当于鼠标移入移出, 只写一个函数则表示移入移出都会触发这个函数,也可以写两个函数当作参数,第一个移入时触发,第二个移出时触发。
// 事件的切换 hover 相当于鼠标移入移出
// 只写一个函数则表示移入移出都会触发这个函数
$('.nav>li').hover(function(){
$(this).children('ul').slideToggle(1000);
})
3.4、动画队列
- 短时间内多次触发一个效果时,会形成一个动画队列,队列中的每个动画都会执行,为了避免这种情况的发生,可以利用stop()停止排队,只执行最后一次;
- 停止排队:在调用动画效果之前调用stop()方法
$('div').stop().show();
3.5、淡入淡出切换及渐变效果
$(function(){
// 获取按钮,依次绑定单击事件
$('button').eq(0).click(function(){
$('div').fadeIn();
})
$('button').eq(1).click(function(){
$('div').fadeOut();
})
$('button').eq(2).click(function(){
$('div').stop().fadeToggle();
})
$('button').eq(3).click(function(){
//渐变必须要指定速度和透明度
$('div').fadeTo(1000,0.1);
})
})
3.6、animate自定义动画
- 只有元素才可以做动画, ( d o c u m e n t ) 没 有 动 画 效 果 , 要 用 (document)没有动画效果,要用 (document)没有动画效果,要用(“body,html”)animate();
- 数值可以不加引号,字符串必须加引号,不能用于改变颜色,只能改变数值类的属性;
$(function(){
$('#btn').click(function(){
$('div').animate({
//数值可以不加引号,字符串必须加引号,不能用于改变颜色
'left':'300px',
'top':300,
'opacity':0.2
},500);
})
3.7、练习–手风琴及链式编程
- 使用链式编程一定注意是哪个对象执行样式,下面这段代码中,首先find的调用对象是this,而siblings的调用对象不是this,而是经过css选择器find(’.small’)后的对象;
$(this).animate({
width:224,
},100).find('.small').fadeOut().siblings('.big').fadeIn();
手风琴思路:
- 鼠标经过某个小li 有两步操作:
- 当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ;
- 其余兄弟小li宽度变为69px,小图片淡入, 大图片淡出;
$(function(){
$('li').mouseenter(function(){
// 鼠标移到图片上,换大图片显示
// 链式编程:鼠标放到当前图片
$(this).animate({
width:224,
},100).find('.small').fadeOut().siblings('.big').fadeIn();
$(this).siblings().animate({
width:69,
},100).find('.small').fadeIn().siblings('.big').fadeOut();
})
})
4、jQuery 属性操作
4.1、prop()对固有属性进行操作
//获取属性值
$('input').prop('type');
//修改属性
$('a').prop('title',"我不好");
4.2、attr()对自定义属性进行操作
$('div').attr('data-index');
$('div').attr('data-index','1');
4.3、data()数据缓存
- 将数据附加到元素上,并不会改变元素的dom结构,数据仅存放在内存中,页面一刷新就会丢失;
- 只能获取存放的数据和 HTML5 自定义属性 data-index ,得到的是数字型
//获取数据
$('div').data('name');
//存放数据
$('div').data('name','张三');
4.4、练习—全选
- 并集选择器:
$('ul,div,a');
- :checked 选择器 :checked 查找被选中的表单元素,可以根据被选中的表单数量来判断是否为全选状态
$(function(){
$('.checkall').change(function(){
//并集选择器
$('.j-checkbox,.checkall').prop('checked',$(this).prop('checked'));
})
$('.j-checkbox').change(function(){
if($('.j-checkbox:checked').length==$('.j-checkbox').length){
$('.checkall').prop('checked',true);
}else{
$('.checkall').prop('checked',false);
}
}
)
})
5、jQuery 内容文本值
5.1、常用方法
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
text() // 获取元素的文本内容
text('内容') // 设置元素的文本内容
val() // 获取表单的值
val('内容') // 设置表单的值
5.2、练习–购物车
- parents(‘选择器’) 可以返回指定祖先元素;
- 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法;
- 用户也可以直接修改表单里面的值,同样要计算小计。 用表单change事件;
- 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计;
- 如果一个元素的class属性中包括了多个值,只需其中一个就可以找到这个元素;
6、 jQuery 元素操作
6.1、遍历元素
方法1:domEle是一个dom对象,不能直接调用jquery方法;
$('div').each(function(index,domEle){
//将三个div中的值累加
// sum += +domEle.innerText; //原生js
sum += +$(domEle).text(); //jquery方法
})
方法2:
var color = ['red','blue','black','yellow'];
$.each(color, function(i,e) {
console.log(i+e);
});
- 方法2比方法1功能更强,方法2可以遍历数组和对象,遍历对象时,i是键,e是值;
重点: 隐式迭代可以通过index()方法获取当前遍历元素的下标,对当前元素进行操作,可以实现对不同元素进行不同的操作;
6.2、创建、添加、删除元素
- 创建
var div1 = $("<div>123</div>");
- 内部添加
$('ul').append(li1); // 添加到所有元素后边
$('ul').prepend(li2); // 添加到所有元素前边
- 外部添加
$('ul').after($('<div>abc</div>')); // 后边
$('ul').before($('<div>efg</div>')); // 前边
- 删除元素
$('div').remove(); //删除自身
$('div').empty(); // 删除内部所有子节点
$('ul').html(""); // 删除内部所有子节点,与empty()作用相同
7、jQuery 尺寸、位置操作
7.1、操作尺寸
// width属性值,相当于$('div').css('width');
console.log($('div').width());
// 算上内边距
console.log($('div').innerWidth());
// 算上内边距和边框
console.log($('div').outerWidth());
// 算上内边距边框和外边距
console.log($('div').outerWidth(true));
7.1、 offset() 设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系,不会随滚轮的改变而改变;
- 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移:offset({ top: 10, left: 30 });
7.2、 position() 获取元素偏移
- 获取相对于定位父元素的偏移量,也包括top和left两个属性;
- 只读,不能修改;
7.3、scrollTop()、scrollLeft()
- 获取元素被卷去的头部或左侧的距离;
- 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部;
7.4、返回顶部的动画效果
- document没有动画,元素body和html才有动画;
$(".back").click(function(){
$('body,html').animate({
scrollTop:0,
},1000);
})
7.5、练习–电梯导航栏(重点)
- 如果两个元素对应的下标相同,那么通过隐式迭代也可以实现对不同元素的不用操作,index()获取下标;
- 可以在class中设置一个无关的相同属性值,这样就可以根据class值选出这些元素,然后再根据下标对其进行不同的操作(也可以用children()方法或者直接用>找亲儿子);
- animate中有scrollTop属性,和scrollTop()方法的作用相同;
- 页面的滚动距离
$(document).scrollTop()
; - window对象具有scroll事件
$(window).scroll(function(){
var top = $('.recommend').offset().top;
if($(document).scrollTop()>=top){
$('.fixedtool').fadeIn();
}else{
$('.fixedtool').fadeOut();
}
- 互斥锁
8、jQuery 事件处理
8.1、on注册事件
// 多个事件多个处理程序
$("#box").on({
click:function(){
$(this).css('background-color','yellow');
},
mouseenter:function(){
$(this).css('background-color','blue');
}
})
// 多个事件一个处理程序
$('#box').on("click mouseenter mouseleave",function(){
alert(111);
})
8.2、 on进行事件的委派
- 事件的委派:两种写法的结果一样,方法二中需要隐式迭代给每个li绑定事件,比方法一的效率低;
-
- 方法一是将事件绑定在ul身上,但是只有li才能触发;
- 事件委派的两大优势:减少了事件的绑定次数;可以为动态创建的元素绑定事件。
// 方法一
$('ul').on('click','li',function(){
alert('aaa');
})
// 方法二(不是事件的委派)
$('ul li').on('click',function(){
alert('aaa');
})
8.3、on给动态创建的元素绑定事件
- 动态创建:在绑定事件之后创建的事件(需要用委派);
$('ol').on('click','li',function(){
alert(111);
})
var li = $("<li>4444</li>");
$('ol').append(li);
8.4、练习–微博发布
- 文本框中的值要用val()方法获取;
- 清空文本框中的值—val("");
- 实现先隐藏后删除
要用委派,因为创建的li元素是在删除按钮绑定事件之后进行的,而事件的绑定实在页面加载后就完成了,故需要用委派来进行动态绑定;
a标签是li标签中的删除按钮;
$("ul").on('click','a',function(){
// slideUp参数中有回调函数,故可以将真正的删除放到回调函数中
$(this).parent().slideUp(1000,function(){
$(this).remove();
});
8.5、off解绑事件
// 事件的解绑
$('div').off(); // 解绑div上所有的事件
$('div').off('click'); // 解绑div的click事件
$('ul').on('click','li',function(){
alert('222');
})
// 解绑事件委托:解绑li委托在ul上的click事件
$('ul').off('click','li');
// 一次性事件one
$('div').one('click',function(){
alert(444444);
})
8.6、事件的自动触发
$('div').on('click',function(){
alert(1111);
});
// 第一种方式
$('div').click();
// 第二种方式
$('div').trigger("click");
// 第三种:不会触发元素的默认行为
$('div').triggerHandler("click");
8.7、 事件对象
element.on(events,[selector],function(event) {})
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()
三、jQuery 其他方法
1、对象的拷贝(合并)
$.extend([deep],target,obj1,[objN ...]);
1.1、浅拷贝(第一个参数为false或者省略第一个参数)
基本数据类型进行值拷贝,不同属性合并,相同属性覆盖;
复杂数据类型拷贝的是地址,如果属性名相同直接被整体覆盖(不考虑其中的具体内容),修改其中一个会影响另一个;
1.2、深拷贝
所有数据类型都进行值拷贝;
基本数据类型不同属性合并,相同属性覆盖;
复杂数据类型如果属性名相同,其内部相同的属性会被覆盖,不同属性进行合并;
修改任意一个不会影响另一个;
2、多库共存
jQuery使用$作为标示符,随着jQuery的流行,其他 js 库也会用这$作为标识符, 这样一起使用会引起冲突。
jQuery 解决方案:
1.把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(’‘div’’)
2. jQuery 变量规定新的名称:$.noConflict() ,var xx = $.noConflict();
3、jquery插件
3.1、bootstrap插件
- 先将文件夹放入项目中,然后在head中引入外部css、js文件;
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
<script src="bootstrap/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
- body中引入的代码要写在
<div class="container"></div>
中;
4、练习–todolist
- 绑定索引:在标签中添加id属性,遍历标签的过程中可以将下标赋值给id;
- 并集选择器
$('ol,ul')
; - 本地存储;