jQuery

目录

• Introduction
  • jQuery对象
• 查找标签
  • 基本筛选器
  • 属性选择器
  • 表单筛选器
  • 筛选器方法
    • 元素选择
    • 元素筛选
• 操作标签
  • 样式操作
  • CSS
  • 位置操作
  • 尺寸
  • 文本操作
  • 属性操作
  • 文档处理
• 事件
  • 常用事件
  • 事件绑定
  • 移除事件
  • 阻止后续事件
  • 阻止事件冒泡
  • 页面载入
  • 事件委托

Introduction

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

var $variable = jQuery对象
$variable[0] // jQuery对象转成DOM对象

查找标签

$('#id') // id选择器
$('tagName') // 标签选择器
$('.cl) // class选择器
$('div.cl') // 找到有cl类的div标签
$('#id, .className, tagName') // 组合选择器

$('x y')
$('x > y')
$('x + y') // 毗邻选择器
$('x ~ y') // 兄弟选择器

基本筛选器

:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
:not(元素选择器)
:has(元素选择器)

$('div:has(h1)')

属性选择器

[attr]
[attr=value]
[attr!=value]

$('input[type!="text"]')

表单筛选器

根据type类型

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

根据对象属性

:enabled
:disabled
:checked
:selected

筛选器方法

元素选择

下一个元素

$('#id').next()
$('#id').nextAll()
$('#id').nextUntil('#i2')

上一个元素

$('#id').prev()
$('#id').prevAll()
$('#id').prevUntil('#i2')

父亲元素

$('#id').parent()
$('#id').parents()
$('#id').parentsUntil()

儿子和兄弟元素

$('#id').children()
$('#id').siblings()

后代元素

$('div').find('p')

元素筛选

$('div').filter('.c1')
.first()
.last()
.not()
.has()
.eq()

操作标签

样式操作

addClass()
removeClass()
hasClass()
toggleClass()

CSS

tag.css('color', 'red') // tag.style.color = 'red'

位置操作

offset()
position()
scrollTop()
scrollLeft()

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeigth()
outerWidth()

文本操作

HTML

html()
html(val) // 设置元素html内容

文本

text()

值

val()

$('[name='hobby']').val(['basketball', 'football'])

属性操作

attr(attrName)
attr(attrName, attrValue)
attr({k1:v1, k2:v2})
removeAttr()

对于checkbox和radio

prop()

注意：

1. 对于标签上有的和自定义属性都用attr
2. 对于返回布尔值的如checkbox, radio和option是否被选中用prop

文档处理

append()
appendTo()

prepend()
prependTo()

.afer()
.insertAfer()

.before()
.insertBefore()

移除和清空元素

remove()
empty()

替换

replaceWith()
replaceAll()

克隆

clone()

事件

常用事件

click(func(){..})
hover
blur
focus
change
keyup

事件绑定

.on(event, [, selector], function(){})

移除事件

.off(event, [, selector], function(){})

阻止后续事件

1. return false;
2. 2.preventDefault()

阻止事件冒泡

$('span').click(function(e)) {
	alert('span');
	e.stopPropagation();
}

页面载入

$(document).read(function(){..})

$(function(){...})

事件委托

$('table').on('click', '.delete', function(){})