jQuery

小约翰可汗

于 2022-11-16 19:08:33 发布

阅读量330

点赞数

文章标签： jquery 前端

本文链接：https://blog.youkuaiyun.com/weixin_57931538/article/details/127885751

版权

本文详细介绍了jQuery的基础知识，包括jQuery的初始使用、css方法、选择器、事件、css类和动画效果。此外，还讲解了jQuery如何操作HTML、事件机制、页面尺寸以及元素的添加和删除。最后提到了jQuery插件的使用，特别是Echarts图表库的集成方法。通过本文，读者将全面理解jQuery的核心功能和实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jQuery基础

1.jQuery初始

1.jQuery：是一个JavaScript函数库（其实就是一个外部的js文件）

2.jQuery的特点：写得少、做的多

3.jQuery的安装：下载jQuery文件，通过script标签引入即可

4.jQuery的用法

jQuery() === $()

1、获取元素返回是一个jQuery对象

2、作为入口函数

5.jQuery入口函数与js入口函数的区别

1、js的入口函数只能有一个，jQuery的入口函数可以有多个

2、js的入口函数是浏览器加载（外部的所有静态文件img/css/font/media）完成后执行

jQuery的入口函数（DOM）是文档加载完执行。所以jQuery入口函数优先于js入口函数执行

3、js入口函数不能简写

2.jQuery的css方法

1、css()获取元素的指定属性的属性值

通过css()返回的元素的背景色是rgb格式的

在链式打点中，js对象不能替代jQuery对象

2、css("属性名","属性值") 设置元素的属性名和属性值

$('#headerObj').css({

width: '600px',

height:'600px',

'background-color': '#00ff00',

'border-radius': '50%',

})

3.jQuery选择器

1、基础选择器：标签、id、类、交集、并集

2、层级选择器：子代、后代

3、过滤选择器：索引、奇数、偶数 eq的参数是索引 odd 索引为奇数的元素 even 索引为偶数的元素

4、筛选选择器：

children(selector)：获取所有子代，如果有参数获取指定的子代

find(selector)：获取所有后代，必须加参数

siblings(selector)：查找兄弟节点，不包括自己本身。如果没有加参数获取到所有的兄弟，如果加参数获取指定的兄弟

parent():父亲 parents()：所有的祖先

next()：下一个兄弟 nextAll() ：下边的所有兄弟

prev()：上一个兄弟 prevAll()：上边的所有兄弟

5、eq(index)：相当于$(’li:eq(2)‘)

$('ul>li').eq(2)

$('ul>li:eq(2)')

4.jQuery事件

1.事件源（jQuery对象）.事件类型(事件的处理程序)

2.jQuery中的事件类型变成了方法，去掉on，将事件的处理程序当做该方法的参数即可

5.jQuery的css类

1、addClass()：向被选元素添加一个或多个类

2、removeClass()：向被选元素删除一个或多个类

3、toggleClass()：向被选元素切换添加和删除类

4、 index() ：方法返回指定元素相对于其他同级元素的 index 位置(索引)

5、 not() ：方法返回指定元素之外的元素

6.jQuery动画

1、show() 显示

2、hide() 隐藏

3、fadeIn() 淡入

4、fadeOut() 淡出

5、slideDown() 滑动向下

6、slideUp() 滑动向上

7、toggle() 显示隐藏的切换

8、fadeToggle() 淡入淡出的切换

9、slideToggle() 滑动上下的切换

10、animate() 自定义动画第一个参数是对象，第二个参数是动画周期

不支持颜色的改变，可以通过引入插件来解决

不支持属性值是方法的CSS

二、jQueryHTML与插件

1.事件机制

1.链式绑定多个事件

2.bind()/on()绑定事件

单个事件：

bind('事件类型',事件处理程序)$

多个事件：

bind({

事件类型1:事件处理程序,

事件类型2:事件处理程序,

……

})

bind()和on()的区别：

最直观的区别就是on绑定比bind绑定多一个参数'childSelector'

$(selector).on(event,childSelector,data,function)

$(selector).bind(event,data,function,map)

bind只能给符合条件的元素本身添加事件

on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件

也就是对于新添加的元素如果是on绑定,符合条件的新元素也会绑定事件,

如果是bind则不影响新元素

第一用on绑定实际上是委托给了父级ul,也就是只给一个元素绑定了事件

第二个是用选择器选择了ul下的所有li元素依次绑定了事件

假如这个时候新添加一个li

如果是on绑定则这个li也会有点击事件

如果是bind则没有

3.事件对象

4.each()方法 循环同级元素遍历jquery对象

5.jQuery.each()/$.each() 遍历数组或者对象

$.each(数组/对象,function(index/key,item/value){})

2.对HTML的设置和捕获

1、html() - 设置或返回所选元素的节点 innerHTML

2、text() - 设置或返回所选元素的文本内容 innerText

3、val() - 设置或返回表单字段的值 value

4、attr()、prop()方法用于设置和返回属性值 getAttribute() setAttribute()

attr()/prop()的区别

1、attr()不仅可以获取或者返回被选元素的本身属性还可以获取和返回元素的自定义属性

prop()只能获取或设置元素的本身属性

2、在表单元素中如果遇到拥有disabled属性、selected属性、checked属性时，用prop()

3.对HTML的页面尺寸操作

1、width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距） style.width

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距） style.height

2、innerWidth() 方法返回元素的宽度（包括内边距） clientWidth

innerHeight() 方法返回元素的高度（包括内边距） clientHeight

3、outerWidth() 方法返回元素的宽度（包括内边距和边框） offsetWidth

outerHeight() 方法返回元素的高度（包括内边距和边框） offsetHeight

4、scrollTop() 方法设置或者返回滚动条被卷去的元素的高度 scrollTop

scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度 scrollLeft

4.添加和删除元素

1.添加元素

append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）

prepend() 方法在被选元素的开头插入内容（仍然在该元素的内部）

after() 方法在被选元素之后插入内容。(在该元素的外部)

before() 方法在被选元素之前插入内容。(在该元素的外部)

2.删除元素

remove() - 删除被选元素（及其子元素。所以不占位置

empty() - 从被选元素中删除子元素。所说占位置

插件一定要在jQuery的后边引入，是基于jQuery的

5.echarts

1.引入 ECharts 文件

2.为 ECharts 准备一个具备高宽的 DOM 容器

3.获取放置图表的元素

4.设置option

5.对main初始化成图表

6.将option数据渲染在Echarts中