目录
后边的笔记先看这个吧
注意事项
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')； - 本地存储；
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
