JQuery基础

基本了解

• 定义：一个JS函数库，封装简化DOM操作(CRUD) | Ajax

优势：

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

使用：

• 引入jQuery库
• 本地引入与CDN远程引入
• 测试版与生产版(压缩版)
• 使用jQuery
• 使用jQuery函数: $ / jQuery
• 使用jQuery对象:

  $xxx(执行$()得到的)

JQuery的2把利器

JQuery函数: $ / jQuery

• jQuery向外暴露的就是jQuery函数, 可以直接使用
• 当函数使用: 『$(param)』
  • param是『function』: 相当于window.onload = function(DOM加载完成后，执行此回调函数)
  • param是『选择器字符串』: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
  • param是『DOM对象』: 将DOM元素对象包装为jQuery对象返回
  • param是『html标签字符串』: 创建标签DOM元素对象并封装为jQuery对象返回
• 当对象使用: 『$.xxx()』

jQuery对象: $()

• 包含所有匹配的n个DOM元素的伪数组对象,执行$()返回的就是jQuery对象
• 如：$(‘p’),找到所有p标签的元素以数组的形式返回

选择器

• 选择器

  有特定语法规则(css选择器)的字符串

• 用法：查找某个/些DOM元素: $(selector)

基本选择器

• #id：id选择器
• tagName：元素选择器
• .class：属性选择器
• *：任意标签
• s1,s2,s3：多个选择器的并集(组合选择器)
• s1s2s3：多个选择器的交集(相交选择器)

层次选择器

• 查找子元素, 后代元素, 兄弟元素的选择器
• parent > child：在给定的父元素下匹配所有的子元素
• ancestor descendant：在给定的祖先元素下匹配所有的后代元素
• prev + next：匹配所有紧接在 prev 元素后的 next 元素
• prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素

选择器的过滤修饰符

• :first：选择第一个元素
• :last：选择最后一个元素
• :eq(index)：选择第index个元素，index从0开始
• :lt(index)：选择前index个元素
• :gt(index)：选择前index个之后的所有元素
• :odd：选择所有奇数的元素
• :even：选择所有偶数的元素
• :not(selector)：选择所有不为selector的元素
• :hidden：选择隐藏的属性
• :visible：所有可见的元素
• [attrName]：选择有attrName属性的元素
• [attrName=value]：选择所有attrName=value的元素
• :contains(content)：选择内容为content的元素
• :header：所有标题元素 h1 - h6
• :animated：所有动画元素

表单选择器的修饰符

• :input：所有input元素
• :text：所有 type=”text” 的 input 元素
• :checkbox：所有 type=”checkbox” 的 input 元素
  • eg：点击’全选’按钮实现全选/全不选(按钮的点击事件里面应用)

    $(':checkbox').prop('checked', true)
    $(':checkbox').prop('checked', false)

• :submit、:reset、:button、:image、:file、:password、:radio：所有 type=”xxx” 的 input 元素
• :checked：所有被选中的 input 元素
• :enabled：所有激活的 input 元素
• :disabled：所有禁用的 input 元素
• :selected：所有禁用的 input 元素

文档操作

• 文档操作
• 操作标签的属性, 标签体文本

修改

• attr(name) | attr(name, value): 设置或返回匹配元素的属性和值
  • eg：读取第一个div的title属性

    $('div:first').attr('title')

  • eg：给所有的div设置name属性值为222

    $('div').attr('name','222')

• val() | val(value): 读写标签的value
  • eg: 得到输入框中的value值

    $(':text').val()

  • eg: 将输入框的值设置为aaaaaa

    $(':text').val('aaaaaa')

• html() | html(htmlString): 读写标签体文本
  • eg: 得到最后一个li的标签体文本

    $('li:last').html()

  • eg: 设置第一个li的标签体为<h1>mmmmmmmmm</h1>

    $('li:first').html('<h1>mmmmmmmmm</h1>')

• text(): 设置或返回匹配元素的内容
• insertAfter(): 把匹配的元素插入到另一个指定的元素集合的后面。

增加

• append() | appendTo(): 元素插入末尾
• prepend() | prependTo(): 元素插入开头
• before(): 在每个匹配的元素之前插入内容
• after(): 在匹配的元素之后插入内容
• addClass(classValue): 添加class
• insertBefore(): 把匹配的元素插入到另一个指定的元素集合的前面。

删除

• remove(): 删除所有匹配元素的子元素
• empty(): 除自己外删除所有匹配元素的子元素
• removeAttr(name): 删除属性
  • eg: 移除所有div的title属性

    $('div').removeAttr('title')

• removeClass(classValue): 移除指定class
• toggleClass(): 从匹配的元素中添加或删除一个类

更新

• replaceWith() | replaceAll(): 用新内容替换匹配的元素

事件

• 事件

绑定事件

• eventName(function(){})：绑定对应事件名的监听

  $('#div').click(function(){});

