JQuery的基本使用

目录

• 句法结构
• 查找标签
  • 基本选择器
  • 层级选择器
  • 属性选择器
• 筛选器
  • 基本筛选器
  • 表单筛选器
  • 筛选器方法
• 操作标签
  • 样式操作
  • 位置操作
  • 文本操作
  • 尺寸操作
  • 属性操作
  • 文档处理
• 事件
  • 常用事件
  • 绑定事件
  • 阻止后续事件执行
  • 事件冒泡
  • 事件委托
• 补充
  • each循环
  • data

• 轻量级的, 兼容多浏览器的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() 文本加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()

文档处理

• 添加到内部(儿子)

  • $(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()
  • 默认值克隆样式, 不克隆事件

事件

常用事件

• click
• focus
• bulr
• change
• keyup
• hover
• input input内容变化时候触发

绑定事件

• $("选择器").事件名(function () {执行代码})
• $("选择器").on("事件名", function () {执行代码} )

阻止后续事件执行

• return false
• e.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("属性")