jQuery库
- 1.jQuery的使用
- 2.$符号
- 3.DOM对象和jQuery对象的区别
- 4.jQuery对象和dom对象的相互转换
- 5.jQuery选择器
- 6.jQuery的筛选方法
- 7.jQuery的链式编程(简写)
- 8.jQuery样式操作
- 9.显示与隐藏（效果）
- 1.在左上角显示隐藏
- 2.滑动隐藏显示
- 3.淡入淡出
- 4.修改透明度
- 10.事件切换
- 11.自定义动画animate
- 12.jQuery的属性操作
- 13.jQuery获取内容文本值
- 14.jQuery的元素操作
- 1.遍历元素
- 2.创建元素，添加元素，删除元素
- 15.jQuery的尺寸方法
- 16.jQuery的位置方法
- 17.事件处理
- off() 事件处理的解绑事件
- one()只触发一次
- 自动触发事件
- 18.event事件对象
- 19.本地存储
1.jQuery的使用
去官网下载生产版本的jquery的js文件
在页面中引入该文件
<script src='这里是js文件的路径'></script>
//一般情况下 script需要写在html代码的后面才能加载，如果想写在结构前，有两种方法
//1.页面Dom加载完成执行js代码
$(document).ready(function(){
//需要执行的代码
})
//2.简写 入口函数
$(function(){
//需要执行的代码
})
2.$符号
$符号是jQuery的别称，也是jQuery的顶级对象
3.DOM对象和jQuery对象的区别
<body>
<script src='这里是js文件的路径'></script>
<div>
</div>
<span></span>
<script>
//1.dom对象：用原生js获取过来的对象
var myDiv=document.querySelector('div')
var mySpan=document.querySelector('span')
console.dir(myDiv)//获取的是一个div
//2.jQuery对象：用jQuery方式获取过来的对象，本质上是通过$把元素进行了包装
console.dir($('div'))//获取到的是一个伪数组的div
//3.jQuery对象只能用jQuery的方法，dom对象则使用原生的js方法和属性
</script>
</body>
4.jQuery对象和dom对象的相互转换
有些方法jQuery并没有进行封装，例如视频的播放play()，所以需要使用原生的js方法，但是原生的js获取dom对象比较繁琐，可以利用这两个对象进行相互转换，以便更好的书写程序
<body>
<video src='路径' muted>
//muted是谷歌浏览器可以播放视频，不报错
</video>
<script>
//1.dom对象转换成jQuery对象：$(dom对象)
//直接获取视频就是jQuery对象
$('video')
//2.用原生js方法获取的dom对象
var myVideo=document.querySelector('video')
//$(myVideo).play() jQuery里没有play这个方法
//dom对象转换成jQuery对象的两个方法 index是索引号
//$('video')[index] 或者 $('video').get(index)
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
5.jQuery选择器
$(‘选择器’) 里面选择器直接写css选择器即可，但是要加引号
//id选择器
$('#id')
//类选择器
$('.class')
//标签选择器
$('div')
//并集选择器
$('div,p,li')
//交集选择器
$('li.current')
筛选选择器
:first //用法$('li:first') 获取第一个li元素
:last //获取最后一个li元素
:eq(index) //获取到的li元素中，选择索引号为n的元素，索引号从0开始
:odd //获取到的li元素中，选择引号为奇数的元素
:even //获取到的li元素中，选择引号为偶数的元素
6.jQuery的筛选方法
parent() 用法：$('li').parent()// 查找父级
children(selector) $('ui').children('li') //查找最近一级的亲儿子 相当于$('ul>li')
find(selsector) $('ui').find('li') //后代选择器 相当于$('ul li')
siblings(selector) $('first').siblings('li') //查找兄弟节点，不包括自己本身
nextAll([expr]) $('first').nextAll() // 查找当前元素之后所有的同辈元素
prevtAll([expr]) $('last').prevtAll() // 查找当前元素之前所有的同辈元素
hasClass(class) $('div').hasClass('box')// 检查当前元素是否含有某个特定的类，如果有，返回true
eq(index) $('li').eq(2) 相当于$('li:eq(2)'),//index从0开始
7.jQuery的链式编程(简写)
//在点击或者经过事件里，设置当前的元素样式和其他兄弟的样式
$(this).css('color','red').siblings().css('color','black')
8.jQuery样式操作
操作css方法
//1.参数只写属性名，则返回属性值
$(this).css('color')
//2.参数是属性名,属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不加单位和引号
$(this).css('color','red')
//3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({color:red,font-size:20px})
操作类方法
//1.添加类
$('div').addClass('current')
//2.删除类
$('div').removeClass('current')
//3.切换类 有就移除 没有就添加
$('div').toggleClass('current')
9.显示与隐藏（效果）
1.在左上角显示隐藏
hide()隐藏 show()显示 toggle()切换
这三个方法都有一样的参数，大部分时候都不使用参数，如有需要可以查询资料
2.滑动隐藏显示
滑动效果的隐藏和显示参数与上边一致
slideDown()下滑动 slideUp()上滑动 slideToggle()滑动切换
3.淡入淡出
fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 淡入淡出切换 参数与上面一致
4.修改透明度
fadeTo(1000,0.5) 第一个参数是时间，第二个是透明度 必须要写这两个
10.事件切换
hover([over,]out)
over:鼠标移到元素上要触发的函数，相当于mouseenter
out:鼠标移出元素上要触发的函数，相当于mouseleave
//鼠标经过和离开的复合写法
$('.nav>li').hover(function(){
$(this).children('ul').slideDown(200)
},function(){
$(this).children('ul').slideUp(200)
})
//事件切换hover 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
$('.nav>li').hover(function(){
//stop 方法必须写到动画的前面 stop方法是可以结束上一个方法执行下一个，不会乱触发
$(this).children('ul').stop().slideToggle()
})
11.自定义动画animate
语法：animate(params,[speed],[easing],[fn])
1.params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法borderLeft，其余参数都可以省略
2.speed：三种预定速度之一的字符串(‘slow’,‘normal’,‘fast’)或表示动画时长的毫秒数值
3.easing：(Optionakl)用来指定切换效果，默认是’swing’,可用参数‘linear’
4.fn:回调函数，在动画完成时执行的函数，每一个元素执行一次
<body>
<button>
动起来
</button>
<div></div>
<script>
$(function(){
$('button').click(function(){
$('div').animate({
left:500,
top:300,
opacity:.4,
},500)
})
})
</script>
</body>
12.jQuery的属性操作
element.prop(‘属性名’)获取元素固有的属性值
<body>
<a href='#' title="都挺好"></a>
<input type='checkbox' checked>
<span>123</span>
<script>
$(function(){
$('a').prop('title','我们都挺好')// 修改属性值
$('input').change(function(){
console.log($(this).prop('checked')) //true或false
})
})
</script>
</body>
element.attr(‘属性名’)获取元素自定义的属性值，用法同上
element.data(‘属性名’)这个里面的数据时存放在元素内存里面的
<body>
<div data-index='1'>
</div>
<span>123</span>
<script>
$(function(){
$('span').data('uname','andy')// 修改属性值
console.log($('span').data('uname')) //andy
//这个方法获取data-index h5自动逸属性 第一个不用写data- 而且返回的是数字类型
console.log($('div').data('index')) //1
})
</script>
</body>
13.jQuery获取内容文本值
<body>
<div >
<span>123</span>
</div>
<input type='text' value='请输入内容'>
<script>
$(function(){
//1.获取设置元素内容 html()
console.log($('div').html()) // <span>123</span>
//2.获取设置元素文本内容 text()
console.log($('div').text()) //123
$('div').text('456')//赋值
//3.获取设置表单值 val()
console.log($('input').val()) //请输入内容
$('input').val('456')//赋值
})
</script>
</body>
14.jQuery的元素操作
1.遍历元素
each()一般用来处理元素，$.each()一般用来处理数据，数组，对象等
<body>
<div >1</div>
<div >2</div>
<div >3</div>
<script>
$(function(){
//一.each()方法遍历元素
var arr=['red','blue','green']
$('div').each(function(index,domEle){
//回调参数的第一个参数一定是索引号 可以自己定义索引号的名称
//回调函数的第二个参数是dom元素对象，不是jQuery对象 dom对象没有css方法，所以转换成jQuery对象
$(domEle).css('color',arr[index])
})
console.log($('div').html()) // <span>123</span>
//2.获取设置元素文本内容 text()
console.log($('div').text()) //123
$('div').text('456')//赋值
//3.获取设置表单值 val()
console.log($('input').val()) //请输入内容
$('input').val('456')//赋值
====================================
//二、$.each()
$.each(arr,function(i,ele){
//i是索引号 ele是值
})
$.each({name:'andy',age:18},function(i,ele){
//i是属性名 ele是属性值
})
})
</script>
</body>
2.创建元素，添加元素，删除元素
<body>
<ul>
<li>原本的li</li>
</ul>
<div class='test'>
</div>
<script>
$(function(){
//1.创建元素
var li=$('<li>我是后来创建的li</li>')
//2.添加元素
//2.1内部添加(父子关系)
$('ul').append(li) //内部添加并且放到内容的最后面
$('ul').prepend(li) //内部添加并且放到内容的最前面
//2.2外部添加（兄弟关系）
var div=$('<div>我是后来创建的div</div>')
$('.test').after(div)//外部部添加并且放到内容的最后面
$('.test').before(div)//外部部添加并且放到内容的最前面
//3.删除元素
$('ul').remove() //可以删除匹配的元素 自杀
$('ul').empty() //可以删除匹配的元素里面所有的子节点 孩子
$('ul').html('') //可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
15.jQuery的尺寸方法
$(function(){
//1.width()/height() 获取设置元素width,height的大小 参数为空是获取 有值是设置
console.log($('div').width())
//2.innerWidth()/innerHeight() 获取设置元素width,height,padding的大小
//3.outerWidth()/outerHeight() 获取设置元素width,height,padding+boder的大小
//4.outerWidth(true)/outerHeight(true) 获取设置元素width,height,padding+boder+margin的大小
})
16.jQuery的位置方法
//1.获取设置文档位置(偏移) offset
console.log($('div').offset())
$('div').offset({
top:30px,
left:50px
})
//2.获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级，则以文档为准
//这个方法只能获取 不能设置偏移
console.log($('div').position())
//3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
17.事件处理
单个事件的方法不能处理动态创建的元素，on可以
动态创建的元素是指在js里用语句创建到body中的，在body本来就有的元素，单个事件才可以处理
//1.单个事件处理
$('div').click(function(){
$(this).css('background','pink')
})
//2.多个事件处理on 参数写一个对象，里面可以写多个事件
$('div').on({
click:function(){
$(this).css('background','pink')
},
mouseenter:function(){
$(this).css('background','blue')
},
})
//鼠标经过和离开都触发这个函数
$('div').on('mouseenter mouseleave',function(){
})
//事件委托 把点击事件绑定在父元素上，触发子元素可以调用
$('ul').on('click','li',function(){
//给ul的每一个li添加一个事件
})
off() 事件处理的解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
$('div').off()//不写参数是解绑所有事件
$('div').off(‘click)//解绑click事件
//解除事件委托
$('ul').off('click','li')
one()只触发一次
$('p').one('click',function(){
})
自动触发事件
$('div').on('click',function(){
alert(11)
})
//1.元素.事件()
$('div').click()
//2.元素.trigger('事件')
$('div').trigger(’click‘)
//3.元素.triggerHandler('事件')
$('div').triggerHandler(’click)
18.event事件对象
element.on(events,[selector],function(event){
//阻止默认行为 event.preventDefault()或者 return false
//阻止冒泡 event.stopPropagation()
})
19.本地存储
刷新页面不会丢失数据，因此需要用到本地存储localStorage
存储的数据格式：localStorage里面只能存储字符格式，因此需要把对象或数组转换成字符串JSON.stringfy(data)
获取本地存储，需要把里面的字符串转换为对象格式JSON.parse(data)，我们才能使用里面的数据
