JQ常用方法总汇

最新推荐文章于 2023-02-10 08:42:52 发布

in木華

最新推荐文章于 2023-02-10 08:42:52 发布

阅读量570

点赞数 2

分类专栏：前端技术

本文链接：https://blog.csdn.net/weixin_43845328/article/details/117375419

版权

jquery

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQ常用方法总汇

特点

jquery中不用考虑兼容
jquery有强大的选择器机制
优质的隐式迭代
无所不能的链式编程

核心

元素调用	作用
`.length`	元素集合的长度
`.eadh()`	遍历jq的伪数组
`.index()`	获取当前元素的下标，传了参数就是设置下标
`.data()`	在元素上存放或读取数据
`.get([index])`	取得其中一个匹配的元素，返回的是DOM对象

选择器

语法	选择元素
`$("#id名")`	id选择器
`$(".类名")`	类名选择器
`$("标签名")`	标签选择器
`$("[name='username']")`	属性选择器
`$("li:first-child")`	第一个标签
`$("li:last-child")`	最后一个标签
`$("li:nth-child(数字)")`	第几个标签，从1开始计数
`$("li:empty")`	空标签

筛选器

语法	筛选出需要的元素
`$("li:first")`	第一个
`$("li:last")`	最后一个
`$("li:event")`	索引为偶数
`$("li:odd")`	索引为奇数
`$("li:eq(数字)")`	下标是指定数字
`$("li:lt(数字)")`	下标小于指定数字
`$("li:gt(数字)")`	下标大于指定数字

表单元素选择器

语法	匹配表单元素
`$(":input")`	所有表单元素
`$(":text")`	单行文本框
`$(":password")`	单行密码框
`$(":radio")`	单选按钮
`$(":checkbox")`	多选按钮
`$(":submit")`	提交按钮
`$(":reset")`	重置按钮
`$(":image")`	图片按钮
`$(":button")`	普通按钮
`$(":file")`	文件上传按钮
`$(":hidden")`	隐藏域（匹配页面中所有`dispaly:none`的标签）

表单对象选择器

语法	选择表单对象元素
`$("input:enabled")`	所有可用表单
`$("input:disbaled")`	首页禁用表单
`$("input:checked")`	所有选中的表单
`$("option:selected")`	被选中的下拉框

筛选器方法

元素调用	使用方法来筛选元素
`.first()`	元素集合中的第一个
`.last()`	元素集合中最后一个
`.next()`	下一个兄弟元素
`.prev()`	上一个兄弟元素
`.nextAll()`	后面所有的兄弟元素
`.prevAll()`	前面所有的兄弟元素
`.parent()`	父元素
`.parents()`	所有祖宗元素
`.eq(数字)`	指定下标的元素
`.find(选择器)`	后代中指定的元素
`.siblings()`	所有的兄弟元素
`.children()`	所有的子元素
`.end()`	回到链式操作的上一个对象

事件方法

$(function(){})：页面资源全部加载完毕才执行，和原生的onload事件一样

元素调用	参数	作用
`.on()`	(事件类型,[委托元素],[传入数据],处理函数)	在选择元素上绑定一个或多个事件的事件处理函数
`.off()`	(事件类型,[委托元素],处理函数)	解除on绑定的事件
`.one()`	(事件类型,处理函数)	只能触发一次的事件
`.trigger()`	(事件类型,处理函数)	用于手动触发一次某个事件
`.click()`	([传入数据],处理函数)	鼠标点击触发
`.mouseover()`	([传入数据],处理函数)	鼠标移入，鼠标穿过任何子元素都会触发
`.mouseout()`	([传入数据],处理函数)	鼠标移出，鼠标离开任何子元素都会触发
`.hover()`	(移入执行函数,移出执行函数)	鼠标移入移出
`.mouseenter()`	([传入数据],处理函数)	鼠标穿过元素时触发，穿过子元素不会触发
`.mouseleave()`	([传入数据],处理函数)	鼠标离开元素时触发，离开子元素不会触发
`.resize()`	([传入数据],处理函数)	当调整浏览器窗口的大小触发
`.scroll()`	([传入数据],处理函数)	滚动指定元素触发
`.ready()`	(处理函数)	$(document)调用，页面标签加载完毕就执行

