jQuery——标签、事件、动画

一、查找标签

1.1 基本选择器

// id选择器
$('#d1') 
// class选择器
$('.c1')
//  标签选择器
$('div')

2.2 组合选择器

// 查找含有c1样式类的span标签
$('span.c1')
// 查找div、span、p标签
$('div,span,p')
// 查找id是d1或者class含有c1或者含有span的标签
$('#d1,.c1,span')

1.3 层级选择器

// 查找div里面所有的后代p标签
$('div p')
// 查找div里面的子标签p
$('div>p')
// 查找div同级下紧挨着的p
$('div+p')
// 查找div同级下所有的p
$('div~p')

1.4属性选择器

// 查找含有username属性名的标签
$('[username]')
// 查找input含有username属性名并值等于maria的标签
$('input[username="maria"]')

1.5 基本选择器

// 第一个
:first
// 最后一个
:last
// 索引等于index的那个元素
:eq(index)
// 匹配所有索引值为偶数的元素
:even
// 匹配所有索引值为奇数的元素
:odd
// 匹配所有大于给定索引值的元素
:gt(index)
// 匹配所有小于给定索引值的元素
:lt(index)
// 移除所有满足not条件的标签
:not(元素选择器)
// 取所有包含一个或多个标签在其内的标签(从后代元素找)
:has(元素选择器)

1.6 表单选择器

$(':text')
$(':password')

$(':checked')		checked与selected都会找到
$(':selected')		selected

1.7 筛选器方法

//
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

二、操作标签

2.1 class操作

addclass()
removeClass()
hasClass()
toggleClass()

2.2位置操作

$(window).scrollTop()

2.3文本操作

text()					innerText
html()					innerHTML
val()					value
jQuery对象[0].files	  files[0]

2.4创建标签

document.createElement()  $('<a>')

2.5属性操作

attr()/removeAttr()					 xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')

2.6文档处理

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

三、jQuery事件

JS绑定事件
	标签对象.on事件名 = function(){}
jQuery事件绑定
	方式1:
		jQuery对象.事件名(function(){})
 	方式2:
    	jQuery对象.on('事件名称',function(){})
 	ps:默认就用方式1 不行了再用方式2
ps:补充
    clone属性
    	clone(true)  默认不克隆事件 加true就可以

3.2事件相关补充

1.取消后续事件
	事件函数的最后return false即可
2.阻止事件冒泡
	事件函数的最后return false即可
3.等待页面加载完毕再执行代码
	$(function(){})				   缩略写法
 	$(document).ready(function(){})  完整写法
4.事件委托
	主要针对动态创建的标签也可以使用绑定的事件
 	$('body').on('click','button',function(){})
 	将body内所有的单击事件委托给button标签执行

3.3jQuery动画

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])