jQuery

了解jQuery

• 是什么: What?
  • 一个JS函数库: write less, do more
  • 封装简化DOM操作(CRUD) / Ajax
• 为什么用它: why?
  • 强大选择器: 方便快速查找DOM元素
  • 隐式遍历(迭代): 一次操作多个元素
  • 读写合一: 读数据/写数据用的是一个函数
  • 链式调用: 可以通过.不断调用jQuery对象的方法
  • 事件处理
  • DOM操作(CUD)
  • 样式操作
  • 动画
  • 浏览器兼容
• 如何使用: How?
  • 引入jQuery库
    • 本地引入与CDN远程引入
    • 测试版与生产版(压缩版)
  • 使用jQuery
    • 使用jQuery函数: $/jQuery
    • 使用jQuery对象: (xxx(执行)()得到的)

jQuery的2把利器

jQuery函数: $()/jQuery()

• jQuery向外暴露的就是jQuery函数, 可以直接使用
• 当成一般函数使用: $(param)
  • param是function
    相当于 window.onload = function (文档加载完成的监听)
  • param是选择器字符串
    查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
  • param是DOM元素:
    将DOM元素对象包装为jQuery对象返回 $(this)
  • param是标签字符串
    创建标签DOM元素对象并包装为jQuery对象返回
• 当成对象使用: $.xxx
  • each(obj/arr, function(key, value){})
  • trim(str)

// jQuery 本质
(function (window) {
    ......
    var jQuery = function () {
        return new xxx()
    }
	......
    window.$ = window.jQuery = jQuery
})(window)

jQuery对象

• 包含所有匹配的n个DOM元素的伪数组对象
• 执行$()返回的就是jQuery对象
• 基本行为:
  • length/size()
    得到dom元素的个数
  • [index]
    得到指定下标对应的dom元素
  • each(function(index, domEle){})
    遍历所有dom元素
    回调函数里面的this 是指向每一个元素
  • index()
    得到当前dom元素在所有兄弟中的下标

伪数组

1. Object对象
2. length属性
3. 数值下标属性
4. 没有数组特别的方法: forEach(), push(), pop(), splice()

选择器

是什么?

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

分类

1. 基本

   • id

   • tagName/*
   • .class
   • selector1,selector2,selector3: 并集
   • selector1selector2selector3: 交集
2. 层次
   • 找子孙后代, 兄弟元素
   • selector1>selector2: 子元素
   • selector1 selector2: 后代元素
3. 过滤
   • 在原有匹配元素中筛选出其中一些
   • :first
   • :last
   • :eq(index)
   • :lt(index) 小于下标，最好先用这个再用 gt
   • :gt(index) 大于小标
   • :odd 奇数，下标奇数
   • :even 偶数，下标偶数
   • :not(selector)
   • :hidden
   • :visible
   • [attrName]
   • [attrName=value]
   • [attrName!=value]
   • [attrName^=value]
   • [attrName$=value]
   • [attrName*=value]
4. 表单
   • :input
   • :text
   • :checkbox
   • :radio
   • :checked: 选中的

属性/文本

• 操作标签的属性, 标签体文本
• .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): 读写标签体文本
• .text() / text(textString): 读写元素内的文本

CSS模块

1. style样式

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

2. 位置坐标

• offset(): 读/写当前元素坐标(原点是页面左上角)
• position(): 读当前元素坐标(原点是父元素左上角)
• scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标

3. 尺寸

• width()/height(): width/height
• innerWidth()/innerHeight(): width + padding
• outerWidth()/outerHeight(): width + padding + border

筛选模块

1. 过滤

• 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
• first()
• last()
• eq(index)
• filter(selector): 对当前元素提要求
• not(selector): 对当前元素提要求, 并取反
• has(selector): 对子孙元素提要求

2. 查找

• 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
• children(selector): 子元素
• find(selector): 后代元素
• preAll(selector): 前的所有兄弟
• siblings(selector): 所有兄弟
• parent(): 父元素

文档处理(CUD)模块

1. 增加

• append() / appendTo(): 插入后部（元素内部）
• preppend() / preppendTo(): 插入前部（元素内部）
• before(): 插到前面（元素外部）
• after(): 插到后面（元素外部）

2. 删除

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

3. 更新

• replaceWith()

事件模块

• 绑定事件
  • eventName(function(){})
  • on('eventName', function(){})
  • 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
  • hover(function(){}, function(){})
• 解绑事件
  • off('eventName')
• 事件委托
  • 理解: 将子元素的事件委托给父辈元素处理
    • 事件监听绑定在父元素上, 但事件发生在子元素上
    • 事件会冒泡到父元素
    • 但最终调用的事件回调函数的是子元素: event.target
  • 好处
    • 新增的元素没有事件监听
    • 减少监听的数量(n==>1)
  • 编码
    • delegate(selector, 'eventName', function(event){}) // 回调函数中的this是子元素
    • undelegate('eventName')
• 事件坐标
  • event.offsetX: 原点是当前元素左上角
  • event.clientX: 原点是窗口左上角
  • event.pageX: 原点是页面左上角
• 事件相关
  • 停止事件冒泡: event.stopPropagation()
  • 阻止事件的默认行为: event.preventDefault()

动画效果

1.在一定的时间内, 不断改变元素样式

• slideDown()/slideUp()/slideToggle()
• fadeOut()/fadeIn()/fadeToggle()
• show()/hide()/toggle()
• animate({结束时的样式}, time, fun)
• stop()

2.插件机制

• 扩展jQuery函数对象的方法
  (.extend({ xxx: fuction () {} // this是)
  })
  $.xxx()
• 扩展jQuery对象的方法
  (.fn.extend({ xxx: function(){} // this是jQuery对象 }) )obj.xxx()

3.jQuery文档的结构图