常用jQuery方法

jQuery

//封装原生js的方法
//动画，操作dom
//封装ajax、json

jquery.js

//1.xx 兼容ie6、7、8 
//2.xx 兼容ie6、7、8 过渡 
//3.xx 不兼容ie6、7、8 
//下载地址：https://jquery.com/
//文档地址：https://jquery.cuishifeng.cn/

jquery.js的使用

<div>asd</div>
//jq转js
$('div')[0]
//js转jq
$(document.querySelector('div'))

选择器

//基本
$('#id') //id
$('.class') //class
$('元素') //元素
$('*') //全部
$('#id， .class') //群组
-----------------------------------
//层级
$('ul li') //后代
$('ul>li') //子元素
$('#id+li') //下一个同胞元素
$('#id~li') //后面所有同胞元素
------------------------------------
//基本筛选器
:first //第一个
:last //最后一个
:eq(index) //下标为index的元素
:gt(index) //下标大于index的
:lt(index) //下标小于index的
:even() //偶数个
:odd() //奇数个
:not('选择器') //除了本元素
:root //根html
--------------------------------------
//内容
:contains('文本内容') //包含文本
:has('选择器') //匹配元素
:empty //空标签
:parent //包含文本或子元素
--------------------------------------
//表单对象
:enabled //可用的
:disabled //禁用的
:checked //复选框选择的
:selected //下拉框选中的
---------------------------------------
//表单
:input //所有表单元素
:text //所有单行文本框
:password //所有密码框
:radio //所有单选按钮
:checkbox //所有复选框
:submit //所有提交按钮
:image //所有图片
:reset //所有重置按钮
:button //所有按钮
:file //所有文件域
----------------------------------------
//可见性
:hidden //所有不可见
:visible //所有可见
----------------------------------------
//属性
[属性] //匹配有该属性的元素
[属性=值] //匹配有该属性和值的元素
[属性*=a] //匹配该属性的值有a的元素
[属性^=a] //匹配该属性的值以a开头的元素
[属性$=a] //匹配该属性的值以a结尾的元素
[属性!=a] //匹配该属性的值不完全是a的元素
[属性!=a][属性!=b] //多条件
-----------------------------------------
//子元素
:first-child //匹配符合条件元素的父元素的第一个子元素
:first-of-type //匹配符合条件元素的父元素的第一个子元素
:last-child //匹配符合条件元素的父元素的最后一个子元素
:last-of-type //匹配符合条件元素的父元素的最后一个子元素
:nth-child(n) //匹配符合条件元素的父元素下的第N个子或奇偶元素
:nth-last-child(n) //匹配符合条件元素的父元素下的倒数第N个子或奇偶元素
:nth-last-of-type(n) //匹配符合条件元素的父元素下的倒数第N个子元素
:nth-of-type(n) //选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
:only-child //如果某个元素是父元素中唯一的子元素，那将会被匹配
:only-of-type //选择所有没有兄弟元素，且具有相同的元素名称的元素

文档处理

//内部插入

//append() 末尾添加
$('父').append(子)

//appendTo() 末尾添加
$('子').appendTo(父)

//prepend() 头部添加
$('父').prepend(子)

//prependTo() 头部添加
$('子').prependTo(父)
----------------------------------

//外部插入

//after() 后面添加
$('A').after(B) //将B添加到A后面

//before() 前面添加
$('A').before(B) //将B添加到A前面

//insertAfter() 后面添加
$('A').insertAfter(B) //将A添加到B后面

//insertBefore() 前面添加
$('A').insertBefore(B) //将A添加到B前面
----------------------------------

//包裹

//wrap() 用新元素单独包裹每一个符合条件的被选元素
$('被选元素').wrap('新元素')

//unwrap() 移除父元素
$('子').unwrap() 

//wrapAll() 用新元素包裹所有符合条件的被选元素
$('被选元素').wrapAll('新元素')

//wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$('匹配的元素').wrapInner(HTML结构)
-----------------------------------

//替换

//replaceWith()
$('A').replaceWith('B') //B替换A

//replaceAll()
$('A').replaceAll('B') //A替换B
------------------------------------

//删除

//empty() 
$('A').empty() //清空A元素的内部

//remove() 从DOM中删除所有匹配的元素及其内容
//这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
$('').remove()

//detach() 从DOM中删除所有匹配的元素及其内容
//这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与
//remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
$('').detach()
------------------------------------

//克隆

//clone()
$('A').clone() //克隆A并返回克隆后的A
$('A').clone(true/false)
//true A的事件一起克隆
//false A的事件不克隆

属性

//属性

//attr() 获取元素属性
$('A').attr('属性名') //可以获取元素的自身属性和自定义属性
$('A').attr('属性名', 属性值) //可以给元素属性设置值

//removeAttr() 删除属性
$('A').removeAttr('属性名')

//prop() 获取元素属性
$('A').prop('属性名') //可以获取元素的自身属性及class属性
$('A').prop('属性名', 属性值) //可以给元素属性设置值

//removeProp() 删除属性
$('A').removeProp('属性名')
-------------------------------------------------------

//CSS类

//addClass() 添加类名
$('A').addClass('class名')

//removeClass() 删除类名
$('A').removeClass('class名')

//toggleClass() 类名的切换  
$('A').toggleClass('class名') //有此类名则删除类名，没有则添加类名
--------------------------------------------------------

//HTML代码、文本、值

//html() 取得第一个匹配元素的html内容
$('A').html()
$('A').html(内容) //设置html内容

//text() 取得所有匹配元素的文本内容
$('A').text()
$('A').text(内容) //设置text内容

//val() 获得匹配元素的当前值
$('A').val()
$('A').val(内容) //设置value内容

