【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也有自己特有的进一步筛选方法.
在选择器后,在引号内追加:
:first | 选择获取到的第一个对象 |
:last | 选择获取到的最后一个对象 |
:eq(索引) | 自定义选择第n个对象 |
:odd | 选择索引号为单数的对象 |
:even | 选择索引号为双数的对象 |
:checked | 返回被选中的对象(用于查看勾选框中被勾选的数量) |
在选择器后,在引号外追加:
.parent() | 找其父级 |
.children('选择器') | 找子级,并且可以再次使用选择器进一步筛选,不加选择器则默认选出全部 |
.find('选择器') | 找后代级 |
.siblings('选择器') | 找兄弟级,除去自己 |
.hasClass('class名') | 是否含Class类名 |
.eq(索引) | 等价与上面的":eq(index)",但是推荐使用这种 |
.parents('选择器') | 找祖宗级 |
//例:
$('.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>这是新建的div</div>")
添加:
JQuery对象.append(新建的对象) | 添加到JQuery对象的内部,放在最前面 |
JQuery对象.prepend(新建的对象) | 添加到JQuery对象的内部,放在最后面 |
JQuery对象.after(新建的对象) | 添加到JQuery对象的外部,放在最后面 |
JQuery对象.before(新建的对象) | 添加到JQuery对象的外部,放在最前面 |
删除:
//删除本元素
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("事件类型")//该方法不触发元素默认事件