jQuery应知应会

tech2024-03-08  68

什么是jQuery?

jquery是JavaScript的一个库,是一个封装好的特定的集合主要是为了快速操作DOM,里面基本上是函数方法移动端是用zepto,简化版的jquery,新增了一些移动端api它的宗旨是“写的更少,做的更多”“write less, do more”

jQuery的优点是什么?

轻量级的库只有几十kb跨浏览器兼容链式编程,隐式迭代对事件、样式、动画支持,大大简化了DOM操作支持第三方插件:如树形菜单、日期控件、轮播图免费、开源

如何使用jQuery?

页面引入cdn,下载本地在页面引入 $.('.div').hide();支持css选择器还有许多自有选择器来选择dom元素

入口函数:$.(function() {});

jquery对象和dom对象的区别?

原生js获取的对象是dom对象用jquery获取的对象是jquery对象jQuery对象只能使用jQuery方法,dom对象只能使用原生js方法

dom对象和jQuery对象转换

dom对象转换成jQuery对象 $.(oDiv) 把原生js获取到的对象用$()包装一下jQuery对象转换成dom对象 $.('div')[index] 或 $('div').get(index)

jQuery常用API?

jQuery选择器

支持css选择器$.('选择器')

遍历dom元素的过程叫隐式迭代,相当于将匹配到的所有元素for循环遍历添加css

