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)，我们才能使用里面的数据
