一、jquery
1.1 jquery历史
官网:www.jquery.com
看见logo和slogan(口号): 写更少的代码,做更多的事情。
官网的自我介绍:
jQuery is a fast, small, and feature-rich JavaScript library.
jQuery是一个快速、小巧的、特点众多的JavaScript库。
It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
它用自己非常方便的跨浏览器API,使得诸如文档遍历、文档操作、事件监听、动画、和Ajax变得更简单。
With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
通过把多用途和高拓展性结合起来,jQuery改变了无数程序员书写JavaScript程序的方式。
说说jQuery的版本问题:
jQuery的最新版本是3.4.1,不兼容IE6、7、8的。
jQuery1.12.3,兼容IE6、7、8的,更符合中国的实际情况。
jQuery3和jQuery1.12.3的API完全一样。
下载jQuery就是点击官网的链接就行了:
jQuery的哲学是什么:简化DOM开发,为兼容而生!
1.2 引入jquery文件
jquery不是一门新的语言,就是js的一个类库文件。
jquery简化了DOM操作,如添加,删除和修改节点,
jquery都是兼容的,不需要进行能力检测。
要想使用里面的功能,引入jquery文件
执行代码:
1 <script src="js/jquery-1.12.3.min.js">alert(111);</script>
2 <script>
3 // 书写js代码
4 // 检测是否引入成功
5 console.log($);
6 console.log(jQuery);
7 </script>
结果:
说明;
1.4 体验jQuery
1.4.1 简化对象的选择
jQuery可以通过$(css选择器)的方式来选择对象
执行代码:
1 <div id="box"></div>
2 <!-- 引入jQuery文件 -->
3 <script src="js/jquery-1.12.3.min.js"></script>
4 <script>
5 // 原生js获取box对象
6 var box = document.getElementById('box');
7 console.log(box);
8 // jQuery获得box对象
9 var $box = $('#box');
10 console.log($box);
11 /*
12 以后jQuery对象,声明的时候在前面加上一个$,用于区分js对象和jQuery对象
13 为什么区分:因为不一样 jQuery是一个类库,js调用jQuery的时候,怕你方法用混淆了
14 */
15 </script>
结果:
1.4.2 简化了元素的运动
animate(obj, time);
obj: 对象,对象存储了动画的目标
time:过渡时间
执行代码:
1 <div id="box"></div>
2 <!-- 引入jQuery文件 -->
3 <script src="js/jquery-1.12.3.min.js"></script>
4 <script>
5 // 选择元素对象
6 var $box = $('#box');
7 // 动画
8 /*
9 animate(obj, time);
10 obj: 对象,对象存储了动画的目标
11 time:过渡时间
12
13
14 */
15 $box.animate({left: 500, top: 200}, 2000);
16 </script>
结果:
jquery所有的操作都是批量的,不需要再使用for循环,不管是添加事件还是改变样式都是批量的。
1.4.3 简化样式的操作
css方法:
一个参数:
字符串:表示要获得样式的对应值
对象:要设置的一组样式
二个参数:
设置的样式 第一个参数为要设置的样式名, 第二个参数为要设置的样式值
执行代码:
1 <div id="box"></div>
2 <!-- 引入jQuery文件 -->
3 <script src="js/jquery-1.12.3.min.js"></script>
4 <script>
5 // 选择元素对象
6 var $box = $('#box');
7 // 样式操作
8 console.log($box.css('width')); // 1个参数代表读取
9 $box.css('backgroundColor', 'pink');// 2个参数代表设置
10 $box.css('left', 300); // 带px的可以省略px直接写数值
11 $box.css('width', '200px'); // 带px的如果写px,必须为字符串
12 $box.css({top: 100, height: 200}); //一个参数为对象的时候表示设置多个样式,每一个样式为一个键值对
13 </script>
结果:
二,$函数/jQuery对象
2.1 jQuery向外暴露的变量
jquery向外暴露的变量是jQuery和$(函数),最开始暴露是jQuery,但是由于书写起来比较费力,所以它增加了一行代码
1 window.jQuery = window.$ = jQuery;
对jQuery的简写。$和jQuery完全等价
执行代码:
1 console.log($ === jQuery);
结果: true
2.2 jQuery对象与js对象的转换
jquery对象转为js对象: $(dom)[index] index表示要获取对象的索引
js对象转为jquery对象: $(js对象)
执行代码:
1 <div id="box"></div>
2 <!-- 引入jQuery文件 -->
3 <script src="js/jquery-1.12.3.min.js"></script>
4 <script>
5 // js获得对象
6 var box = document.getElementById('box');
7 // 获得jquery对象
8 var $box = $('#box');
9 console.log(box);
10 console.log($box);
11
12 // js对象使用jquery的css方法
13 // box.css('backgroundColor', 'orange');
14 // jquery的对象调用js的属性
15 // $box.innerHTML = 'I LOVE YOU';
16
17 /*
18 js对象与jquery对象的相互转换
19 jquery对象转为js对象: $(dom)[index] index表示要获取对象的索引
20 js对象转为jquery对象: $(js对象)
21 */
22 // jquery的对象调用js的属性 将jquery对象转为js对象
23 $box[0].innerHTML = 'I LOVE YOU';
24 // js对象使用jquery的css方法 --- 将js对象转为jquery对象
25 $(box).css('backgroundColor', 'orange');
26 </script>
结果:
错误分析:
2.3 jquery中不用选择器选择的对象
$(document) $(document.body) $(document.documentElement) $(this) $(window)
2.4 jquery对象的选择器
jquery最好用的是选择器css2.1 css3
jquery选择对象的方法:css选择器
css选择器
标签选择器
id选择器
class选择器
组合选择器
结构选择器
伪类选择器
属性选择器
过滤选择器
$("selector :first") 表示第一个元素
$("selector :last") 表示最后一个元素
$("selector :not(selector2)") 排除selector2后的所有元素
$("selector :even") 位置是偶数的所有元素
$("selector :odd") 位置是奇数的所有元素
$("selector :eq(index)") equal 位置等于index的元素
$("selector :gt(index)") greater than 位置大于index所有的元素
$("selector :lt(index)") lower than 位置小于index的所有元素
$("selector :header") h1-h6
$("selector").index() 返回元素的位置
内容过滤选择器
$("selector:contain('文本')") 返回含有文本的选择器
$("selector:empty") 返回标签中为空的选择器,连空格都没有
$("selector:has(selector2)) 返回含有selector2的选择器
$("selector:parent") 返回不为空的选择器 含有空格也算不为空
结构:
1 <div id="box">111111</div>
2 <div class="item">11</div>
3 <div class="item">12</div>
4 <div class="item">13</div>
5 <div class="item">14</div>
6 <div class="item">15</div>
7 <div class="item">16</div>
8 <div class="item">17</div>
9 <ul>
10 <li>1</li>
11 <li>2</li>
12 <li>3</li>
13 <li>4</li>
14 </ul>
执行代码:
1 <script>
2 // 通过css选择器来获得对象
3 // id选择器
4 // console.log($('#box'));
5 $('#box').css('color', 'red');
6 // 类选择器 : jquery在设置样式属于批量操作
7 $('.item').css('color', 'blue');
8 // 标签选择器
9 $('ul').css('backgroundColor', 'pink');
10 // 组合选择器
11 $('ul, #box').css('fontSize', 25);
12 // 结构选择器
13 $('li:nth-child(3)').css('color', 'green');// 从1开始
14 // 选择第4个li
15 $('li:eq(3)').css('color', 'blue');// 从0开始
16 // jquery提供了eq方法
17 $('li').eq(1).css('color', 'orange');
18 // 奇数 odd//偶数
19 $('.item:nth-child(odd)').css('backgroundColor', 'cyan');
20 $('.item:nth-child(even)').css('backgroundColor', '#ccc');
21 </script>
结果:
2.5 jquery绑定事件的方式
jquery绑定事件一共分为两种方式:
1、和js方式相同: $(dom).on(type,fn) type:表示事件类型 fn:事件处理程序
2,$(dom).type(fn); type:表示事件类型 fn:事件处理程序
1 <button id="btn1">点我1</button>
2 <button id="btn2">点我2</button>
3 <script src="js/jquery-1.12.3.min.js"></script>
4 <script>
5 // 获取元素对象
6 var $btn1 = $('#btn1');
7 var $btn2 = $('#btn2');
8
9 /*
10 jquery绑定事件一共分为两种方式:
11 1、和js方式相同
12 $(dom).on(type,fn) type:表示事件类型 fn:事件处理程序
13 2、$(dom).type(fn); type:表示事件类型 fn:事件处理程序
14 */
15 // 点击事件
16 // 第一种形式
17 $btn1.on('click', function() {
18 alert('请不要点我');
19 });
20
21 // 第二种形式
22 $btn2.click(function() {
23 alert('小样,继续点我啊!');
24 });
25 </script>
结果:
事件注销
对象.unbind("事件类型")
对象.off(事件类型)
1.一个事件类型,多个结果
对象.on(type,fn).on(type2,fn2)
2.多个事件类型,一个结果
对象.on("type type2",fn)
3.多个类型多个结果
对象.on({"type":fn,"type2":fn2})
4.hover = mouseover + mouseout
对象.hover(fn,fn2)
5.事件的委派
给动态新增加的dom元素的绑定事件
$("父元素").delegate("子元素",事件类型,fn)
三,常用的方法和属性
3.1方法:size()
3.11属性:length
获得集合的元素对象的个数
size方法:不建议使用,建议使用length
1 <button id="btn1">点我1</button>
2 <button id="btn2">点我2</button>
3 <button id="btn3">点我3</button>
4 <button id="btn4">点我4</button>
5 <script src="js/jquery-1.12.3.min.js"></script>
6 <script>
7 // 获得所有的btn
8 console.log($('button'));
9 // jquery的操作属于批量操作,比如设置样式获取对象
10 // length 属性:获得对象的个数
11 console.log($('button').length);
12 // 不常用的方法:不建议使用 size() 获得对象的个数
13 console.log($('button').size());
14
15 </script>
3.2 css方法
参数:
一个参数:
字符串:表示获得指定样式的值
对象:设置多组(一组)样式
二个参数:
设置样式:第一个参数表示要设置的属性名,第二个参数代表要设置的属性值
注意:jQuery在设置样式的时候是批量操作的,在获取样式的时候,如果选择的是多个对象,只会获取所有对象中的第一个
执行代码:
1 <script>
2 // 获得元素对象
3 var $div = $('div');
4 // 设置样式 --- 批量
5 $div.css('fontSize', 30);
6 // 获取 --- 只获取第一个
7 console.log($div.css('color'));
8 </script>
结果:
3.3 html方法
无参数的时候: $(dom).html() 表示获得元素对象的文本内容
有参数的时候: $(dom).html(str) 表示将dom元素的文本内容更改为str
执行代码:
1 <div></div>
2 <button id="btn1">写入内容</button><button id="btn2">获得div的内容</button>
3 <script src="js/jquery-1.12.3.min.js"></script>
4 <script>
5 // 获得元素对象
6 var $btn1 = $('#btn1');
7 var $btn2 = $('#btn2');
8 var $div = $('div');
9
10 // 绑定点击事件
11 // btn1
12 $btn1.click(function() {
13 $div.html('就是我!');
14 });
15
16 // btn2
17 $btn2.click(function() {
18 alert($div.html());
19 });
20 </script>
3.4hide和show、toggle
hide:隐藏.只有当前元素的状态是dispiay:block的时候才可以使用,最终状态是 display:none
show:显示.只有当前元素的状态是display:none的时候才可以使用,最终状态是display:block
toggle:显示,消失,切换
注意:三个方法都可以添加时间,时间单位为ms,表示过渡时间,如果没有写时间则表示“干蹦”效果
执行代码:
1 <div></div>
2 <button>hide</button>
3 <button>show</button>
4 <button>toggle</button>
5 <script src="js/jquery-1.12.3.min.js"></script>
6 <script>
7 // 隐藏
8 $('button').eq(0).click(function() {
9 // $('div').hide();
10 $('div').hide(1000);
11 });
12 // 显示
13 $('button').eq(1).click(function() {
14 // $('div').show();
15 $('div').show(1000);
16 });
17 // 切换
18 $('button').eq(2).click(function() {
19 // $('div').toggle();
20 $('div').toggle(1000);
21 });
22 </script>
3.4 获取元素属性方法
1.attr用于设置和获得标签的原有属性,还可以操作自定义标签
一个参数:获得属性
$(dom).attr(key)
key:属性名
两个参数:设置属性
(
d
o
m
)
.
a
t
t
r
(
k
e
y
,
v
a
l
u
e
)
k
e
y
:
属
性
名
v
a
l
u
e
:
属
性
值
移
除
属
性
:
(dom).attr(key, value) key:属性名 value:属性值 移除属性:
(dom).attr(key,value)key:属性名value:属性值移除属性:obj.removeAttr(attrName)
执行代码:
1 <img src="images/aoyun/0.jpg" alt="">
2 <script src="js/jquery-1.12.3.min.js"></script>
3 <script>
4 // 获得图片的src属性
5 console.log($('img').attr('src'));
6
7 // 鼠标移入的时候变成另一张图片,鼠标离开的时候变回原来的图片
8 $('img').mouseenter(function() {
9 // 换成另一张图片
10 $('img').attr('src', 'images/aoyun/1.jpg');
$('img')..removeAttr('src');
11 });
12
13 $('img').mouseleave(function() {
14 // 换成另一张图片
15 $('img').attr('src', 'images/aoyun/0.jpg');
16 });
17
18 </script>
2.prop() 方法只能操作w3c规定的标签属性
一个参数:获得属性
$(dom).prop(key)
key:属性名
两个参数:设置属性
(
d
o
m
)
.
p
r
o
p
(
k
e
y
,
v
a
l
u
e
)
k
e
y
:
属
性
名
v
a
l
u
e
:
属
性
值
移
除
属
性
:
(dom).prop(key, value) key:属性名 value:属性值 移除属性:
(dom).prop(key,value)key:属性名value:属性值移除属性:obj.removeProp(attrName)
3.5 addClass() 和 removeClass()
addClass():添加class
removeClass():移除class
注意:
⦁ addClass ()可以添加一个class也可以添加多个class,添加多个class的方式为 addClass(“A B”)中间用空格
⦁ removeClass:
⦁ 无参数:清空class属性值
⦁ 如果有值: 清除指定的class值
执行代码:
1 <div class="a">i love you!</div>
2 <script src="js/jquery-1.12.3.min.js"></script>
3 <script>
4 // 给div绑定鼠标移入事件,当鼠标进入的时候,样式放生改变
5 $('div').on('mouseenter', function() {
6 $('div').addClass('cur active');
7 // $('div').addClass('cur');
8 });
9
10 $('div').on('mouseleave', function() {
11 // $('div').removeClass('cur'); // 移除指定的class
12 $('div').removeClass(); // 移除所有
13 });
14
15 </script>
3.7 slideDown()和slideUp()(动画效果)
slideDown():缓缓落下
slideUp():缓缓升起
slideToggle():切换
slideDown():只有当元素状态是display:none的时候才可以调用,当元素调用该方法的时候,元素的height瞬间为0,然后以动画的形式变到元素的初值height,最终状态是display:block。
slideUp()相反。
注意:默认给了过渡时间400ms
1 <div></div>
2 <button>slideDown</button>
3 <button>slideUp</button>
4 <button>slideToggle</button>
5 <script src="js/jquery-1.12.3.min.js"></script>
6 <script>
7 // 落下
8 $('button').eq(0).click(function() {
9 $('div').slideDown(1000);
10 });
11 // 升起
12 $('button').eq(1).click(function() {
13 $('div').slideUp(1000);
14 });
15 // 切换
16 $('button').eq(2).click(function() {
17 $('div').slideToggle(1000);
18 });
19 </script>
3.8 fadeIn()和fadeOut()
fadeIn():淡入
fadeOut():淡出
fadeIn():只有当元素的状态是dispiay;none的时候才可以调用,当元素调用该方法的时候,该元素的opacity:0;(透明度),然后opacity慢慢的增加到1,display:block;默认400ms
fadeOut():相反
fadeTo:达到指定的透明度,fadeTo(600,0.5)第一个参数表示完成事件需要的时间,第二个参数表示透明度
fadeToggle:切换
执行代码:
1 <div></div>
2 <button>fadeIn</button>
3 <button>fadeOut</button>
4 <button>fadeTo</button>
5 <button>fadeToggle</button>
6 <script src="js/jquery-1.12.3.min.js"></script>
7 <script>
8 // 淡入
9 $('button').eq(0).click(function() {
10 $('div').fadeIn(2000);
11 });
12 // 淡出
13 $('button').eq(1).click(function() {
14 $('div').fadeOut(2000);
15 });
16 // 达到指定的透明度
17 $('button').eq(2).click(function() {
18 $('div').fadeTo(2000, .5);
19 });
20 // 切换
21 $('button').eq(3).click(function() {
22 $('div').fadeToggle(2000);
23 });
24 </script>
⦁ 四,节点的查找
4.1 this
this代表本对象,触发该事件的对象。
jquery中三个不需要使用双引号
(
t
h
i
s
)
.
(this) .
(this).(document).$(windows)
一群div,点谁谁的背景变为红色
执行代码:
1 <div>1</div>
2 <div>2</div>
3 <div>3</div>
4 <div>4</div>
5 <div>5</div>
6 <div>6</div>
7 <div>7</div>
8 <div>8</div>
9 <div>9</div>
10 <div>10</div>
11 <script src="js/jquery-1.12.3.min.js"></script>
12 <script>
13 // 给所有的div绑定了点击事件
14 $('div').click(function() {
15 // console.log(1111);
16 // 触发该事件的对象,背景变为红色
17 $(this).css('backgroundColor', 'red');
18 });
19 </script>
4.2 parent()
当前元素的父元素,父节点,只会选中亲父亲不会选中爷爷或者曾爷爷
结构:
1 <div class="box">
2 <div class="item"></div>
3 <div class="item"></div>
4 <div class="item"></div>
5 <div class="item"></div>
6 <div class="item"></div>
7 </div>
8 <div class="box">
9 <div class="item"></div>
10 <div class="item"></div>
11 <div class="item"></div>
12 <div class="item"></div>
13 <div class="item"></div>
14 </div>
15 <div class="box">
16 <div class="item"></div>
17 <div class="item"></div>
18 <div class="item"></div>
19 <div class="item"></div>
20 <div class="item"></div>
21 </div>
执行代码:
1 /*
2 点击class值为item的div的时候,当前元素的背景变为橙色,父元素的变为紫色
3 */
4 $('.item').click(function() {
5 // 当前元素的背景变为橙色
6 $(this).css('backgroundColor', 'orange');
7 // 父元素的变为紫色
8 $(this).parent().css('backgroundColor', 'purple');
9 });
10
4.3 parents
先辈元素
$(dom).parents() 获得所有的先辈元素
$(dom).parents(过滤条件) 获得指定的先辈元素
执行代码:
1 <script>
2 // 获得所有的先辈元素
3 console.log($('.item').parents());
4 // 获得指定的先辈元素
5 console.log($('.item').parents('.box'));// 添加过滤的条件
6 </script>
4.4 children
获得所有的子元素
注意:只查找儿子辈,不找孙子辈
执行代码:
1
结果:
4.5 siblings 其他的兄弟元素
兄弟节点
执行代码:
1 <script>
2 // 给所有的div绑定了点击事件
3 $('div').click(function() {
4 // console.log(1111);
5 // 当前元素的背景变为橙色
6 // $(this).css('backgroundColor', 'orange');
7 // 触发该事件的对象,背景变为红色
8 // $(this).siblings().css('backgroundColor', 'red');
9 // jquery支持一个链式操作:连续打点操作 原理:jquery在实现方法的时候,return this
10 $(this).css('backgroundColor', 'orange').siblings().css('backgroundColor', 'red');
11
12 });
13 </script>
4.6 jquery支持连续打点调用
执行代码:
1 $(this).css('backgroundColor', 'orange').siblings().css('backgroundColor', 'red');
原理代码:
1 <script>
2 // 获得元素对象
3 var div = document.getElementById('box');
4
5 // 给div添加方法
6 div.css = function(k, v) {
7 this.style[k] = v;
8 // 将改变后的对象返回
9 return this;
10 }
11 div.css('color', 'red').css('fontSize', '30px');
12 </script>
4.7 其他节点查找
next 下一个兄弟元素
prev 上一个兄弟元素
nextAll 下面所有的兄弟元素
prevAll 上面所有的兄弟元素
执行代码:
1 /*
2 1、当前元素背景变为黑色
3 2、当前元素下一个元素背景变为粉色
4 3、当前元素上一个元素背景变为绿色
5 4、当前元素父元素元素背景变为紫色
6 5、当前元素父元素元素所有弟弟元素背景变为黄色
7 5、当前元素父元素元素所有哥哥元素背景变为红色
8 */
9 $('.item').click(function() {
10 $(this).css('backgroundColor', 'black');
11 $(this).next().css('backgroundColor', 'pink');
12 $(this).prev().css('backgroundColor', 'green');
13 $(this).parent().css('backgroundColor', 'purple');
14 $(this).parent().nextAll().css('backgroundColor', 'yellow');
15 $(this).parent().prevAll().css('backgroundColor', 'red');
16
17 });
结果: