序

一个JS函数库

了解jQuery

定义

一个JS函数库: write less, do more
封装简化DOM操作(CRUD) / Ajax

优点

强大选择器: 方便快速查找DOM元素
隐式遍历(迭代): 一次操作多个元素
读写合一: 读数据/写数据用的是一个函数
链式调用: 可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容

使用方法

引入jQuery库
- 本地引入与CDN远程引入
  - CDN远程引入网站：BootCDN
- 测试版与生产版(压缩版)
使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象: $xxx(执行$()得到的)

多库共存

问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用,
此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

jQuery的2把利器

jQuery函数-jQuery

jQuery向外暴露的就是jQuery函数, 可以直接使用

当成一般函数使用人: $(param)

param是function: 相当于window.onload =
function(文档加载完成的监听)
param是选择器字符串: 查找所有匹配的DOM元素,
返回包含所有DOM元素的jQuery对象
param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)

param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回

  例子：
    //1). 参数为函数 : 当DOM加载完成后，执行其中的函数     回调函数
$(function () {
//2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
var $btn = $("#btn")
$btn.click(function () {
    //this就是发生事件的dom元素对象(也就是button)
    //3). 参数为DOM对象: 将dom对象封装成jQuery对象
    var text = $(this).html()
    alert(text)
    //4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
    $('<input type="text" name="msg3" /><br />').appendTo('div')
})
})

当成对象使用: $.xxx

each(obj/arr, function(key, value){})

trim(str)

  例子：
/*需求2. 遍历输出数组中所有元素值*/
var arr = [123, 'xxx', true]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log('第' + (index + 1) + '个元素的值为' + item)
})

/*需求3. 去掉"  my atguigu  "两端的空格*/
var str = "  my xxx  "
// 2). $.trim() : 去除两端的空格
console.log(str.trim() === 'my xxx')
console.log($.trim(str) === 'my xxx') //true

jQuery对象

包含所有匹配的n个DOM元素的伪数组对象
执行$()返回的就是jQuery对象

基本行为:

length/size(): 得到dom元素的个数
[index] : 得到指定下标对应的dom元素
each(function(index, domEle){}): 遍历所有dom元素

index(): 得到当前dom元素在所有兄弟中的下标

$(function () {
var $btns = $('button')
console.log($btns)
// 需求1. 统计一共有多少个按钮
    /*size()/length: 包含的DOM元素个数*/
console.log($btns.size(), $btns.length)

// 需求2. 取出第2个button的文本
    /*[index]/get(index): 得到对应位置的DOM元素*/
console.log($btns[1].innerHTML, $btns.get(1).innerHTML)

// 需求3. 输出所有button标签的文本
    /*each(): 遍历包含的所有DOM元素*/
$btns.each(function () {
    console.log(this.innerHTML)
})

// 需求4. 输出'测试三'按钮是所有按钮中的第几个
    /*index(): 得到在所在兄弟元素中的下标*/
console.log($('#btn3').index())
})

伪数组

object对象
length属性
数值下标属性

没有数组特别的方法：例如foreach()

   //自定义一个位数组
var weiarr={}
weiarr.length=0
weiarr[0]='xxxx'
weiarr.length=1
weiarr[0]=123

选择器

定义

有特定语法规则(css选择器)的字符串
用来查找某个/些DOM元素: $(selector)

分类

基本选择器
- #id: id选择器
- element : 元素选择器
- .class: 属性选择器
- selector1,selector2,selector3: 并集
- selector1selector2selector3: 交集
- : 任意标签
层次选择器
- 查找子元素, 后代元素, 兄弟元素的选择器
- selector1>selector2: 子元素
- selector1 selector2: 后代元素
- prev+next
  - 匹配所有紧接在 prev 元素后的 next 元素
- prev~siblings
  - 匹配 prev 元素之后的所有 siblings 元素