属性、样式和类名操作

元素调用	参数	作用
`.prop()`	(属性名,属性值)：设置 (属性名)：获取	设置或获取属性名
`.attr()`	(属性名,属性值)：设置 (属性名)：获取	设置或获取自定义属性
`.removeProp()`	(属性名)	删除属性
`.removeAttr()`	(属性名)	删除自定义属性
`.css()`	(键,值)：设置一个 ({键:值,键:值})：设置多个 (键)：获取	设置或获取样式
`.addClass()`	(类名)	添加样式
`.removeClass()`	(类名)	删除样式
`.toggleClass()`	(类名)	有则删除样式无则添加样式
`.hasClass()`	(类名)	判断元素是否有这个类名，有是true，无是false

元素内容操作

元素调用	作用
`.text()`	获取文本内容，传参就是设置文本内容
`.html()`	获取标签内容，传参就是设置标签内容
`.val()`	获取表单元素的值，传参就是设置表单的值

元素节点操作

$("标签和内容")：创建一个标签并给里面放内容

元素调用	语法	作用
`.append()`	父元素.append(子元素)	给父元素追加子元素
`.prepend()`	父元素.prepend(子元素)	给父元素最前面添加子元素
`.appendTo()`	子元素.appendTo(父元素)	将子元素追加到父元素中
`.prependTo()`	子元素.prependTo(父元素)	将子元素添加到父元素最前面
`.after()`	元素.after(新元素)	添加下一个兄弟元素
`.before()`	元素.before(新元素)	添加上一个兄弟元素
`.insertBefore()`	新元素.insertBefore(元素)	将元素添加到某个元素前面
`.insertAfter()`	新元素.insertAfter(元素)	将元素添加到某个元素后面
`.replaceWith()`	元素.replaceWith(新元素)	使用新元素替换某个元素
`.replaceAll()`	新元素.replaceAll(元素)	用新元素替换掉某个元素
`.empty()`	元素.empty()	删除元素内部所有标签和内容，让自己变成一个空标签
`.remove()`	元素.remove()	删除自己和自己内部所有内容
`.clone()`	元素.clone([参数1],[参数2])	复制元素，参数1是复制自身事件(true/false)，参数2是复制子元素的事件(true/false)

元素尺寸

元素调用	作用
`.height()`	获取或设置元素内容区域高度（传参是设置）
`.width()`	获取或设置元素内容区域宽度（传参是设置）
`.innerHeight()`	获取元素内部的高度，包含padding，但不包含border
`.innerWidth()`	获取元素内部的宽度，包含padding，但不包含border
`.outHeight([true])`	获取元素占据的高度，包含padding和border（不传参是不包含margin，传参是包含margin）
`.outWidth([true])`	获取元素占据的宽度，包含padding和border（不传参是不包含margin，传参是包含margin）

元素位置

元素调用	参数	作用
`.offset()`	[{left:值,top:值}]	获取或设置元素在页面中的位置
`.position()`	无	元素相对父元素的位置
`.scrollTop()`	[数值]	获取或设置元素滚动过的高度
`.scrollLeft()`	[数值]	获取或设置元素滚动过的宽度

动画

元素调用	参数	作用
`.show()`	[毫秒数],[效果],[回调]	从隐藏状态变为显示状态
`.hide()`	[毫秒数],[效果],[回调]	从显示状态切换到隐藏状态
`.toggle()`	[毫秒数],[效果],[回调]	在隐藏和显示状态切换
`.slideDown()`	[毫秒数],[效果],[回调]	向下拉动显示
`.slideUp()`	[毫秒数],[效果],[回调]	向上拉动隐藏
`.slideToggle()`	[毫秒数],[效果],[回调]	切换上下拉动显示隐藏
`.fadeIn()`	[毫秒数],[效果],[回调]	从透明度0变为1的显示
`.fadeOut()`	[毫秒数],[效果],[回调]	从透明度1变为0的隐藏
`.fadeToggle()`	[毫秒数],[效果],[回调]	切换透明度显示和隐藏
`.fadeTo()`	[毫秒数],透明度,[效果],[回调函数]	让元素切换到指定的透明度
`.animate()`	{属性集合},[毫秒数],[效果],[回调]	自定义动画，可以实现动画队列
`.stop()`	[bool],[bool]	将动画停止在当前状态，也可以停止在其他状态
`.finish()`	[队列名称]	将动画停止在结束状态

