目录
1.概念
2.三部曲
1.获取元素
2.绑定事件
3.修改、获取
3.其他
4. 与服务器交互
5.跨域
1.概念
jQuery 是一个流行的 JavaScript 库,用于简化在网页中使用 JavaScript 的操作。它提供了一系列方便的功能和方法,可以使开发者更容易地处理 HTML 文档遍历、事件处理、动画效果、Ajax 等任务。
下载
https://jquery.com/download/:生产版本 压缩过的 体积小
https://www.jquery123.com/:开发版本 未压缩 体积大 可以看源代码
引用jquery
在head中使用script结合src
console.log($); 打印函数则引入成功
文档加载完毕事件:$(funtion(){"加载完毕"})
2.三部曲
1.获取元素
$("选择器)
返回的是jquery对象
jquery转js
get(0)
js转jquery
$(js对象)
$(this)
js转jquery
遍历
each
function(index,item){$(item)}
2.绑定事件
js所有事件
事件名不带on
$(this).click(funtion(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,funtion(){})
3.其他
相关元素
父:parent()
子:children()
上一个:prev()
下一个: next()
同级别其他的: siblings()
创建与删除
A.appendTo(B)
返回A
A是创建内容
A.append(B)
返回A
B是创建内容
目标元素.remove()
移除
目标元素.empty()
删除目标元素子元素
4. 与服务器交互
form表单
将用户数据提交到服务器
缺点:必须刷新整个页面
ajax异步刷新
阿贾克斯,推荐使用,局部刷新页面
$.ajax({})
url:服务器地址
method
get : params get参数
post:data post参数
success:成功回调
5.跨域
错误提示:No 'Access-Control-Allow-Origin' header
原理:浏览器同源
协议 ip 端口 必须一致
否则不允许解析数据
解决方案: iquery,使用jsonp