为什么要用jQuery?
    短小精悍。开发效率高

什么是jQuery?
    类似python里的模块，jQuery是JS的一个函数库/插件
    
如何使用jQuery?
    1.导入<script src="../jquery3_0_0.js"></script>
    2.语法：
        jQuery('#box').text('...');
        $('#box').text('GDP');
        
jQuery 库包含以下特性：
    HTML 元素选取
    HTML 元素操作
    CSS 操作
    HTML 事件函数
    JavaScript 特效和动画
    HTML DOM 遍历和修改
    AJAX
    Utilities
        
JS和jQuery的关系
    jQuery就是JS写的
    JS是基础，jQuery是工具
    jQuery兼容性更强

jQuery介绍
    版本
        1.x 为了兼容IE8等浏览器
        3.x 最新

    .min.xx 压缩版本，用于生产环境，节省带宽。
    未压缩版本   用于开发环境

查找标签

选择器

语法规则：$('xxx')

- ID选择器    $('#id')
- 类选择器    $('.class')
- 标签选择器  $('tagName')
- 所有标签    $('*')

- 组合选择器  $('#id, .class, tagName')
- 层级选择器（后代选择器）
    - 从一个标签的子子孙孙中去找  $('#box p')
    - 从一个标签的儿子中去找  $('#box > p')
    - 之后紧挨着的元素（毗邻选择器）   $('#box + p')
    - 找后面所有同级的    $('#box ~ p')

jQuery对象

- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象可以使用jQuery方法，不能用DOM对象的方法
- DOM对象和jQuery对象转换
    DOM => jQuery   $(DOM对象)
    jQuery => DOM   jQuery对象[0]

筛选器

基本筛选器

:first  筛选第一个元素 $("#box>p:first")
:last   最后一个元素
:not(selector)  过滤掉 $("#box>input:not(.c1 .c2)")

:even   偶数  $("#box>input:even")     
:odd    奇数  $("#box>input:odd")

:eq(index)  索引等于某个值 $("#box>input:eq(0)")
:gt(index)  索引大于某个值 $("#box>input:gt(1)")
:lt(index)  索引小于某个值


:header
:animated
:focus  获得焦点
:root   1.9+
:target 1.9+
:lang   1.9+

内容

:contains(text) 包含某些文档内容
:empty  文档内容为空
:has(selector)  子孙包含某个元素的标签
:parent 为人父母的元素     ***区别于$("").parent()

可见性

:hidden     找到隐藏的元素
:visible    找到可见的元素

属性筛选器

[attribute]     $('input[name]')
[attribute=value]   $('input[type="password"]')
[attribute!=value]  属性不等于
[attribute^=value]  以什么开头
[attribute$=value]  以什么结尾
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

子元素

:first-child    作为第一个孩子的标签
:first-of-type  1.9+
:last-child     作为最后一个孩子的标签
:last-of-type   1.9+
:nth-child
:nth-last-child()   1.9+
:nth-last-of-type() 1.9+
:nth-of-type()  1.9+
:only-child     作为独生子
:only-of-type   1.9+

表单

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

表单对象属性

:enabled
:disabled
:checked
:selected

混淆选择器

$.escapeSelector(selector)  3.0+

筛选

过滤

eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)
map(callback)
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])

查找

children([expr])
closest(e|o|e)  1.7*
find(e|o|e)
next([expr])
nextAll([expr])
nextUntil([e|e][,f])
offsetParent()
parent([expr])
parents([expr])
parentsUntil([e|e][,f])
prev([expr])
prevall([expr])
prevUntil([e|e][,f])
siblings([expr])

串联

add(e|e|h|o[,c])    1.9*
andSelf()   1.8-
addBack()   1.9+
contents()
end()

属性

attr(name|pro|key,val|fn)   普通属性 src 
removeAttr(name)    删除属性的值
prop(n|p|k,v|f)     属性的返回值是布尔类型 checked selected
    - 例子：全选反选。
        如果JQuery对象是一个集合，取属性时，默认得到第一个元素的该属性。
                              设置值时，全部都设为某个值。
    - 循环
        - $.each(数组,function(index,value){})
        - 数组.each(function(index,value){})  
    
removeProp(name)    删除属性的值

CSS类

addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])

HTML代码/文本/值

没有参数就是获得值，有参数就是设置值。

html([val|fn])  加html标签     .html("<span>111</span>")

text([val|fn])  加文本     .text("111")

val([val|fn|arr])   
    - input
    - checkbox
        - 获取的是value值
    - select 
        - 单选  就是获取值
        - 多选  得到一个数组，设置时也要是数组

CSS

css

css(name|pro|[,val|fn])
    $('#box').css('color')      获取一个
    $('#box').css(['color','border'])   获取多个
    $('#box').css('color','red')    设置一个
    $('#box').css({'color':'red','background':'green'}) 设置多个

位置

offset([coordinates])   relative
    - 获取相对位置，
    - 比较的对象是html
    
position()  absolute
    - 获取相对已经定位的父标签的位置，
    - 比较的对象是最近的做过定位的祖先标签
    
scrollTop([val])    
    - 获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
    - val 设定垂直滚动条值
    
scrollLeft([val])

尺寸

height([val|fn])    元素的高度
width([val|fn])     元素的宽度
innerHeight()   带padding的高度
innerWidth()
outerHeight([soptions])     在innerHeight的高度上再加border
outerWidth([options])

文档处理

内部插入

