目录
- 轻量级的, 兼容多浏览器的JS库
句法结构
$("selector").action()- **JS对象和JQuery对象的方法不能互用!!! **
- JQuery对象转为DOM对象
$var[0] - DOM对象转为JQuery对象
$(var)
查找标签
基本选择器
-
标签选择器
$("div") -
类选择器
$(".c1") -
id选择器
$("#d1") -
通用选择器
$("*") -
结合使用
$("div.c1")class为c1的div标签 -
组合选择器
$("#d1, div, p")
层级选择器
- 后代选择器
$("x y") - 儿子选择器
$("x>y") - 毗邻选择器
$("x+y") - 弟弟选择器
$("x~y")
属性选择器
$("[username]")$("[username='bigb']")$("div[username='bigb']")
筛选器
- 对选择器的结果进行二次筛选
基本筛选器
| 筛选器 | 效果 | 演示 |
|---|---|---|
:first |
第一个 | $("div:first") |
:last |
最后一个 | $("div:last") |
:eq(index) |
索引值为index的 | $("div:eq(2)") |
:even |
索引值为偶数的 | $("div:even") |
:odd |
索引值为奇数的 | $("div:odd") |
:gt(index) |
索引值大于index的 | $("div:gt(2)") |
:lt(index) |
索引值小于index的 | $("div:lt(2)") |
:not() |
剔除掉有某个属性的标签 | $("div:not(.c1)") |
:has() |
筛选出后代中有某个属性的标签 | $("div:has(.c1)") |
first, last, eq, not, has可以使用$(selector).筛选器()的方法
表单筛选器
:text:password:file:radio:checkbox:submit:reset:button
筛选器方法
-
下一个元素
.next().nextAll().nextUntill()(不包含)
-
上一个元素
.prev().prevAll().prevUntil()(不包含)
-
父亲元素
.parent().parents().parentsUntil()
-
儿子元素
.children()
-
兄弟元素
.siblings()
-
后代元素
.find()
-
筛选
.filter()
操作标签
样式操作
addClass()添加类名removeClass()移除类名hasClass()判断是否包含类名toggleClass()有就移除, 没有就添加$var.css(属性, 属性值)操作css样式$("p").css("color", "red")
位置操作
offset()position()scrollTop()scrollLeft()
文本操作
$divEle.text()获取标签内部的文本$divEle.html()获取标签内部的html代码$divEle.val()获取用户输入
尺寸操作
height()width()innerHeight()文本加paddinginnerwidth()outerHeight()文本加padding加borderouterWidth()
属性操作
$divEle.attr("id")$divEle.attr("username", "bigb")$divEle.attr({"age":18, "gender":male})$divEle.removeAttr("gender")$divEle.prop()用于checkbox 和 radio$divEle.removeProp()
文档处理
-
添加到内部(儿子)
$(A).append(B)$(A).appendTo(B)$(A).prepend(B)$(A).prependTo(B)
-
添加到外部(同级)
.after(B).before(B).insertAfter(B).insert.Before(B)
-
替换
replaceWith()replaceAll()
-
移除和清空
remove()empty()
-
克隆
clone()- 默认值克隆样式, 不克隆事件
事件
常用事件
clickfocusbulrchangekeyuphoverinputinput内容变化时候触发
绑定事件
$("选择器").事件名(function () {执行代码})$("选择器").on("事件名", function () {执行代码} )
阻止后续事件执行
return falsee.preventDefault()
事件冒泡
- 一个标签的绑定的事件被触发了, 会不断向上层级标签寻找是否绑定了相同的事件, 如果有, 同样会被触发
- 可以在事件的执行代码里加上
e.stopPropagation()来阻止时间冒泡
事件委托
- 利用冒泡原理, 利用父标签捕获子标签的事件并执行
补充
each循环
$.each($("p") function (index, obj) {console.log(index, obj)} )$("p").each(function (index, obj) {console.log(index, obj)})
data
- 使用data让标签存储数据
$().data("属性", "属性值")$().removeData("属性")