jQuery高级

jquery发送ajax请求

get请求语法

$.get('请求地址', 参数, 成功的回调函数, 'json');
参数1：请求地址
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式
参数3：成功的回调函数，参数为响应回来的的数据
参数4：希望返回的数据格式

post请求语法

$.post('请求地址', 参数, 成功的回调函数, 'json');
参数1：请求地址
参数2：请求携带的数据，可以是拼接的字符串形式，也可以是对象形式
参数3：成功的回调函数，参数为响应回来的的数据
参数4：希望返回的数据格式

ajax请求语法

$.ajax({
    url: 请求地址,   // 必填，请求的地址
    type: 请求方式,   // 选填，请求方式，默认是 GET（忽略大小写）
    data: {},   // 选填，发送请求是携带的参数
    dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
    async: true,   // 选填，是否异步，默认是 true
    success () {},   // 选填，成功的回调函数
    error () {},   // 选填，失败的回调函数，参数有xhr，是ajax对象，status状态，err错误信息
    cache: true,   // 选填，是否缓存，默认是 true
    timeout: 1000,   // 选填，超时时间，单位毫秒
    context: div,   // 选填，回调函数中的 this 指向，默认是 ajax 对象
})

jsonp请求语法

$.ajax({
    url: 请求地址,
    dataType: 'jsonp',
    data: { name: 'Jack', age: 18 },
    success (res) {
        console.log(res)
    },
    jsonp: 'cb',  // jsonp 请求的时候回调函数的 key
    jsonpCallback: 'fn'   // jsonp 请求的时候回调函数的名称
})

全局ajax函数

全局ajax函数指的ajax的钩子函数。钩子函数指的是一件事情执行到某个阶段的时候自动调用的函数

// 第一个请求在 开始 的时候就会触发这个函数
$(window).ajaxStart(function () {
    console.log('有一个请求开始了')
})
// 任意一个请求在 准备 send之前会触发这个函数
$(window).ajaxSend(function () {
    console.log('有一个要发送出去了')
})
// 任意一个请求在 成功 的时候就会触发这个函数
$(window).ajaxSuccess(function () {
    console.log('有一个请求成功了')
})
// 任意一个请求在 失败 的时候就会触发这个函数
$(window).ajaxError(function () {
    console.log('有一个请求失败了')
})
// 任意一个请求在 完成 的时候就会触发这个函数
$(window).ajaxComplete(function () {
    console.log('有一个请求完成了')
})
// 任意一个请求在 结束 的时候就会触发这个函数
$(window).ajaxStop(function () {
    console.log('有一个请求结束了')
})

jquery的标识符

jquery可以将$或jQuery的使用权交出，或换成其他的操作符

jQuery.noConflict()； // 交出了$使用权，$符号不能使用了，只能使用jQuery
jQuery.noConflict(true)； // 交出了$和jQuery的使用权，$符号和jQuery都不能使用了
var 变量 = jQuery.noConflict(true); // 使用自定义的变量代替$和jQuery

向jquery扩展自定义方法

jquery总共提供了两类方法，一类是元素集合调用，一类是自己调用

// 向元素集合扩展方法
jQuery.fn.extend({
    // 参数是一个对象，对象中的方法是对每个元素集合扩展的方法
    fn:function(){
        console.log(123);
    }
})
// 调用
$("div").fn(); // 123

// 向jquery自身扩展方法
jQuery.extend({
    // 参数是一个对象，对象中的方法是对自身扩展的方法
    fn:function(){
        console.log(456);
    }
});
// 调用
$.fn(); // 456

in木華

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JQ常用方法总汇

jQuery单词本特点jquery中不用考虑兼容jquery有强大的选择器机制优质的隐式迭代无所不能的链式编程选择器语法选择元素$("#id名")id选择器$(".类名")类名选择器$("标签名")标签选择器$("[name='username']")属性选择器$("li:first-child")第一个标签$("li:last-child")最后一个标签$("li:nth-child(数字)")第几个标签，从1开始计数
复制链接

扫一扫