过滤选择器
- 在原有选择器匹配的元素中进一步进行过滤的选择器
- :first 获取第一个元素
- :last 获取最后个元素
- :eq(index) 匹配一个给定索引值的元素
- :lt 匹配所有小于给定索引值的元素
- :gt 匹配所有大于给定索引值的元素
- :odd 匹配所有索引值为奇数的元素，从 0 开始计数
- :even 匹配所有索引值为偶数的元素，从 0 开始计数
- :not(selector) 去除所有与给定选择器匹配的元素
- :hidden 匹配所有不可见元素，或者type为hidden的元素
- :visible 匹配所有的可见元素
- :contains(text) 匹配包含给定文本的元素
- [属性] 匹配包含给定属性的元素
- [属性=属性值] 匹配给定的属性是某个特定值的元素
表单选择器
- :input 匹配所有 input, textarea, select 和 button 元素
- :text 匹配所有的单行文本框
- :checkbox 匹配所有复选框
- :radio 匹配所有单选按钮
- :checked:匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

$工具方法

$.each(): 遍历数组或对象中的数据
$.trim(): 去除字符串两边的空格
$.type(obj): 得到数据的类型
$.isArray(obj): 判断是否是数组
$.isFunction(obj): 判断是否是函数
$.parseJSON(json) : 解析json字符串转换为js对象/数组

属性-文本

操作标签的属性, 标签体文本
attr(name) / attr(name, value): 读写非布尔值的标签属性
prop(name) / prop(name, value): 读写布尔值的标签属性
removeAttr(name)/removeProp(name): 删除属性
addClass(classValue): 添加class
removeClass(classValue): 移除指定class
val() / val(value): 读写标签的value
html() / html(htmlString): 读写标签体文本

CSS模块

style样式

css(styleName): 根据样式名得到对应的值
css(styleName, value): 设置一个样式
css({多个样式对}): 设置多个样式

位置坐标

offset(): 读/写当前元素坐标(原点是页面左上角)
position(): 读当前元素坐标(原点是父元素左上角)

scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标

//jquery实现backup
<script src="jquery-1.10.1.js"></script>
<script>
$(function () {
    //回到顶部
    $('#to_top').click(function () {
    var $body = $(document.body)
    var $html = $(document.documentElement)

    //使用scrollTop(): 瞬间滚动到顶部
    // $('html,body').scrollTop(0)

    //使用scrollTop(): 平滑滚动到顶部
    var offset = $body.scrollTop() + $html.scrollTop()//总距离
    if(offset===0) {
        return
    }
    var totalTime = 300//总时间
    var intervalTime = 30//间隔时间
    var itemOffset = offset/(totalTime/intervalTime)//每一段间隔时间内滚多少距离
    var intervalId = setInterval(function () {
        offset -= itemOffset//总距离减去一次间隔时间内的距离
        if(offset<=0) {
        offset = 0
        clearInterval(intervalId)
        }
        $('html,body').scrollTop(offset)
    }, intervalTime)

    //使用动画: 平滑滚动到顶部
    $('body,html').animate({scrollTop:0},300)
    })
});
</script>

尺寸

内容尺寸

height(): height
width(): width

内部尺寸

innerHeight(): height+padding
innerWidth(): width+padding

外部尺寸

outerHeight(false/true): height+padding+border 如果是true,
加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin

筛选模块

过滤

在jQuery对象内部的元素中找出部分匹配的元素,
并封装成新的jQuery对象返回
first()：获取第一个元素
last()：获取最后一个元素
eq(index)：获取第N个元素
filter(selector): 筛选出与指定表达式匹配的元素集合
not(selector): 指定表达式匹配的元素，并取反
has(selector): 保留包含特定后代的元素，去掉那些不含有指定后代的元素

查找

查找jQuery对象内部的元素的子孙/兄弟/父母元素,
并封装成新的jQuery对象返回
children(selector): 子元素
parent(): 父元素
find(selector): 后代元素
preAll(selector): 查找当前元素之前所有的同辈元素
siblings(selector):
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