• on(‘eventName’, function(){})：通用的绑定事件监听

  $('#div').on('click', function(){}) 

• 优缺点：
  • eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
  • on: 编码不方便, 可以添加多个监听, 且更通用

解绑事件

off('eventName')

事件委托

• 理解: 将子元素的事件委托给父辈元素处理
  • 事件监听绑定在父元素上, 但事件发生在子元素上
  • 事件会冒泡到父元素
  • 但最终调用的事件回调函数的是子元素: event.target
• 好处
  • 『新增的元素没有事件监听』
  • 减少监听的数量(n==>1)
• 事件
  • 给对应选择器添加事件委托

    $(parentSelector).delegate(childselector, eventName, callback)

  • 给该元素移除事件委托

    $(parentSelector).undelegate(eventName)

事件坐标

• event.offsetX, event.offsetY: 相对于事件元素左上角
• event.clientX, event.clientY: 相对于视口的左上角
• event.pageX, event.pageY: 相对于页面的左上角

键盘事件

• keydown()：键盘按下时触发
• keyup()：键盘松开时触发

鼠标事件

• mousedown()： 鼠标点击按下触发
• mouseenter()：鼠标移动到当前元素时触发
• mouseleave()：鼠标离开该元素触发
• mousemove()：鼠标在该元素内移动触发
• mouseout()：鼠标移动到该元素或其子元素之外时触发
• mouseover()：鼠标移入该元素的子元素也会触发
• mouseup()：鼠标松开点击按钮的时候触发
• hover(function(){}, function(){})：参数一相当于mouseenter(),参数二相当于mouseleave()

点击/触发

• load()：进入页面时触发
• unload()：卸载/离开页面时触发
• change()：事件改变就触发
• click()：单机事件
• dblclick()：双击事件
• toggle()：绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

滚动

• scroll()：滚动事件
• scrollTop() | scrollLeft(): 读/写元素/页面的滚动条位置
• 读取页面滚动条的Y坐标(兼容chrome和IE):

  $(document.body).scrollTop()+$(document.documentElement).scrollTop()

• 页面滚动条滚动到指定位置(兼容chrome和IE)

  $('body,html').scrollTop(60)

表单

• blur()：失去焦点的时候触发
• select()：选中时触发
• submit()：点击提交时触发
• focus()：聚焦触发
• 阻止事件的默认行为: event.preventDefault()
• trigger()：所有匹配元素的指定事件
• triggerHandler()：第一个被匹配元素的指定事件

样式

style样式

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

位置坐标

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

尺寸

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

遍历

基本遍历

• map(): 会返回一个新数组
• each()

过滤

在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回

• first()：选中第一个元素
• last()：选中最后一个元素
• eq(index): 选中第index个元素
• filter(selector): 对当前元素提要求
  • eg: ul下li标签中title属性为hello的

    const $lis= $('ul > li')
    $lis.filter('[title=hello]')

• not(selector): 对当前元素提要求, 并取反
  • eg: ul下li标签中title属性不为hello的

    $lis.not('[title=hello]') 

• has(selector): 对子孙元素提要求
  • eg: ul下li标签中有span子标签

    $lis.has('span') 

查找

查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回

• parent(): 父元素
• children(selector): 子元素中找
• find(selector): 后代元素中找
• prevAll(selector): 前面所有的兄弟标签
  • 可以跟children()一起用，用链式连接
• nextAll(): 后面所有的兄弟标签
  • 可以跟children()一起用，用链式连接
• siblings(selector): 所有兄弟
  • 可以跟children()一起用，用链式连接

效果

• 在一定的时间内, 不断改变元素样式
• slideDown()/slideUp()/slideToggle()： 滑动，按顺序使用
• fadeOut()/fadeIn()/fadeToggle()：淡入淡出，按顺序使用
• show()/hide()/toggle()：显隐
• animate({结束时的样式}, time)：自定义动画
• stop()：停止动画

工具函数:

• length/size(): 得到dom元素的个数
• [index]/get(index): 得到指定下标对应的dom元素
• index(): 得到当前dom元素在所有兄弟中的下标
  • eg：

    $('当前的选择器')index() 

• type(obj)：得到数据的类型
• isArray(obj): 判断是否是数组
• isFunction(obj): 判断是否是函数
• parseJSON(json): 解析json字符串转换为js对象/数组
  • json对象: {key1:value1 , key2:value2}
  • json数组: [value1, value2]
• hasClass(): 检查匹配的元素是否拥有指定的类

插件机制

• 扩展jQuery函数对象的方法
  • 定义：

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

  • 使用：$.xxx()
• 扩展jQuery对象的方法
  • 定义：

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

  • 使用：$obj.xxx()
• 多库共存
  • jQuery.noConflict()：jQuery库释放$的使用权, 让另一个库正常使用, 此时jQuery库只能使用jQuery了

window.onload与 $(document).ready()

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