概述
jQuery是一个轻量级的js库,它将js的功能进行了封装(所有的都是函数),在封装的基础上做了进一步的兼容(兼容性好)
特点
链式调用(里面所有的方法返回的都是一个jQuery对象)
丰富的选择器和筛选器
良好的动画兼容(动画库很强大 借助了animated.js(主要是css3的动画))
简单入门
核心对象 jQuery(是一个函数) 简写为$
dom对象转为jQuery对象将dom对象传入jQuery的函数
将jQuery对象转为dom对象 使用下标获取对应的dom元素
<div>hello</div>
<div>world</div>
<script src="./jquery.min.js"></script>
<script>
// 核心对象 （都是函数）
console.log(jQuery);
console.log($);
//相对于是document.querySelectorAll
console.log(jQuery('div')); //jquery对象
//将jQuery对象转为dom对象使用下标获取就可以了
console.log(jQuery('div')[0]); //dom对象
//将dom对象转为jQuery对象
let dom = document.querySelector('div')
console.log($(dom));
</script>
jQuery的选择器
所有css选择器都可以使用
新增相关选择器 (odd even first last eq)
//css选择器
console.log($('ul>li:nth-child(2)'));
//新增的选择器
console.log($('li:eq(1)'));//eq 传入的是下标 获取第二个
console.log($('li:odd'));//根据下标 获取下标为奇数的
console.log($('li:even'));//根据下标 获取下标为偶数的
console.log($('li:first'));//获取第一个
console.log($('li:last'));//获取最后一个
jQuery的筛选器
它是用于筛选获取的元素的
它可以根据条件(根据选择器) 及关系筛选(节点关系)
相关筛选器
eq 筛选对应下标的元素
last 筛选最后一个
first 筛选第一个
parent 父元素
children 子元素
siblings 兄弟元素
prev 前面的兄弟
next 后面的兄弟
prevAll 前面的所有兄弟
nextAll 后面的所有兄弟
find 查找子元素内容
jQuery的属性操作
prop 只能操作原生属性 (原生属性 本身自带属性)
attr 可以操作任意属性
//属性名 属性值 如果传递的参数只有一个就是获取 如果是俩个就是设置
$('div').prop('class','box')//设置
console.log($('div').prop('class'));//获取
//prop只能操作原生属性
console.log($('div').eq(0).prop('id'));
//对应不是原生属性值获取的是undefined
console.log($('div').eq(0).prop('name'));
//设置到对应的元素对象上 element.id element.name
$('div').prop('content','我是内容')//设置
console.log($('div').prop('content'));
//attr 底层实现setAtrribute getAttribute
$('div').attr('message','ok')
removeProp 删除prop设置的属性 (原生的属性)
removeAttr删除属性 (removeAttribute)
class相关操作
addClass 添加一个class
removeClass 移除一个class
toggleClass 切换 (有就删除 没有就添加)
样式操作
css方法
//样式操作 获取样式 设置样式
//传递一个参数就获取 传递俩个参数就是设置（参数传满了就是设置）
//可以获取所有的样式
console.log($('div').css('backgroundColor'));
console.log($('div').css('height'));
//设置样式
$('div').css('width','100px')
DOM操作
增删改查
append 从后面追到里面
prepend 从前面追到里面
before 插入到当前的前面
after 插入到当前的后面
empty 清空
remove 删除
replaceWith 替换
clone 克隆
宽高获取
width 获取本身的宽度
height 获取本身的高度
innerWidth 获取本身的宽度+填充
innerHeight 获取本身的高度+填充
outerWidth 获取本身的宽度+填充+边框
outerHeight 获取本身的高度+填充+边框
获取位置
offset 获取当前的盒子离页面的距离
position 获取当前盒子离父元素的距离 (不受margin影响)
事件
jQuery的事件用到的就是观察者模式,它设计了对应的方法
on 监听事件
off 取消事件
one 执行一次
jQuery针对所有的常用事件都实现了对应的方法
click
dblclick
mouseenter
mouseleave
keydown
keyup
change
hover(总和了mouseleave mouseenter)
...
jQuery实现对应的事件委托
// 利用事件委托来操作
$('ul').mouseover((e)=>{
//获取事件源
e = e || window.event
if(e.target.tagName == 'LI'){
//给对应的li添加class
$(e.target).addClass('selected')//给自己添加样式
$(e.target).siblings().removeClass('selected')//移出兄弟的样式
}
})
显示内容
html相当于innerHTML
text相当于innerText
val 相当于获取value
jQuery的动画
animate 动画
//option(需要变化的样式) 时间（执行时间） 回调函数 option里面只传number类型的值 (可以带单
位)
$('div').animate({
width:200,
left:200
},2000,()=>{
$('div').animate({
width:100,
top:300,
opacity:0.5
},2000,()=>{
console.log('动画完成了');
})
})
show 显示 hide 隐藏 toggle 切换
slideUp 上去 slideDown 下去 slideToggle 切换
fadeOut 隐藏 fadein 显示 fadeToggle 切换 fadeTo 切换到对应透明度
