Javascript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画 amimate、hide、show,比如获取元素等。
一个JS文件,里面对我们原生js代码进行了封装,存放到里面。
jQuery,就是为了快速方便操作DOM,里面基本都是函数(方法)。
常见的Javascript库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto
等页面DOM加载完毕再去执行 js 代码:$(function() {});相当于DOMContentLoaded
$是jQuer中的顶级对象,相当于原生js中的window对象。
jQuery对象和DOM对象
- 用原生js获取的对象是DOM对象 document.querySelector(‘div’)
- jQuery方法获取的对象是jQuery对象 $(‘div’)
- jQuery对象本质是:利用$对DOM对象进行封装后产生的对象(以伪数组形式存储)
- jQuery对象只能使用jQuery方法,DOM对象只能使用原生Js 属性和方法
jQuery对象和DOM对象相互转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<video src="" muted></video>
<script>
// $('div').hide();
// 等页面DOM加载完毕再去执行 js 代码
// $(document).ready(function(){
// $('div').hide();
// });
// $(function() {
// $('div').hide();
// })
// jQuery对象和DOM对象相互转换
// DOM 转 jq
// (1)直接获取到的是 jquery 对象
$('video');
// (2)使用原生js获取到的是 DOM 对象
var myVideo = document.querySelector('video');
$(myVideo); // 转 jq
// jq 转 DOM
$('video')[0];
$('video').get(0);
</script>
</body>
</html>
$(‘div’).css(‘属性’,‘值’)
隐式迭代:遍历内部DOM元素(伪数组形式存储)的过程
$(‘选择器’) 里面的选择器直接写CSS选择器即可,但是要加引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<ul>
<li>aaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbb</li>
<li>cccccccccccccccc</li>
</ul>
<ol>
<li>AAAAAAAAAAAAAAAAAA</li>
<li>AAAAAAAAAAAAAAAAAA</li>
<li>AAAAAAAAAAAAAAAAAA</li>
<li>AAAAAAAAAAAAAAAAAA</li>
<li>AAAAAAAAAAAAAAAAAA</li>
</ol>
<div class="ye">
<div class="father">
<div class="son"></div>
</div>
</div>
<div class="nav">
<p>一级</p>
<div>
<p>二级</p>
<p>二级</p>
</div>
</div>
<script>
$(function() {
// 隐式迭代 修改jQuery修改样式
$('ul li').css('backgroundColor', 'red');
$('ul li').css('color', 'white');
// 子带选择器
console.log($('ol>li'));
// 后代选择器
console.log($('ol li'));
// 筛选选择器
$('ol li:first').css('color', 'red'); // :first 获取第一个
$('ol li:last').css('color', 'blue'); // :last 获取最后一个
$('ol li:eq(1)').css('backgroundColor', 'yellow'); // 通过索引号 获取第几个
$('ol li:odd').css('fontSize', '22px'); // 获得 索引号为 奇数的 元素
$('ol li:even').css('fontSize', '10px'); // 获得 索引号为 偶数的 元素
// 筛选方法
// 1.父元素 parent() 返回的是最近一级的父元素
console.log($('.son').parent());
// 2.子元素 children() 相当于 子代选择器 ul>li
$('.nav').children('p').css('color', 'green');
// 类似于后代选择器 ul li
$('.nav').find('p').css('fontSize', '20px')
// 3.同级元素 siblings()
console.log($('.nav').siblings());
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<ol>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li class="item">我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ol>
<ul>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ul>
<div class="current">俺有current</div>
<div>俺木有current</div>
<script>
$(function() {
// 1.兄弟元素
$('ol .item').siblings().css('color', 'red');
// 2.第n个元素
var index = 3;
// (1) 利用选择器的方式
$('ul li:eq(2)').css('color', 'blue');
// (2) 利用方法的方式
$('ul li').eq(index).css('color', 'yellow');
// 3.判断是否拥有某个类名
console.log($('div:first').hasClass('current'));
console.log($('div:last').hasClass('current'));
})
</script>
</body>
</html>
jQuery中的排它思想
$(this).css(‘backgroundColor’, ‘pink’).siblings().css(‘background’, ‘’)
隐式迭代 给所有按钮都绑定了点击事件,给当前元素设置样式 背景颜色 其余兄弟 样式为空
jQuery样式操作
可以使用CSS方法修改简单元素样式;也可以操作类,修改多个样式。
- 参数只写属性名,则返回属性值
$(this).css(‘color’);
- 参数是属性名,属性值,逗号分割,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(‘color’,‘red’);
- 参数可以是对象形式,方便设置多组样式。属性名和属性值冒号隔开,属性可以不用加引号,如果是复合属性则必须采用驼峰命名法写
$(this).css({‘color’:‘white’,‘fontSize’:‘20px’});
S
- 添加类 | 移除类 | 切换类
$(‘div’).addClass(‘current’); | $(‘div’).removeClass(‘current’); | $(‘div’).toggleClass(‘current’);
原生的className会覆盖之前的类名,addClass则是在原先的基础上 追加类名,不会影响之前的类名
jQuery效果
显示隐藏:show()、hide()、toggle();
滑动:slideDown()、slideUp()、slidetoggle();
淡入淡出:fadeIn()、fadeOut()、fadetoggle()、fadeTo();
自定义动画:amimate()
jQuery属性操作
获取属性:prop(‘属性名’); 设置属性:prop(‘属性名’,‘属性值’)
设置或获取元素固有属性值 prop(),固有属性就是元素自带的属性,比如 < a > 的 href、< input > 的 type获取自定义属性:attr(‘属性名’);类似原生的getAttribute(); 设置自定义属性:attr(‘属性名’,‘属性值’); 类似原生的setAttribute();
jQuery文本属性值
获取设置元素内容 html() :$ (‘div’).html();
获取设置元素文本内容 text():$ (‘div’).text();
获取设置表单值 val():$(‘input’).val();
jQuery元素操作
jQuery 隐式迭代是给同一类元素做了同样操作,如果给同一类元素做不同操作,就需要用到遍历。
遍历元素
$(“div”).each ( function ( index, domEle ) { xxx }); each() 方法遍历匹配每一个元素,里面的回调函数有2个参数:index每个元素的索引号,domEle是每个DOM元素对象,不是jquery对象。需要给 DOM元素对象 转换成 jQuery 元素对象 $(domEle)
$ .each ( object, function, ( index, element ) { xxx }); $.each() 方法可以遍历任何对象。主要用于数据处理,比如数组,对象。里面的函数有2个参数:index每个元素的索引号,element是遍历内容
创建元素
$ ("< li >< / li >") 动态创建了一个 li 标签
添加元素
内部添加:element.append(“内容”);把内容放再匹配元素内部最后,类似原生appendChild; 与之相反的 element.prepend(“内容”)
外部添加:element.after(“内容”);把内容放在目标元素后面;element.before(“内容”);把内容放在目标元素前面;
内部添加元素,生成之后,是父子关系;外部添加元素,生成之后,是兄弟关系;
删除元素
element.remove(); 删除匹配元素
element.empty(); 删除匹配元素的子节点,与其等价的:element.html(" ");
jQuery事件
事件注册
element.事件类型(处理函数);
element.on({事件类型:处理函数;事件类型:处理函数;…});
element.on(“事件类型,事件类型”,处理函数);
on绑定事件的优势:可以绑定多个事件,可以事件委派操作,可以动态创建的元素绑定事件
事件委培定义就是,把原来给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$(‘ul’).on(‘click’,‘li’,function(){ 执行函数 })
绑定事件与事件解绑
off()方法可以移除通过on()方法添加的事件处理程序。
$(“p”).off() // 解除p元素所有事件处理程序
$(“p”).off(“click”,foo) // 解除指定的事件,后面的foo是侦听函数名
$(“ul”).off(“click”,“li”); // 解绑事件委托
如果事件只触发一次,可以使用one(“click”,“function”)来绑定事件。
自动触发事件 trigger()
比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
element.click()
element.trigger(“type”)
element.triggerHandler(“type”);不会触发元素的默认行为
jQuery事件对象:事件被触发,就会有事件对象产生。
element.on ( events,[ selector ],function ( event ) { } );
阻止默认行为:eveny.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()
jQuery对象的拷贝方法
$.extend([ deep ],target,object,[ objectN ])
- deep:如果设为true 为深拷贝,默认为false 浅拷贝
- taret:要拷贝的目标对象
- object1:待拷贝到第一个对象的对象。
- objectN:待拷贝到第N个对象的对象。
- 浅拷贝是把被拷贝的对象,复杂数据类型中的地址,拷贝给目标对象。如果修改目标对象,原来被拷贝的对象也会发生变化,因为它们指向同一块内存地址。
- 深拷贝,前面加true,完全克隆(拷贝的对象,不是地址,新开辟了一块内存),修改目标对象不会影响目标对象。
jQuery多库共存
如果$ 符号冲突 可以使用jQuery
让jquery 释放$ 控制权,自定义 jQuery.noConflict()
jQuery尺寸
参数为空,获取值,返回数字类型,参数为数字,则修改相应值,参数不用写单位
jQuery位置操作
位置主要有三个:offset()、position()、scrollTop() / scrollLeft()
offset()设置或获取元素偏移,相对于文档。主要有两个属性 left top ,直接给top left赋值可以设置元素的偏移
position()获取元素相对于带有定位的父级元素的距离,如果没有父级,则以文档为准。
scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧
scroll 滚动事件 | $(document).scrollTop元素距离文档顶部的距离