jquery优点:
jQuery是一个快速,小型且功能丰富的JavaScript库。它使诸如HTML文档遍历和操作,事件处理之类的东西,动画和Ajax更简单,具有易于使用的API,可以跨多种浏览器,即结合了多功能性和可扩展性
jquery使用:
找到要操作的元素(jquery选择器),然后去操作它(例如添加属性,样式,文本)
例$(‘div’).width(100).height(100).css(‘backgroundColor’, ‘red’).text(‘哈哈’)(链式编程)
jquery版本:
1(兼容老浏览器例ie678,停止更新)
2(不兼容老浏览器,停止更新)
3(不兼容老浏览器,在更新)
jquery的入口函数:
① $(document).ready(function() { … }) ② $(function() { … })
与window.onload入口函数的区别:
① window.onload的入口函数不能写多个,而jqery的可以写多个
② jquery入口函数的执行时机要快于window.onload
jquery入口函数等待页面上dom树加载完后执行
window.onload要等待页面上所有资源(dom树,外部css,js链接,图片等)都加载完后才执行
jquery原理:
jquery.js中是一个自执行函数,通过window.jQuery = window.$ = jQuery给window对象添加jQery属性和$属性
$:$是一个函数
① 如果参数传递的是一个匿名函数 ——则是入口函数
② 如果参数传递的是一个字符串 ——则是选择器
③ 如果参数传递的是一个dom对象 ——则会把dom对象转换为jquery对象
jquery对象:
jquery对象是一个伪数组,本质是dom对象的一个包装集。即利用jquery选择器获取到的对象,只能调用jquery的方法或者属性,不能调用原生dom对象的属性或者方法
jquery对象和dom对象的相互转换:
① dom对象转换成jquery对象:let jquery对象 = ${dom对象}
② jquery对象转换成dom对象:
① 通过下标:jquery对象[ ]
② 通过jquery方法:jquery对象.get( )
jquery选择器:和css选择器用法一样
jquery获取和设置文本:text()
① 获取单个标签文本:会获取到这个标签中所有的文本,包括后代元素的文本
② 获取多个标签文本:会把所有的dom元素的文本都获取到
③ 设置单个标签文本:会覆盖原来的内容,且如果设置的文本中包含标签,是不会把标签解析出来
④ 设置多个标签文本:会把所有的dom元素的文本都设置上
jquery获取和设置样式:css()(是行内样式)
① 可以一次设置多个样式,例
$(‘div’).css({‘width’: ‘300px’, ‘height’: ‘300px’});
② 和text()类似,设置多个元素的时候会全部设置上,但获取多个的时候,只会返回第一个元素的值
jquery关于class类名操作:
① addClass():添加类名
② removeClass():移除类名
③ hasClass():判断是否存在该类,返回boolean类型值
④ toggleClass():切换类,如果有则移除该类,如果没有则添加该类
jquery动画:
都是通过参数设置动画效果:
参数1:代表执行动画的时长(毫秒数),也可以是代表时长的字符串(例fast,normal,slow等)
参数2:代表动画执行完毕后的回调函数
基础动画:
① 显示:show()
② 隐藏:hide()
③ 显示隐藏切换:toggle()(如果元素是隐藏的就显示,如果是显示的就隐藏)
④ 滑入:slideDown()
⑤ 滑出:slideUp()
⑥ 滑入滑出切换:slideToggle()
⑦ 淡入:fadeIn()
⑧ 淡出:fadeOut()
⑨ 淡入淡出切换:fadeToggle()
自定义动画:animate()
停止动画:stop(),参数1:是否清除动画队列;参数2:是否跳转到最终效果
动画队列:即同一个元素上执行多个动画,后面未执行的动画就会放在动画队列中
jquery操作节点:
① 创建节点:
① 通过html()(与text()类似,不过一个是innerText,一个是innerHtml)
② 通过$(‘
获取或设置表单元素内容:val()(有参数就是设置,没参数就是获取)
操作属性:
① 添加,更改,获取属性:attr(),例:添加修改,attr(‘src’, ‘test.gif’),获取,attr(‘src’)
② 删除属性:removeAttr()
操作布尔类型的属性:
在jquery1.6之后,对于checked,selected,disabled这类boolean类型的属性(复选框),不能用attr方法,只能用prop方法
例,$(‘#ckb’).prop(‘checked’)获取checked属性值
设置获取宽高:
① width()和height()(不包括内边距,边框,外边距)
② innerWidth()和innerHeight()(包括内边距)
③ outerWidth()和outerHeight()(包括内边距,边框)
④ outerWidth(true)和outerHeight(true)(包括内边距,边框,外边距)
⑤ $(window).width()和$(window).height()(获取页面可视区的宽高)
获取元素位置:
获取到一个对象,对象里面包含了top和left的值
① offset():获取元素距离document的位置
② position():获取元素距离有定位的父元素(offsetParent)的位置
设置或者获取滚动条的位置:
① scrollTop():获取页面被卷曲的高度
② scrollLeft():获取页面被卷曲的宽度
关于事件
① on注册事件:(jqery1.7之后,jquery用on统一了所有时间的处理方法)
① on简单注册事件:
不支持动态注册(即以下样例,给所有div注册了事件,但如果创建了新div,其身上并不会被注册事件)
$(‘div’).on(‘click’, function(){…})
② on注册事件委托
支持动态注册
表示给$(selector)绑定代理事件,而必须是它的内部元素(这里是div和span)才能触发这个事件
$(‘body’).on(‘click’, ‘div, span’, function(){…})
(相当于点击div或span时,通过事件冒泡,会触发父元素的点击事件)
② off事件解绑
如果没有参数,那就是解绑所有事件,如果有参数,那就是解绑指定事件,例off(‘click’)
③ trigger事件触发
例trigger(‘click’)
④ 事件对象(例记录触发鼠标的坐标位置信息等等(event))
可通过事件回调的参数获取,例,$(‘div’).on(‘click’, function(e) {…})
返回状态:
在链式编程中,通常会改变jquery对象对应的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态,用end()
显示迭代:
jquery隐式迭代会对所有DOM对象设置相同的值,但是如果需要对每个对象设置不同的值时,需要自己显示迭代
each()可以遍历jquery对象集合,为每个匹配的元素执行一个函数,例
$lis.each(function(index, element) {…})
多库共存:如果引入了多个jquery文件,则使用的$是最后引入的jquery文件中的
如果想要释放$,即使用引入的其他版本的$,可通过let $ = $.noConflict()将它释放,并用$接受被释放的,之后的$便是其他juery文件的
jquery插件