JQuery基础学习
Posted 十九万里
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery基础学习相关的知识,希望对你有一定的参考价值。
1 jQuery的基础
官网地址:https://jquery.com/
在线手册地址:https://jquery.cuishifeng.cn/
1.1 jQuery的版本
不同的版本
jQuery-3.6.0.js 完整版、开发版,适合开发环境
jquery-3.6.0.min.js 压缩版、产品版(去掉了空格、换行,简化了变量名),适合生产环境。
jQuery-3.6.0..slim.js 瘦身版(不兼容IE,去掉了jQuery动画)
jQuery-3.6.0..slim.min.js
版本号
1.x.x 可以兼容IE8以及以下的浏览器
2.x.x / 3.x.x 不兼容IE8
1.2 如何使用 jQuery
1.使用script标签引入jQuery文件
2.写自己的js代码
1.3 核心函数 / jQuery对象
jQuery中最核心的一个函数叫jQuery
,别名是$
.
核心函数有如下功能:
1.使用核心函数获取文档中的元素,参数是个字符串
2.使用核心函数把原生DOM转为jQUery DOM,参数是原生DOM对象。
3.文档就绪事件,参数是回调函数
1.4 jQuery DOM对象
① jQuery DOM对象
使用jQuery核心函数,返回的元素对象称为jQuery DOM/
② 原生DOM
使用元素 js 方式获取到的元素的对象,称为原生DOM。
③ 原生DOM和jQuery DOM相互转换
原生DOM和jQuery DOM:
1. jQuery DOM和原生 DOM都是对html元素的映射,都用于从元素获取信息或者设置元素的样式、属性
2.jQuery DOM元素和原生DOM是不同类型的对象,各自具有各自的属性和方法
3.jQuery学习的就是jQuery DOM的属性和方法
原生DOM转为jQuery DOM:
使用核心函数可以把原生 DOM 转为 jQuery DOM
jQuery DOM 转为原生 DOM:
jQuery DOM 本质上是由原生DOM组成的集合,是个伪数组,通过索引可以取出其中的原生DOM
1.5 文档就绪事件
① 语法
//完整写法
$(document).ready(function()
code...
);
//简写
$(function()
code...
);
② ready 事件与 load 事件的区别
1.load事件是页面中所有的一切加载完毕才触发
2.ready事件是页面中元素加载完毕就触发,类似于 DOMContentLoaded事件。
1.6 链式调用(连贯操作)
$(dom).csss().width().height()
**链式调用实现原理:**方法中返回this(方法中返回调用该方法的对象)。
1.7 jQuery优势
轻量、开源、免费、易于学习
兼容性处理
强大的选择器
链式操作
便捷的DOM操作
可靠的事件机制
封装了简单易用的Ajax操作
丰富的插件
2 jQuery获取元素:选择器
使用选择器获取元素,类似于原生js中的querySelector()、querySelectorAll()等。
2.1 基本选择器
与 CSS3 的基本选择器是一样的
2.2 层级选择器
与 CSS3 的层级选择器是一样的
2.3 基本筛选器(过滤选择器)
部分与 CSS3 的伪类选择器是一样的,jQuery 所特有的选择器:
:first
:last
:eq() 索引从0开始
:lt() 小于
:gt() 大于
:odd 奇数
:event 偶数
2.4 内容选择器
:empty 选择到没有内容也没有后代的元素
:parent 选择到有内容或者有后代的元素
2.5 可见性选择器
:visible 能够显示的元素
:hidden 隐藏的元素(display:none visibility:hidden)
2.6 属性选择器
同 CSS3 的属性选择器
2.7 子元素选择器
同 CSS3 中结构伪类选择器
2.8 表单选择器
:text
:password
....
:input 选择到所有的表单控件 包括 input、textarea、select
2.9 表单对象选择器
同 CSS3 的UI元素伪类选择器
3 jQuery获取元素:筛选器方法
使用筛选器方法,类似于原生js中的文档结构,子元素、父元素、兄弟元素等。
3.1 过滤方法
对 jQueryDOM 这个集合的处理,这些过滤方法返回的还是 jQuery DOM
eq()
first()
last()
slice()
filter('选择器')
not('选择器')
3.2 查找方法
类似于原生JS中的文档结构,子元素、父元素、兄弟元素等。
children(选择器)
find(选择器)
parent(选择器)
parents(选择器)
next(选择器)
nextAll(选择器)
prev(选择器)
prevAll(选择器)
4 元素的属性、样式、内容操作
4.1 属性操作
1. 读写内置属性
$dom.prop(属性名 [, 值]);
2. 读写自定义属性
$dom.attr('属性名' [, 值]);
3. 读写 data- 格式的自定义属性
$dom.data('属性名' [, 值]);
1. 读取属性值的时候,只读取 jQuery DOM 集合中第一个元素属性的值
2. 设置属性值的时候,jQuery DOM 集合中所有的元素都会被设置
3. prop()、attr()、data() 都支持链式调用
4.2 样式操作
1. 直接读写样式
$dom.css('css属性名' [ ,值])
2. 操作类名
$dom.addClass()
$dom.removeClass()
$dom.toggleClass()
$dom.hasClass() 返回布尔值
4.3 内容操作
html() 读写元素的 innerHTML
text() 读写元素的 innerText
val() 读写输入框输入的内容
4.4 读写元素的尺寸
width() / height() 读写内容大小
innerWidth() / innerHeight() 读写内容+内边距大小
outerWidth() / outerHeight() 读写总的大小
4.5 位置
offset() 返回包含 left 和 top 属性的对象, 得到是元素在整个文档上的位置
可以读取,可以设置
5 元素的创建、添加、删除、克隆
5.1 内部插入(添加子元素)
append()
appendTo()
prepend()
prependTo()
5.2 外部插入(添加兄弟元素)
after()
insertAfter()
before()
insertBefore()
5.3 替换
旧元素.replaceWith(新元素)
新元素.replaceAll(旧元素)
5.4
remove() 自己删除自己
empty() 清空,删除所有的后代和内容
5.5 克隆元素
clone() 返回克隆好的元素,深度克隆
6 jQuery的事件机制
6.1 添加事件监听
① 把事件作为方法调用
$dom.click(function(
))
② 使用 on 添加事件
$dom.on('click', function()
);
6.2 解除事件的监听
$dom.off(); // 解除元素上所有的事件
$dom.off('click'); // 解除元素上的 click 事件
6.3 事件对象
jQuery 事件的回调函数也可以获取到事件对象,同原生 js 的事件对象没有区别!
6.4 事件委托
$('ul').on('click', 'li', function()
$(this).toggleClass('active');
);
以上是关于JQuery基础学习的主要内容,如果未能解决你的问题,请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段