CSS

//css

//css()
css('属性名')
css('属性名', '属性值')
css({'key1':'value1','key2':'value2'})
------------------------------------------

//位置

//offset()
$('A').offset() //获取A距 浏览器/可视区域 的距离

//position()
$('A').position() //获取A距父级的距离

//scrollTop()
$('A').scrollTop() //获取A相对滚动条顶部的距离
$('A').scrollTop(number) //设置A相对滚动条顶部的距离

//scrollLeft()
$('A').scrollLeft() //获取A相对滚动条左侧的距离
$('A').scrollLeft(number) //设置A相对滚动条左侧的距离
------------------------------------------

//尺寸

//height()
$('A').height() //A的 height

//width()
$('A').width() //A的 width

//innerHeight()
$('A').innerHeight() //A的 height+padding

//innerWidth()
$('A').innerWidth() //A的 width+padding

//outerHeight()
$('A').outerHeight() //A的 height+padding+border

//outerWidth()
$('A').outerWidth() //A的 width+padding+border

筛选

//first()
$('A').first() //符合条件的第一个元素

//last()
$('A').last() //符合条件的最后一个元素

//eq()
$('A').eq(i) //符合条件的下标为i的元素

//children()
$('A').children() //A的子元素合集

//parent()
$('A').parent() //取得一个包含着所有匹配元素的唯一父元素的元素集合

//prev()
$('A').prev() //查找当前元素之前一个的同辈元素

//next()
$('A').next() //查找当前元素之后一个的同辈元素

//nextAll()
$('A').nextAll() //查找当前元素之后所有的同辈元素

//siblings()
$('A').siblings() //当前元素的同胞元素合集

效果

//基本

//show() 显示
$('A').show() //A显示

//hide() 隐藏
$('A').hide() //A隐藏

//toggle() 切换
$('A').toggle() //A隐藏/显示切换

//参数：( 速度或毫秒数， function(){} )
------------------------------------------

//滑动

//slideDown() 滑入
$('A').slideDown() //A下滑出现

//slideUp() 滑出
$('A').slideUp() //A上滑隐藏

//slideToggle() 滑入/滑出 切换
$('A').slideToggle() //A滑入/滑出切换

//参数：( 速度或毫秒数， function(){} )
------------------------------------------

//淡入淡出

//fadeIn() 淡入
$('A').fadeIn()

//fadeOut() 淡出
$('A').fadeOut()

//fadeToggle() 淡出/淡出切换
$('A').fadeToggle()

//参数：( 速度或毫秒数， function(){} )

//fadeTo() 不透明度改变成一个固定值
$('A').fadeTo(0.4) //A的不透明度设定成0.4

//参数：( 速度或毫秒数,  要达到的透明度0~1, function(){} )
------------------------------------------

//自定义

//animate(p,[s],[e],[fn]) 自定义动画
//p：以{}表示，是改变 key：value 的集合
//[s]：毫秒数,"slow","normal", or "fast"
//[e]：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"
//[fn]：动画运行完执行的函数
$('A').animate()

//stop([c],[j]) / stop([queue],[clearQueue],[jumpToEnd]) 停止
//[c]：如果设置成true，则清空队列。可以立即结束动画
//[j]：让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
//queue: 用来停止动画的队列名称
//clearQueue: 如果设置成true，则清空队列。可以立即结束动画。
//jumpToEnd: 如果设置成true，则完成队列。可以立即完成动画。
$('A').stop()

//delay(d,[q]) 隔一定时间再运行下一个动画
//d：延时时间，毫秒数
//[q]：队列名词，默认是Fx，动画队列
//注：show() / hide() 不能接在delay()后面
$('A').delay()

//finish([queue]) 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
//[queue]：停止动画队列中的名称
$('A').finish()

事件

//页面加载

//js中  window.onload
window.onload = function(){ 内容 } 
//页面所有资源加载完成
//只能写一次

//jq中  $(document).ready() / $()
jq $(document).ready(function(){
	......	
})
/
$(function(){
	......	
})
//html文档加载完成
//写多次
----------------------------------

//事件处理

//on() 绑定事件
$('选择器').on(事件类型, function(){}) //事件
$('父/祖先').on(事件类型, 子/后代, function(){}) //事件委派

//off() 解绑事件
$('选择器').off(事件类型)

//one() 每次载入页面只运行一次的事件
$('选择器').one(type,data,fn)
//type:事件类型，可以是多个
//data:将要传递给事件处理函数的数据映射
//fn:每当事件触发时执行的函数
----------------------------------

//事件切换

//hover() 鼠标移入移出事件切换
$('A').hover( function移入事件, function移出 )
-----------------------------------

事件类型:
change--当元素的值发生改变时触发
click--点击
dblclick--双击
focas--当元素获得焦点时触发
focusin--当元素获得焦点时触发
focusout--当元素失去焦点时触发
keydown--当键盘按下按钮时触发
keyup--当按钮被松开时触发
mousedown--当鼠标指针移动到元素上方，并按下鼠标按键时触发
mouseenter--当鼠标指针穿过元素时触发
mouseleave--当鼠标指针离开元素时触发
mousemove--当鼠标指针在指定的元素中移动时触发
mouseout--当鼠标指针从元素上移开时触发
mouseover--当鼠标指针位于元素上方时触发
scroll--当用户滚动指定的元素时触发

window.onload 和 $(document).ready(function (){}) 的区别

window.onload:
    原生js中的方法
    一个页面只能写一次
    在所有资源加载完成后才加载
    
$(document). ready(function(){}):
    jQuery中的方法
    一个页面可以写多次
    在dom树加载完成后就加载
    省略写法$(function(){})