文档处理-CUD-模块

增加

append() / appendTo(): 向当前匹配的所有元素内部的最后插入指定内容
preppend() / preppendTo():
向当前匹配的所有元素内部的最前面插入指定内容
before(): 将指定内容插入到当前所有匹配元素的前面
after(): 在每个匹配的元素之后插入内容

删除

remove(): 将自己及内部的孩子都删除
empty(): 掏空(自己还在)

更新

replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素

事件模块

绑定事件

eventName(function(){})
- 绑定对应事件名的监听, 例如：$(‘#div’).click(function(){});
on(‘eventName’, function(){})
- 通用的绑定事件监听, 例如：$(‘#div’).on(‘click’, function(){})
常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
hover(function(){}, function(){})

解绑事件

off(‘eventName’)

事件委托

理解
- 将多个子元素的事件监听委托给父辈元素处理
- 监听回调是加在了父辈元素上
- 当操作任何一个子元素时, 事件会冒泡到父辈元素
- 父辈元素不会直接处理事件,
  而是根据event.target得到发生事件的子元素,
  通过这个子元素调用事件回调函数
好处
- 添加新的子元素, 自动有事件响应处理
- 减少事件监听的数量: n==>1
jQuery的事件委托API
- 设置事件委托: $(parentSelector).delegate(childrenSelector,
  eventName, callback)// 回调函数中的this是子元素
- 移除事件委托: $(parentSelector).undelegate(eventName)

事件坐标

event.offsetX: 原点是当前元素左上角
event.clientX: 原点是窗口左上角
event.pageX: 原点是页面左上角

事件相关

停止事件冒泡: event.stopPropagation()
阻止事件的默认行为: event.preventDefault()

区别mouseover与mouseenter

mouseover: 在移入子元素时也会触发, 对应mouseout
mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()

动画效果
在一定的时间内, 不断改变元素样式

淡入淡出-不断改变元素的透明度来实现的

1.  fadeIn(): 带动画的显示
2.  fadeOut(): 带动画隐藏
3.  fadeToggle(): 带动画切换显示/隐藏

滑动动画

slideDown(): 带动画的展开
slideUp(): 带动画的收缩
slideToggle(): 带动画的切换展开/收缩

显示隐藏，默认没有动画

show(): (不)带动画的显示
hide(): (不)带动画的隐藏
toggle(): (不)带动画的切换显示/隐藏

jQuery动画本质-在指定时间内不断改变元素样式值来实现的

animate(): 自定义动画效果的动画
stop(): 停止动画

插件机制

扩展jQuery函数对象的方法

$.extend({
  xxx: fuction () {} // this是$
})
$.xxx()

扩展jQuery对象的方法

$.fn.extend({
  xxx: function(){}  // this是jQuery对象
})
$obj.xxx()

#其他

window-onload与-document-ready-的区别

window.onload
- 包括页面的图片加载完后才会回调(晚)
- 只能有一个监听回调
$(document).ready()
- 等同于: $(function(){})
- 页面加载完就回调(早)
- 可以有多个监听回调

了解jQuery

定义

优点

使用方法

多库共存

jQuery的2把利器

jQuery函数-jQuery

jQuery对象

选择器

定义

分类

$工具方法

属性-文本

CSS模块

style样式

位置坐标

尺寸

筛选模块

过滤

查找

文档处理-CUD-模块

增加

删除

更新

事件模块

绑定事件

解绑事件

事件委托

事件坐标

事件相关

区别mouseover与mouseenter

动画效果

淡入淡出-不断改变元素的透明度来实现的

滑动动画

显示隐藏，默认没有动画

jQuery动画本质-在指定时间内不断改变元素样式值来实现的

插件机制

扩展jQuery函数对象的方法

扩展jQuery对象的方法

window-onload与-document-ready-的区别