1.jQuery基础知识(上)
jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是“write Less,Do More",写更少的代码,做更多的事情。jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。学习jQuery本质:学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
1.1. 了解优点
(1)轻量级。核心文件才几十kb,不会影响页面加载速度
(2)跨浏览器兼容。基本兼容了现在主流的浏览器
(3)链式编程、隐式跌代
(4)对事件、样式、动画支持,人人简化了DOM操作
(5)支持插件扩展开发。有着丰富的第三方的插件,例∶树形菜单、日期控件、轮播图等
(6)免费、开源
1.2. 官网地址
jQuery官方网址
版本:
1x:兼容IE678等低版本浏览器,官网不再更新
2x :不兼容正678等低版本浏览器,官网不再更新
3x:不兼容I正678等低版本浏览器,是官方主要更新维护的版本
各个版本的下载:https://code.jquery.com/
1.3. jQuery的入口函数
$(function(){
… // 此处是页面DOM加载完成的入口
})
$(document).ready ( function(){
… //此处是页面DOM加载完成的入口
});
(1)等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装
(2)相当于原生js中的DOMContentLoaded。
心
(3).不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码.
(4).更推荐使用第一种方式
1.4jQuery顶级对象$
(1).$是jQuery的别称,在代码中可以使用jQuery代替。
(2).$是jQuery的顶级对象,相当于原生JavaScript中window;把元素利用$包装成Query对象,就可以调用jQuery的方法。
1.5jQuery基础选择器
原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。
$( "选择器”) //里面选择器直接写CSS选择器即可,但是要加引号
1.6jQuery层级选择器
1.7隐式迭代(重要)
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素 进行 循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
2.jQuery基础知识(中)
2.1jQuery对象和DOM对象
1.用原生JS获取来的对象就是DOM对象
2.jQuery方法获取的元素就是jQuery对象。
3 jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)
2.2jQuery筛选选择器器
2.3jQuery筛选方法(重点)
2.4链式编程
(1)链式编程是为了节省代码量,看起来更优雅。
(2)$(this).css(‘color’, 'red").sibling().css(‘color’,");
// 让当前的元素颜色变为红色,其余兄弟的去除颜色;(排他思想)
2.5操作CSS的方法
jQuery可以使用CSs方法来修改简单元素样式;也可以操作类,修改多个样式。
1.参数只写属性名,则是返回属性值
$(this).css(“color”);
2.参数是属性名,属性值,逗号分隔,是设置组样式,属性必须引得,值如果是数字可以不用跟单位和引号
$(this).css(“color”, “red”);
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号],
$(this).css({ “color”:“white”,“font-size”:" 20px"});
2.6设置类样式方法
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
1.添加类
$( “div” ).addClass(“current”);
2.移除类
$( “div” ).removeClass("current’);
3.切换类
$( “div” ).toggleClass(“current’”);
类操作与className区别:
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
3.jQuery基础知识(下)
3.1显示与隐藏
1.显示语法规范
show ([speed, [easing], [fn]])
2.显示参数
(1 )参数都可以省略,无动画直接显示。
( 2) speed :三种预定速度之一的字符串( “slow” ,“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)
( 3 ) easing : (Optional)用来指定切换效果,默认是"swing",
可用参数"linear" 。
( 4 )fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1.隐藏语法规范
hide ([ speed, [easing], [fn]])
2.隐藏参数
(1 )参数都可以省略,无动画直接显示。
(2) speed :三种预定速度之一的字符串( “slow” ,“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
( 3 )easing : (Optional)用来指定切换效果,默认是"swing” ,可用参数"linear”.
(4 )fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
1.切换语法规范
toggle ([ speed, [easing], [fn]])
2.隐藏参数和上面一样
3.2滑动效果
1.下滑效果语法规范
slideDown ( [speed, [easing], [fn] ])
2.下滑效果参数
( 1 )参数都可以省略。
( 2 ) speed:三种预定速度之一的字符串( “slow” ,"normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
(3 ) easing:(Optional)用来指定切换效果,默认是"swing” ,可用参数"linear” 。
(4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3.3事件切换
hover([over,]out)
( 1 ) over:鼠标移到元素上要触发的函数相当于(mouseenter )
( 2 ) out:鼠标移出元素要触发的函数相当于(mouseleave )
3.4动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
2.停止排队
stop()
(1) stop()方法用于停止动画或效果。
(2)注意: stop()写到动画或者效果的前面,相当于停止结束上一-次的动画。
3.5淡入淡出效果
1.淡入淡出切换效果语法规范
fadeToggle ( [ speed, [easing], [fn]])
2.淡入淡出切换效果参数
(1)参数都可以省略。
(2) speed :三种预定速度之一的字符串( “slow” ,“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
( 3 ) easing : (Optional)|用来指定切换效果,默认是"swing” , 可用参数"linear"
( 4 ) fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
1.渐进方式调整到指定的不透明度
fadeTo ([ [speed], opacity, [easing], [fn]])
2.效果参数
( 1 ) opacity 透明度必须写,取值0~1之间。
(2 ) **speed ????*三种预定速度之一的字符串( “slow” ,“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。必须写
(3) easing : (Optional)用来指定切换效果,默认是"swing" , 可用参数"linear" 。
(4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
3.6自定义动画
1.语法
animate (params, [speed], [easing], [fn])
2.参数
( 1 ) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft.其余参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串( “slow” ,“normal” , or “fast” )或表示动画时长的毫秒数值(如: 1000)。
( 3 )| easing : (Optional)用来指定切换效果,默认是"swing" ,可用参数"linear" 。
( 4 )fn:回调函数,在动画完成时执行的函数, 每个元素执行一次。