jquery

js工具库

下载 https://jquery.com/download/ 生产版本,压缩过的,体积小 min.js 开发版本,未压缩,体积大,可以看源码 https://www.jquery123.com/

引入jquery 在head中使用script 结合 src

console.log($); 打印函数则引入成功

文档加载完毕事件 $(function(){ "加载完毕" })

三部曲

1.获取元素

("选择器") 返回的是jquery对象 jquery转js get(0) js转jquery (js对象) (this) 将js转jquery 遍历 each function(index,item){ (item) }

2.绑定事件

js所有事件 事件名不带on

$(this).click(function(e){ })

$(this).on("事件名", 函数名)

$(this).off("事件名", 函数名) 不带函数名 则关闭所有事件

$(this).one("事件名", 函数名) 只执行一次

3.修改、获取

内容 text() html() 识别标签 如果没有实参就是获取,有实参就是设置

属性

普通属性 attr("属性名") 获取 attr("属性名", "属性值") 设置

类名属性 hasClass() addClass() removeClass() toggleClass()

样式 css

css("属性名") 获取

css("属性名", "属性值") 获取设置

css({ "属性名", "属性值", "属性名","属性值" })

动画 显示与隐藏 show hide toggle 自定义 animate({ }, time, function(){ })

其他

相关元素 父 parent() 子 children() 上一个 prev() 下一个 next() 同级别其他的

siblings()

创建与删除

A.appendTo(B) 返回A A是创建内容

A.append(B) 返回A B是创建内容

目标元素.remove() 移除

目标元素.empty() 删除目标元素所有子元素

与服务器交互

form表单 将用户数据提交到服务器 缺点 必须刷新整个页面

ajax异步刷新 阿贾克斯 推荐使用 局部刷新页面

$.ajax({ }) url 服务器地址 method get post data 参数 sucess 成功回调

跨域

错误提示 No 'Access-Control-Allow-Origin' header

原理 浏览器同源 协议 ip 端口 必须一致 否则 不允许解析数据

解决方案 jquery 使用jsonp

相关推荐
四岁半儿30 分钟前
常用css
前端·css
你的人类朋友1 小时前
说说git的变基
前端·git·后端
姑苏洛言1 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅1 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry2 小时前
Compose 从 View 系统迁移
前端
IT码农-爱吃辣条2 小时前
Three.js 初级教程大全
开发语言·javascript·three.js
GIS之路2 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿2 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴2 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript
gnip2 小时前
工程项目中.env 文件原理
前端·javascript