JQuery
2021-09-17 09:39:13 0 举报AI智能生成
JQuery
作者其他创作
大纲/内容
概念
一个JavaScript框架。简化JS开发
write Less，Do More
使用
导入js文件
方法
HTML / CSS 方法
获取
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
css() 为被选元素设置或返回一个或多个样式属性
attr() 方法用于获取属性值
prop() 设置或返回被选的元素的属性/值
插入
before() 在被选元素前插入内容
insertBefore() 在被选元素前插入 HTML 元素
after() 在被选元素后插入内容
insertAfter() 在被选元素后插入 HTML 元素
prepend() 在被选元素的开头插入内容
prependTo() 在被选元素的开头插入 HTML 元素
append() 在被选元素的结尾插入内容
appendTo() 在被选元素的结尾插入 HTML 元素
复制/删除/替换
clone() $(selector).clone(true|false)
true 规定需复制事件处理程序。
false 默认。规定不复制事件处理程序。
remove() 移除被选元素
empty() 方法删除被选元素的子元素
replaceWith() 把被选元素替换为新的内容
CSS
addClass() 添加class属性
removeClass() 移除class属性
隐藏/显示
hide(ms) 隐藏被选元素 可以设置时间 下同
show() 显示被选元素
toggle() hide() 和 show() 方法之间的切换
淡入淡出
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
子主题 7
addClass() 向被选元素添加一个或多个类名
removeClass() 从被选元素移除一个或多个类
遍历方法
祖先
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
后代
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
兄弟
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有后面的同胞元素
prev() 方法返回被选元素的上一个同胞元素
prevAll() 方法返回被选元素的所有之前的同胞元素
过滤
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素
eq(no) 方法返回被选元素中带有指定索引号的元素，索引从0开始
not() 方法返回不匹配条件的所有元素
filter() 方法返回匹配条件的所以元素，并删除不匹配的元素
遍历
each(function(i){}) 为每个匹配元素执行函数
$.each( object, function(index, value){} )
遍历指定的对象和数组。
事件方法（同JS）
元素绑定事件
$("选择器").click(function(){})
$("选择器").on("click",function(){})
$("选择器").off("click",function(){})
解绑
常用事件
点击事件
click：单击事件
dblclick：双击事件
焦点事件
focus:元素获得焦点
blur：失去焦点
加载事件
load：一张页面或一幅图像完成加载
鼠标事件
mousedown 鼠标按钮被按下。
mouseup 鼠标按键被松开。
mousemove 鼠标被移动。
mouseover 鼠标移到某元素之上。
mouseout 鼠标从某元素移开。
键盘事件
keydown 某个键盘按键被按下。
keyup 某个键盘按键被松开。
keypress 某个键盘按键被按下并松开
改变事件
change 域的内容被改变
选择事件
select 文本被选中
表单事件
submit 确认按钮被点击
reset 重置按钮被点击
子主题 4
选择器
基础语法
$(选择器).JQuery()
基本选择器（同JS）
id选择器
$("#id")
类选择器
$(".class")
元素选择器
$("元素")
全局选择器
$("*")
并集选择器
$("元素1，元素2")
交集选择器
$("元素1元素2")
后代选择器
$("父元素 子元素")
子代选择器
$("父元素>子元素")
*相邻兄弟选择器
$("元素1+元素2")
*普通相邻兄弟选择器
$("元素1~元素2")
属性选择器
$("元素名称[属性名='属性值']")
表单元素选择器
$(":input")
所有 input 元素
$(":text")
所有带有 type="text" 的 input 元素
$(":password")
所有带有 type="password" 的 input 元素
$(":radio")
所有带有 type="radio" 的 input 元素
$(":checkbox")
所有带有 type="checkbox" 的 input 元素
$(":submit")
所有带有 type="submit" 的 input 元素
$(":reset")
所有带有 type="reset" 的 input 元素
$(":button")
所有带有 type="button" 的 input 元素
$(":image")
所有带有 type="image" 的 input 元素
$(":file")
所有带有 type="file" 的 input 元素
$(":enabled")
所有启用的 input 元素
$(":disabled")
所有禁用的 input 元素
$(":selected")
所有选定的 input 元素
$(":checked")
所有选中的 input 元素
$("table:visible")
所有可见的表格
其他选择器
:first
$("p:first")
第一个 <p> 元素
:last
$("p:last")
最后一个 <p> 元素
:even
$("tr:even")
所有偶数 <tr> 元素
:odd
$("tr:odd")
所有奇数 <tr> 元素
:eq(index)
$("ul li:eq(3)")
列表中的第四个元素（index 值从 0 开始）
:gt(no)
$("ul li:gt(3)")
列举 index 大于 3 的元素
:lt(no)
$("ul li:lt(3)")
列举 index 小于 3 的元素
:not(selector)
$("input:not(:empty)")
所有不为空的输入元素
JQuery和JS的区别和转换
0 条评论
下一页
为你推荐
查看更多
