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])