append(content|fn)  往后加
appendTo(content)
    a.append(b)//在a后面追加b
    b.appendTo(a)//把b追加到a后面

prepend(content|fn)
prependTo(content)

外部插入

after(content|fn)   往后加
insertAfter(content)
    a.after(b)//把b加到a后边
    a.insertAfter(b)//把a插到b后边

before(content|fn)  往前加
insertBefore(content)
    a.before(b)
    a.insertBefore(b)

包裹

wrap(html|ele|fn)   用参数包裹选择元素
unwrap()
wrapAll(html|ele)   把所有找到的都包到一个标签中
wrapInner(html|ele|fn)

替换

replaceWith(content|fn)
    A.replaceWith(B) //用B替换A
    
replaceAll(selector)
    A.replaceAll(B) //用A替换B

删除

empty() 内部清空
remove([expr])  整体移除
detach([expr])  剪切 多保存在变量中，方便再次使用

复制

clone([Even[,deepEven]])
    - 参数1 是否克隆事件

事件处理

JS绑定事件的方式

jQuery绑定事件的方式

效果

基本

show([s,[e],[fn]])
    - speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    - easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
    - 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]) 1.8*
    
stop([c],[j])1.7*
delay(d,[q])
finish([queue])1.9+

设置

jQuery.fx.off   关闭页面上所有的动画。
jQuery.fx.interval  设置动画的显示帧速。

事件

页面载入

ready(fn)
文档树加载完成后绑定事件
    $(document).ready(function(){
      // 在这里写你的代码...
    });
简写
    $(function($) {
      // 你可以在这里继续使用$作为别名...
    });

事件处理

- on(eve,[sel],[data],fn)1.7+
- off(eve,[sel],[fn])1.7+
- bind(type,[data],fn)3.0-
- [one(type,data],fn)
- [trigger(type,data])
- [triggerHandler(type, data])
- unbind(t,[d|f])3.0-

事件委派

live(type,[data],fn)    1.7-
die(type,[fn])  1.7-
delegate(s,[t],[d],fn)  3.0-
undelegate([s,[t],fn])  3.0-

事件切换

- [hover(over,]out)
- toggle([spe],[eas],[fn])1.9*

事件

- blur([[data],fn])     当元素失去焦点时
- focus([[data],fn])    当元素获得焦点时
- change([[data],fn])   当元素的值发生改变时
- click([[data],fn])    当点击元素时
- dblclick([[data],fn]) 当双击元素时
- submit([[data],fn])   当提交表单时

- error([[data],fn])    当元素遇到错误（没有正确载入）时
- focusin([data],fn)    当元素获得焦点时
- focusout(data],fn)    当元素失去焦点时
- keydown([[data],fn])  当键盘或按钮被按下时
- keypress([[data],fn]) 当键盘或按钮被按下时
- keyup([[data],fn])    当按钮被松开时
- mousedown([[data],fn])    当鼠标指针移动到元素上方，并按下鼠标按键时
- mouseenter([[data],fn])   当鼠标指针穿过元素时
- mouseleave([[data],fn])   当鼠标指针离开元素时
- mousemove([[data],fn])    当鼠标指针在指定的元素中移动时
- mouseout([[data],fn]) 当鼠标指针从元素上移开时
- mouseover([[data],fn])    当鼠标指针位于元素上方时
- mouseup([[data],fn])  当在元素上放松鼠标按钮时
- resize([[data],fn])   当调整浏览器窗口的大小时
- scroll([[data],fn])   当用户滚动指定的元素时
- select([[data],fn])   当 textarea 或文本类型的 input 元素中的文本被选择时

- unload([[data],fn])   在当用户离开页面时

事件处理

JS绑定事件的方式

1 在标签里，ele.onclick = func();    
2 在script中，ele.onclick = function(){}
3 事件委派，ele.addEventListener('click',function(){})

jQuery绑定事件的方式

1 $(ele).on('click',function(){})
  $(ele).focus(function(){})
2 $("tbody").delegate(".btn-warning",'click',function(){})  已废弃
3 $(ele).on('click',".btn-warning",function(){})

哪吒骚操作

chrome截长图

ctrl + shift + I
ctrl + shift + P
screenshot

创建多个标签

.box[attr=mxt]{$}*10

jQuery扩展

$.xxx() 给jquery添加扩展

$.extend({
    "GDP":function () {
        console.log('戴帽子');
    }
});

$("").xxx() 给jquery对象添加扩展

$.fn.extend({
    'BJG':function () {
        console.log('8级哥');
    }
});

保存函数私有

(function(jq){
    jq.extend({
        "GDP":function () {
            console.log('戴帽子');
        },
        function func1(){
          ...
        }
    });
})(jQuery);

其他

data()
    .data('key','value')    设置值
    .data('key')    没有值就返回undifined
    .removeData()   删除所有

jQuery简介

查找标签

选择器

jQuery对象

筛选器

基本筛选器

内容

可见性

属性筛选器

子元素

表单

表单对象属性

混淆选择器

筛选

过滤

查找

串联

属性

属性

CSS类

HTML代码/文本/值

CSS

css

位置

尺寸

文档处理

内部插入

外部插入

包裹

替换

删除

复制

事件处理

JS绑定事件的方式

jQuery绑定事件的方式

效果

基本

滑动

淡入淡出

自定义

设置

事件

页面载入

事件委派

事件切换

事件

事件处理

JS绑定事件的方式

jQuery绑定事件的方式

哪吒骚操作

jQuery扩展

其他

推荐阅读更多精彩内容