$.('div).css('background','pink')

jquery筛选选择器

$.('li:first') 获取第一个li元素 $.('li:last') 获取最后一个li元素 $.('li:eq(index)') 选中获取到的li中索引为index位的li元素 $.('li:odd') 选中获取到的li中,索引为奇数的li元素 $.('li:even') 选中获取到的li中,索引为偶数的li元素

jQuery筛选方法 $.('li').parent(); 选中li元素的父级 。。。。。

jQuery样式

jQuery可以使用css方法来简单修改元素样式 $.(this).css({width: '200px', height: '100px'})这种方式可以一起修改多个样式

通过设置类的方式修改元素样式(大量样式修改)

添加类名 $.('div').addClass('class')删除类名 $.('div').removeClass('class')切换类名 $.('div').toggleClass('class') 有就删除,没有就添加原生js中className会覆盖原有类名,jQuery中这类操作不影响原类名

jQuery动画(有参数查文档)

显示和隐藏: 显示:show() 隐藏:hide() 切换显示隐藏效果:toggle()

滑动: slideDown() slideUp() slideToggle()

淡入淡出: fadeIn() fadeOut() fadeToggle() fadeTo()

自定义动画:animate(params,[speed],[easing],[fn]) 参数:params: 想要更改的样式属性,以对象形式传递,必须写,如果是符合属性需要采用小驼峰写法,其他参数可省略 eg:

$.(function() { $.('button').click(function() { $.('div').animate({ left: 500, top: 500, opacity: 0.5 }, 500) }) })

停止动画效果: 取消上一个动画效果不影响本次动画: 相当于防抖 stop() 方法必须写到动画前面 eg: $.(this).stop().slideToggle();

jQuery属性

元素的固有属性值的设置和获取 element.prop() 获取属性值:prop(‘属性’) 设置属性值:prop(‘属性名’,‘属性值’)

元素自定义属性值的设置和获取 element.attr() 获取属性值:attr(‘属性’) 设置属性值:attr(‘属性名’,‘属性值’)

数据缓存 data() 这个里面的数据是存放在元素的内存里的 设置:$.('span').data('uname', 'parker') 获取:console.log($.('span').data('uname'))

jQuery内容文本值

主要针对元素内部还有表单的值操作

获取普通元素内容 (相当于原生innerHTML) $.('div').html()

设置普通元素内容 eg: $.('div').html('123') ==> div内部只有‘123’

普通文本元素文本内容 text() (相当于原生 innerText) $.('div').text()

设置普通元素文本内容 $.('div').text(‘Parker’)

获取表单值 val() $.('input').val()

设置表单值 $.(input').val('haha')

jQuery元素操作

主要是遍历、创建、添加、删除元素操作

jQuery隐式迭代(遍历)

是对同一元素做了同样的操作,如果想要给同一元素做不同操作,就需要遍历 语法1:$.('div').each(function (index, domEle) { xxxx; } ) eg: (div{$}*3)

$.(function() { var sum = 0; //each() 方法遍历 var arr = ['red', 'green', 'vlue']; $.('div').each(functon(index, domEle) {//第二个参数是dom对象 $.(domEle).css('color', arr[i]); sum += parseInt($.(domEle).text()); }) console.log(sum);//6 })

语法2:$.each($('div'), function(incex, ele) { }) 主要用来处理数据

jQuery创建元素

创建方法:var li = $.('<li></li>')

添加元素

内部添加:$.('ul').append(li) 类似于原生的 appendChild 外部添加:element.after('内容') //把内容放在目标元素后面 element.before('内容') //把内容放在目标元素前面

内添加生成父子结构,外部天加生成兄弟结构

jQuery删除元素

$.('ul').remove(); 删除该节点 $.('ul').empty(); 清空该节点中的子节点 $.('ul').html('空字符串') 清空该节点中的子节点

jQuery事件

常见的注册事件 on绑定事件的优势 jQuery事件委派的优点以及方式 绑定事件与解绑事件

jQuery事件注册

语法: ele.事件名(functoin() {}) 常见事件:mouseover、 mouserout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等

jQuery事件处理 on()绑定事件

on{}方法在匹配元素上绑定一个或多个事件的事件处理函数 on绑定事件可以给动态创建的元素绑定事件 jQuery中绑定事件如无特殊要求,一般都用on来绑定

语法:element.on(events, [selector], fn) events:一个或多个用空格分隔的事件类型 selector:元素的子元素选择器 fn: 回调函数

方法一:

ele.on({//多个事件绑定 click: functon() {}, mouseenter: function() {} })

方法二:

ele.on('mouseenter mouseleave', function() { alert(123) })

one()方法

one()绑定事件只会触发一次 $.('div').one('click', function() {} )

事件委托

$.('ul').on('click', 'li', function() {}); //事件绑定在ul上却在它的子元素li上触发(事件冒泡)

解绑事件 off()

off()方法可以移除通过on()方法添加的事件处理程序 $.('div').off(); //解除div上所有on绑定的事件 $.('div').off('click'); //解除div上on绑定的click事件 $.('ul').off('click', 'li'); //解除事件委托

自动触发事件 trigger()

方法一:ele.click() //元素直接调用身上绑定的方法 方法二:ele.trigger('type') //自动触发模式 type是需要触发的绑定在元素上的方法 方法三:ele.triggerHandler('click') //与以上方法的区别是不会触发元素的默认行为,如input获取焦点

jQuery事件对象 e

事件被触发,就会有事件对象产生 ele.on('click', function(e) { console.log(e) }) 阻止默认行为: e.preventDefault() 或者 return false 阻止冒泡:e.stopPropagation()

jQuery元素尺寸、位置

jQuery尺寸:

参数为空,就获取值类型为数字型;如果参数为数字则是修改相应值;参数不写单位; width()/height() 获得匹配元素宽度和高度值 只算width/height innerWidth()/innerHeight() 获得匹配元素宽度和高度值 包含 padding outerWidth()/outerHeight() 获得匹配元素宽度和高度值 包含 padding 、border outerWidth(true)/outerHeight(true) 获得匹配元素宽度和高度值 包含 padding 、border 、margin

jQuery位置:

主要有三个 offset() position() scrollTop()/scrollLeft()

offset() 设置或获取元素相对文档的偏移坐标,与父级无关,该方法有俩属性left、top 获取元素属性方法 offset().top/left 设置元素偏移 offset({top:10,left:10})

position() 只能获取,最近有定位的父级偏移,没有就相对于文档,不能设置

scrollTop()/scrollLeft() 获取或设置页面被滚动条隐藏的距离(获取设置滚动条位置)参数为空是获取,为数字是设置

jQuery对象的拷贝方法

jQuery对象的拷贝方法 $.extend() 相当于合并对象,浅拷贝冲突项会被拷贝来的值覆盖,深拷贝不冲突的属性不会被覆盖 语法:$.extend([deep], target, object1, [objectN]) deep:如果设置为true为深拷贝,默认为false浅拷贝 target:要拷贝的目标对象 object1:第一个要被拷贝的对象

浅拷贝,是将被拷贝对象的引用地址,拷贝给目标对象,修改目标对象会影响被拷贝对象 深拷贝,参数前面加true,完全克隆对象,修改目标对象不会影响被拷贝对象

jQuery多库共存的2种方法

为了让jQuery与其他js库共存的方法

方法一: 不用$.('div')符号直接用,jQuery('div') 方法二: 自定义标识符 $.noConflict() eg: var zdy = $.noConflict() //便可以使用 zdy 来代替 $/jQuery

jQuery插件

bootstrap是基于jQuery开发的 引入文件,复制代码,修修改改

最新回复(0)