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()	筛选出后代中有某个属性的标签	$("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() 文本加padding
• innerwidth()
• outerHeight() 文本加padding加border
• outerWidth()

属性操作

• $divEle.attr("id")
• $divEle.attr("username", "bigb")
• $divEle.attr({"age":18, "gender":male})
• $divEle.removeAttr("gender")
• $divEle.prop() 用于checkbox 和 radio
• $divEle.removeProp()

 

待续.... 005 Jquery基本用法。