jQuery应知应会

程序员文章站 2022-07-12 22:32:34

...

什么是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开发的
引入文件，复制代码，修修改改

相关标签：从零开始的前端程序员

上一篇： HTML应知应会

下一篇： CSS应知应会

jQuery应知应会

什么是jQuery？

jQuery的优点是什么？

如何使用jQuery？

jquery对象和dom对象的区别？

jQuery常用API？

jQuery选择器

jQuery样式

jQuery动画(有参数查文档）

jQuery属性

jQuery内容文本值

jQuery元素操作

jQuery隐式迭代(遍历）

jQuery创建元素

jQuery删除元素

jQuery事件

jQuery事件注册

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

one()方法

事件委托

解绑事件 off()

自动触发事件 trigger()

jQuery事件对象 e

jQuery元素尺寸、位置

jQuery尺寸：

jQuery位置：

jQuery对象的拷贝方法

jQuery多库共存的2种方法

jQuery插件

tkinter应知应会（四）：Entry控件，获取用户输入

程序员应知应会（22）C++继承中的内存布局

Tkinter编程应知应会(7)-创建和使用标签控件

HTML应知应会

jQuery应知应会

CSS应知应会

tkinter应知应会（二）：按钮控件

Flutter应知应会(1)

Tkinter编程应知应会(26)-通过OptionDB控制控件属性

aisino应知应会