--------jQuery总结------

jQuery的属性和使用方法（常用）

一、jquery优点：
1.轻量，开源，免费
2.兼容性处理
3.强大的选择器
4.链式操作
5.便捷的dom操作
6.可靠的时间机制
7.封装了ajax请求方式
8.丰富的插件

二、jquery的dom操作css
1.$dom.css(‘background-color’,‘red’)

2.原生dom转化为jquery dom
$(box) 这样就转为jquery dom了

3.jquery dom转化为原生dom
$box[0] 这样就转化为原生dom

4.创建一个新元素标签
$(’

’).html(‘很帅很帅’).appendTo(’#box’); 这样就创建了

很帅很帅

三、全局对象：
全局对象jquery的别名是 $ 即 $===jquery

四、选择器：
1.基本选择器： 跟css的选择器一样
①id选择器： $ (’#idName’).css(’’)
②class选择器：$(’.className’).html(’’)

2.层级选择器：
①选择器 选择器 后代的元素
②选择器>选择器 父元素上的所有直系子元素
③选择器+选择器 元素上的下一个元素
④选择器~选择器 元素后面的所有兄弟元素

3.筛选选择器： js没有 jq独有
①#box li:first/last/eq(1)/gt(2)/lt(2) 选中box下的第一个li标签/最后一个/选中第几个eq(0)是第一个，不管是子元素还是孙元素都一样算的/gt(2)是大于二的意思,二后面的元素都被选中/lt(小于2)
②#box li:odd/even 奇数行/偶数行
③#box li:not(选择器)； 排除掉not里面的选择器
④#box li:lang(en) lang选择器选中语言
⑤:root 获取的根元素
⑥:header 所有的标题标签
⑦:focus 获取的焦点元素
⑧:targe 锚点指向的元素

4.内容选择器：
1.li:contains(‘text’) 有这个text内容的直接元素和父元素都将选中
2.:has(selector) 包含着这个selector元素的 父元素
3.:empty 没有内容也没有子元素的一个标签
4.parent 要么有内容要么有子元素

5.可见性选择器：
:hidden 不可见的元素
:visible 可见的元素

6.属性选择器：
1.[attrName]
2.[attrName=value]
3.[attrName^=value] 属性开始的那个字母或数字
4.[attrName$=value] 属性结束的那个字母或数字
5.[attrName*=value] 属性包含有这个value的，写一个字母数字都行
6.[attrName][attrName] 多个属性同时满足

7.子元素选择器： 和css3的是一样的
:first-child 兄弟元素的第一个 必须是冒号前面相同的
:last-child 兄弟元素的最后一个 必须是冒号前面相同的
:nth-child(index) 兄弟元素的第几个 index是从1开始数的
:nth-last-child(index)
:only-child 没有兄弟元素的
:first-of-type 兄弟元素的第一个 不需要是冒号前面相同的
:last-of-type 兄弟元素的最后一个 不需要是冒号前面相同的
:nth-of-type(index) 不需要是冒号前面相同的

8.混淆选择器：
$.escapeSelector(‘selector’) className或者id有特殊符号的话就可以使用 例如

id='#demo' $(# +$.escapeSelector('#demo'))

五、属性操作：
获取
1.attr(属性名) 可以获取内置的和自定义的
2.prop(属性名) 只能获取内置的属性

修改
attr(‘tittle’,‘你好’) tittle里的值就修改为你好了
prop(‘tittle’,‘你好’) 只能修改html内置的属性

添加
attr(‘tittle’,‘你好’) 直接就可以添加
prop(‘tittle’,‘你好’) 只能添加内置的属性

删除
removeAttr(属性名)

CSS类：
1.addClass() 添加一个class值
2.removeClass 删除一个class值
3.toggleClass() 切换一个class值 比如点击出现某东西 再点击消失 再点击又出现，就可以直接用这个
4.hasClass() 判断是否有某个class值 返回的是true和false 用if判断就可以了

HTML/文本/值
.html(html) 设置或获取元素里面的html代码 类似于innerHtml
.text() 设置或获取元素里面的文本，没有标签 类似于innerText
val() 设置或获取表单控件里的值

六、jquery样式操作：
1.css操作：
css() 括号里只写属性名就是获取该属性值 写属性名和属性值就是赋值

2.位置：
①、offset() 元素在页面中的坐标 可以改变位置

$('#box).offset({left:100,top:100})

②、position() 元素在第一个定位的元素祖先的坐标 如果没定位就跟窗口坐标相当于offset

③、scrollLeft() 可以获取滚动条距离，如果括号里有值就是赋值 可以做一个点击事件

$('#box').scrollLeft($('#box). scrollLeft()+100) 这样点击一下滚动条就加100 

3.尺寸：
①width()/height() 内容的宽高
②innerWidth()/innerHeight() 内容+padding的宽高
③outerWidth()/outerHeight() 内容+padding+margin 的宽高

七、jquery删选操作：
1.过滤操作
first() 第一个
last() 最后一个
eq(1) 第二个
not()
filter(’.item’) className为item的
slice(1,3) 截取索引为第一个开始，第三个结束，不包括第三个索引
has(’.item’) 子元素存在属性item

2.查找
children() 获取的是子元素 括号里可写可不写参数
find(‘selector’) 获取的是后代元素 括号里一定得写参数
parent() 父元素
parents() 祖先元素 括号里可以写上参数 不然祖先元素太多了
parentsUntil(‘body’) 括号里写上参数 获取到body以下的所有祖先元素
offsetParent() 获取第一个定位的祖先元素
获取兄弟元素：
next()
nextAll()
nextUntil()
prev() 紧邻前面的兄弟元素
prevAll()
prevUntil()
siblings() 所有的兄弟元素
closest(‘selector’) 从所有的 祖先元素和本身里 面找到满足条件的元素

3.串联
add() 把选中的元素加入当前的集合
addBack() 把调用该方法的元素加入当前集合中 例如 $(’'ul).find(‘li’).addBack() 这样不仅找到li还找到ul
end() 返回最后一次破坏性操作之前的dom
contents() 返回所有子节点的集合

4.jquery dom对象操作
①、each() 遍历

  $ ('.myList li').each(function(index,ele){
    console.log(index,ele)   index就是索引 ele是每个元素
    ele.innerHTML+='爱你'    原生操作
    $(ele).append(爱你')     jquery的追加
})

②、map() ： 返回一个新的集合 返回的就是return的内容

 var list = $('.myList li).map(function(index,ele){
    return $(ele).html();
})

③、length ： 集合中元素的数量

④、index() ： 返回该元素在父元素的索引位置

$ ('.myList li').click(function(){
    alert($(this).index());
})

⑤、get() ： 括号里有参数的话就返回原生dom对象 如果没参数的话就把jquery的dom集合转为纯数组

⑥、is(selector) ： 判断该jquery是否满足某个条件 返回布尔值

八、jquery dom操作
1.创建元素

$(' <img src = '../img/1.jpg'>')  这样就创建了一个img 一定要带上<> ,没带的话就变成选择器了

2.插入内部

append()    $('#box').append(''<img src = '../img/1.jpg'>'') ;  添加到box内部为box的子元素

appendTo()   $('<img src = '../img/1.jpg'>').appendTo('#box');   先创建新元素插入到box

prepend    添加到最前面，和append用法一样  

prependTo()   添加到最前面 和appendTo用法一样

3.插入外部
after() ：添加到box外部后面

   $('#box').after('<img src = '../img/1.jpg'>') 

insertAfter() ：先创建在插入

 $('<img src = '../img/1.jpg'>').insertAfter('#box')  

before() ： 添加到box外部前面
insertBefore() ： 先创建再插入

4.包裹

wrap('<li>')         在外边包裹一个li  

wrapAll('<li>')        

wrapInner('<li>')    会在里边包裹一个li

unwrap('<li>')       去除包裹的父元素

5.替换

replaceWith()    想换掉的元素.replaceWith('new')

replaceAll()     new.replaceAll('想换掉的元素')

6.删除

empty()  清空里面所有的内容

remove()   删除的元素 如果恢复了 原来绑定的事件也没了

detach()   删除的元素 如果恢复了 原来绑定的事件也恢复了

恢复：

 var backEle = $('img').detach() 
 $('#box').append(backEle)  

7.克隆
clone()

九、jquery 事件
1.事件绑定
$(this).mouseover(function)
$(this).on(‘click’,function(){})
$(this).one(‘dblclick’,function(){}) 双击事件 事件只能绑定一次

$(this).on({
    'mouseover' : function(){}
    'mouseout' : function(){}
    })       //on 绑定多个事件

2.解除事件绑定
off() 解除所有事件 括号里可以写参数 即解除某个事件

3.事件委派
on(‘click’,‘li’,function(){})

4.控制事件触发

trigger()    $('#btn').trigger('mouseover')   

假设#btn绑定了mouseover事件 可以在另外一个控件里控制它的事件
triggerHandler() 与trigger相似
差别：trigger返回的是jquery dom 可以连续操作
triggerHandler无法触发元素自带的事件例如表单的focus
trigger会触发集合中所有元素的事件 而triggerHandler只会触发集合中的第一个元素的事件

5.事件列表
ready 页面中dom加载完毕
focusin 获取焦点 绑定给输入框的父元素
focusout 失去焦点 绑定给输入框的父元素
mouseenter 代替mouseover 鼠标悬停在元素上
mouseleave 代替mouseout 鼠标离开元素
hover： mouseenter 和mouseleave的集合

6.事件对象
pageX：鼠标箭头x的位置
pageY：鼠标箭头y的位置
targe：当前触发事件的元素
which：键盘按键的ascii码
type：事件类型（事件名称）
preventDefault() 阻止默认事件 比如a标签的自动跳转页面
stopPropagation() 阻止事件冒泡
return false 即可以阻止默认事件又可以阻止事件冒泡

7.元素拖拽

十、动画效果
1.基本效果

hide(fast/normal/slow/3000): 隐藏 参数可以产生隐藏动画效果

show(fast/normal/slow/3000): 隐藏中显示 参数可以产生显示动画效果

toggle(fast/normal/slow/3000)  切换
基本效果的css属性变化：透明度变化，元素大小相关参数都会变化

2.滑动效果

slideDown()   显示  括号里可以放时间和回调函数，当时间执行完就运行函数

slideUp()     隐藏   括号里可以放时间和回调函数，当时间执行完就运行函数

slideToggle()  切换   括号里可以放时间和回调函数，当时间执行完就运行函数

垂直方向上的变化 height padding-top margin-top

3.淡入淡出效果

fadeOut()  隐藏   括号里可以放时间和回调函数，当时间执行完就运行函数

fadeIn()    显示   括号里可以放时间和回调函数，当时间执行完就运行函数

fadeToggle()  隐藏显示切换    括号里可以放时间和回调函数，当时间执行完就运行函数

fadeTo(时间，透明度，回调函数)  括号里放入时间和透明度 改变透明度
透明度的变化/渐变

4.自定义动画

animate({},时间/fast/normal/slow)     括号里第一个参数是对象 第二个参数为执行的时间  第三个为回调函数可以不写

stop()   使动画停止 相当于暂停 再动画的执行中可以暂停掉

finish()   使动画完成  瞬间使动画完成

delay(时间)  延迟动画的执行

5.动画的设置

jQuery.fx.off = true  关闭页面中所有的动画

jQuery.fx.interval    动画的帧数 

6.动画队列：
所有的动画操作会加入到队列中依次执行
其他的操作不会加入到动画的队列

十一、jquery的ajax
1.快速请求的方法

get()     $.get(地址?参数，回调函数)
post()    $.post(地址，{参数}/$('myForm').serialize(),回调函数)

2.ajax方法：
ajax()

$.ajax({
    url:"http: ..地址"，
    type:'get',
    data:{name:'Jim',message:'同志你好'}，  发送的数据 对象或字符串(序列化字符串)
    dataType:响应的内容格式
    async：true，   同步还是异步 可以不写 默认为异步，
    success：function(data){}   响应成功的回调函数
    error：function(){}   服务器请求响应失败的回调函数
})

3.表单方法：

serialize()  把表单中有name属性的表单控件的值 拼接成字符串

十二、jquery工具方法：
1.数组对象方法：
①$.each(数组名，回调函数) 遍历数组或类数组对象

  $.each(数组名，function(index,item){})   index是索引 item是内容

②$.grep(数组名，回调函数) 过滤数组

 var demo = $.grep(数组名，function(item,index){return item % 2 === 0})   数组中的偶数

③$.map(数组名，回调函数) 从数组取出信息，返回新的数组

   var demo = $.map(数组名，function(item,index){return item+4})  数组中的每个值都加4

④$.makeArray() 把类数组对象转化为纯数组

⑤$.inArray(某个元素，数组名) 判断一个元素在数组内的位置，不存在返回-1

⑥$.merge() 合并数组

.toArray()       jquery dom方法  把jquery dom直接转化为纯数组

2.函数方法：
$.proxy() 改变函数内this的指向 和原生bind是一样的

3.类型判断：
① $ .type()
② $ .isFunction() 判断是否是方法，返回true或false
③ $ .isEmptyObject() 判断是否是空的对象
④ $ .isPlainObject() 判断是否是纯的对象，构造函数是object
⑤ $ .isWindow() 判断是否是window对象
⑥$.isNumeric() 判断是否是数字，NaN为false

4.字符串：
$ .trim() : 取出两边的空格
$ .param() : 序列化成字符串

  console.log($.param({name:'lix',age:20}))  //输出为name=lix&age=20

版本：
$.fn.jquery 可以获取当前jquery的版本