【JavaScript】JQuery基础使用

前言：

写这篇博客前，我发现不少人都说JQuery要被淘汰了，但是那又怎么样。这并不妨碍我水一篇写一篇博客。

使用之前：

JQuery是JavaScript的方法库，即本质上还是使用JavaScript，但是有很多已经封装好的接口可以直接使用。

首先是要先下载。

jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/下载完要将其js文件引入到html文件中。

<script src='jquery-3.6.1.js'>script>

区分DOM对象和JQuery对象:

DOM的顶级对象为document,即整个文档,可直接操作页面元素.

JQuery的顶级对象是JQuery或者$,也可以自己设置其顶级对象.(以下例子都默认是使用$为顶级对象)

var nama=JQuery.noConflict()

DOM和JQuery中的对象和方法不能混用,即DOM对象只能用DOM方法,JQuery对象只能用JQuery方法,而二者的对象也可以相互转换.

//DOM->JQuery:
$(DOM对象)
//JQuery->DOM:
JQuery[索引]

获取JQuery对象:

$('选择器')

其中选择器和CSS一样,而JQuery也有自己特有的进一步筛选方法.

在选择器后,在引号内追加:

在选择器后,在引号外追加:

//例:
$('.test :first')//选出类名为test的第一个元素
$('.test :eq(2)')//选出类名为test的索引号为2的元素
$('.test :even')//选出类名为test的索引号为偶数的元素
$('.test'.parent())//选出类名为test的元素的父级元素
$('.test'.find('.one'))//选出类名为test的后代中类名有one的元素

修改CSS样式:

修改一个值:

JQuery对象.css('样式','值')

修改多个值:

JQuery对象.css({
    样式:值,
    样式:值,
    ……
    //样式的书写采用驼峰命名法来写,如果后面的数值不是数字,则需要加上引号
})

操作类:

给元素添加类名(添加不覆盖):

JQuery对象.addClass('类名')

删除元素的类名:

JQuery对象.removeCLass('类名')

切换类名的状态(有该类名就删除,没有就添加):

JQuery对象.toggleClass('类名')

JQuery动画效果:

隐藏:

JQuery对象.hide(speed,easing,fn)

speed为动画持续时间,可设置毫秒数,时间越短动画越快.

easing为动画效果,默认为swing,可切换成linear.

fn为回调函数,在动画结束后执行

显示:

JQuery对象.show(speed,esaing,fn)

切换隐藏或显示的状态:(即隐藏时切换成显示,显示时切换成隐藏)

JQuery对象.toggle(speed,esaing,fn)

下拉滑动 :(下拉显示)

可以参考以下这个

JQuery对象.slideDown(speed,esaing,fn)

上拉滑动:(上拉隐藏)

JQuery对象.slideUp(speed,esaing,fn)

 淡入动画:

JQuery对象.fadeIn(speed,esaing,fn)

 淡出动画:

JQuery对象.fadeOut(speed,esaing,fn)

 自定义动画:

JQuery对象.animate(params,speed,easing,fn)

 params为自定义的动画函数

 设置、获取属性：

固有属性（即不能获取到自定义属性）：

获取：

JQuery对象.prop（'属性名'）

修改:

JQuery对象.prop（'属性名','修改值'）

 自定义属性:

获取:

JQuery对象.attr（'属性名'）

修改:

JQuery对象.attr（'属性名','修改值'）

 元素内容:

获取:

JQuery对象.html()

 修改:

JQuery对象.html('值')

文本内容:

获取:

JQuery对象.text()

修改:

JQuery对象.text('值')

 表单值:

获取:

JQuery对象.val()

修改:

JQuery对象.val('值')

 获取尺寸:

获取宽高:

//获取JQuery对象的宽
JQuery对象.width()
//获取JQuery对象的高
JQuery对象.height()

获取宽高(包括padding在内):

//获取JQuery对象的宽
JQuery对象.innerWidth()
//获取JQuery对象的高
JQuery对象.innerHeight()

获取宽高(包括padding,border在内):

//获取JQuery对象的宽
JQuery对象.outerWidth()
//获取JQuery对象的高
JQuery对象.outerHeight()

获取宽高(包括padding,border,margin在内):

//获取JQuery对象的宽
JQuery对象.outerWidth(true)
//获取JQuery对象的高
JQuery对象.outerHeight(true)

添加元素:

首先先创建元素:

var name=$("
这是新建的div
")

 添加:

 删除:

//删除本元素
JQuery对象.remove()
//删除该元素的全部子元素
JQuery对象.empty()

JQuery事件:

事件类型基本和原生JavaScript的一致.可参考我之前的博客.

【JavaScript】鼠标、键盘的基础事件_折途的博客-CSDN博客绑定事件首先得有事件源，即获取到指定元素，可以参考我之前的博客。【JavaScript】获取网页元素_折途的博客-CSDN博客分别获取body和html,全局仅有一个,比较特殊.格式固定,元素名可以自己另外起。...https://blog.csdn.net/m0_63235356/article/details/126619537?spm=1001.2014.3001.5501

注册事件:

方法一:

JQuery对象.事件类型(function(e){
        具体执行函数内容
})

 方法二:

可以通过选择器将JQuery对象的指定子类都加上事件

JQuery对象.on(事件类型,子元素选择器,执行函数)

方法三:

可以添加多个事件.

JQuery对象.on({
    事件类型:执行函数
    事件类型:执行函数
    ……
})

 以上方法中的'on'替换成'one',则事件只执行一次,执行完自动销毁.

解除事件:

//解除全部事件
JQuery.off()
//解除指定事件
JQuery.off('事件类型')

自动触发事件:

JQuery对象.事件类型()
JQuery对象.trigger('事件类型')
JQuery对象.triggerHandler("事件类型")//该方法不触发元素默认事件