004.Jquery库的用法
Jquery的选择器
句法结构
$("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() |
筛选出后代中有某个属性的标签 |
|
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()
待续.... 005 Jquery基本用法。