jQuery

概念:封装了很多 原生js 操作 的库
优点:

  1. 强大的选择器机制
  2. 优质的隐式迭代 - 隐藏的遍历
  3. 无所不能的链式编程

特有的筛选器:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
  1. 获取第一个元素
    $('ul li:first')
  2. 获取最后一个元素
    $('ul li:last')
  3. 获取 偶数下标 的元素
    $('ul li:even')
  4. 获取 奇数下标 的元素
    $('ul li:odd ')
  5. 获取 指定下标 的元素
    $('ul li:eq(1)')
  6. 获取 大于 指定下标 的元素
    $('ul li:gt(1)')
  7. 获取 小于 指定下标 的元素
    $('ul li:gt(1)')

表单专用的筛选器

  1. 获取所有 表单元素
    $(':input')
    [表单元素包括:input、button、textarea、select]
  2. 获取所有 文本框
    $(':text')
  3. 获取所有 密码框
    $(':password')
  4. 获取所有 单选框
    $(':radio')
  5. 获取所有 复选框
    $(':checkbox')
  6. 获取所有 提交按钮
    $(':submit')
  7. 获取所有 图片框
    $(':imgage')
  8. 获取所有 文件按钮
    $(':flie')
  9. 获取所有 普通按钮
    $(':button')
    [包括:type为button的input 和普通botton]
  10. 获取所有 不在页面中的 标签
    $(':hidden')
    [一般包括如:head meta title script option]
  11. 获取所有 被禁用的表单元素
    $(':disabled')
  12. 获取所有 可用的表单元素
    $(':enabled')
  13. 获取所有 被'选中的'表单元素
    $(':checked ')
  14. 获取 被选中的option
    $(':selected')
    [注意返回的是伪数组 按需求联合 [0].innerText 使用]

筛选器方法

  1. 获取所有 子标签
    jq伪数组.children()
  2. 获取 第一个子标签
    jq伪数组.first()
  3. 获取 最后一个子标签
    jq伪数组.last()
  4. 获取所有 兄弟标签
    jq伪数组.siblings()
    [不包括自身 无视上下关系一并获取]
  5. 获取 上一个兄弟标签
    jq伪数组.prev()
  6. 获取 前面所有兄弟标签
    jq伪数组.prevAll()
  7. 获取 下一个兄弟标签
    jq伪数组.next()
  8. 获取 后面所有兄弟标签
    jq伪数组.nextAll()
  9. 获取 父标签
    jq伪数组.parent()
  10. 获取所有 祖宗标签
    jq伪数组.parents()
    [直至html]
  11. 获取 指定下标的标签
    jq伪数组.eq(index)
  12. 获取 父标签中 选择器指定的后代
    jq伪数组.find(选择器)

jquery元素与dom元素

jquery元素 不能使用 dom元素的方法 反之同理

  1. dom元素转jquery元素
    $(dom元素)
  2. jqurey元素 '转' dom元素
    jq伪数组[0]
    [因为jq元素都是伪数组 所以通过下标可以直接提取为dom元素]

事件绑定

  1. 普通绑定
    在jquery中 事件类型都被封装成了方法 事件函数要作为方法的回调函数使用
    jq元素.事件类型(function(){})
    [事件函数中 this 仍指向当前 事件源(dom元素)]
    [jquery没有封装inputload事件]
  2. on绑定 [多用于事件委托]
    jq元素.on(参1,参2,参3,参4)
        [参1 必选项 事件类型]
        [参2 可选项 事件委托 的对象(选择器)]
            [相对原事件委托 可更精准的 限定 'target']
        [参3 可选项 传递的数据]
            [传入的数据 会添加在事件对象.data中]
        [参4 必选项 事件函数]

阻止默认行为 阻止事件冒泡
return false
    [在jq中 return false既可以阻止默认行为 也可以阻止事件冒泡]
    [在jq中 cancelBubble不能阻止事件冒泡]
    [在jq中 stopPropagation能照常阻止事件冒泡]


事件解绑

jq元素.off('参1',参2)
    [参1 - 必选项 事件类型]
    [参2 - 可选项 事件函数]
        [会同时解除 所有 同 事件类型 的事件]
        [若参二填写的是事件函数名 则只会解除该事件 不会解除所有]


事件触发

  1. 自动触发事件
    jq元素.trigger('事件类型')
  2. 只能触发一次事件
    jq元素.one('事件类型',事件函数)
    [不能触发指定单一事件函数 会触发所有同事件类型的事件]

其他事件

  1. 替代window.onload的快速写法:
    $(function(){})
  2. 当dom元素加载完成后执行的事件:
    $(document).ready(function(){})
    [相对window.onload加载全部资源后执行 效率更高]

其他方法

  1. 在jq中获取滚动距离
    $('document').scrollTop()
  2. 移入移出事件的合并
    $('选择器').hover(移入事件函数,移出事件函数)
  3. 遍历js元素(伪数组)
    js元素.each(function(i,v){})
    [参数 i - 当前遍历元素的下标]
    [参数 v - 当前遍历dom元素]
  4. 获取当前标签在父标签中的下标
    js元素.index()

属性操作

  1. 设置属性
    jq元素.attr('属性名','属性值')
    [对同一元素多次设置时 是添加 而不会覆盖]
  2. 获取属性值
    jq元素.attr('属性名')
  3. 删除属性
    jq元素.removeAttr('属性名')
  4. 针对属性值为 布尔值 的属性操作
    jq元素.prop('属性名',布尔值)
        [如 checked disabled]
  5. 获取布尔属性值
    jq元素.prop('属性名')

(行内)样式操作

  1. 设置单一样式
    jq元素.css('属性','属性值')
  2. 设置多个样式
    jq元素.css({键:'值',键:'值'...})
        [批量设置样式时 键的引号可加可不加]
  3. 获取样式
    jq元素.css('属性')
    [调用css方法时 会返回调用对象 如$(this).css() 返回 $(this)]

类名操作

  1. 添加类名
    js元素.addClass('类名')
  2. 删除类名
    js元素.removeClass('类名')
  3. 替换类名
    js元素.toggleClass('类名')
        [类开关 存在则 删除 不存在则 添加]
  4. 判断类名
    js元素.hasClass('类名')
        [返回 布尔值]

内容操作

  1. 类innerText
    jq元素.text()
  2. 类innerHtml
    jq元素.html()

节点操作

  1. 创建标签
    $('完整的标签字符串')
        [如 $(<div class='box'>盒子</div>)]
  2. 插入标签
      2.1 在 父标签 末尾 添加
          父-jq元素.apend(子-jq元素)
      2.2 在 父标签 末尾 添加
          子-jq元素.apendTo(父-jq元素)
      2.3 在 父标签 开头 添加
          父-jq元素.prepend(子-jq元素)
      2.4 在 父标签 开头 添加
          子-jq元素.prependTo(父-jq元素)
      2.5 添加 下一个 兄弟标签
          参考-jq元素.after(新-jq元素)
      2.6 添加 下一个 兄弟标签
          新-jq元素.insertAfter(参考-jq元素)
      2.7 添加 上一个 兄弟标签
          参考-jq元素.before(新-jq元素)
      2.8 添加 上一个 兄弟标签
          新-jq元素.insertBefore(参考-jq元素)
  3. 替换标签
    新-jq元素.replaceAll(旧-jq元素)
    旧-jq元素.replaceWith(新-jq元素)
  4. 删除标签
    jq元素.empty()
        [保留当前标签 清空内容]
    jq元素.remove()
        [包括自己删除]
  5. 复制标签
    jq元素.clone(参1,参2)
        [默认复制 标签内部内容]
        [参1 可选项 布尔值 是否复制大盒子事件 默认值:false]
        [参2 可选项 布尔值 是否复制内容的事件 默认值跟随参1]
            [若参1为false 则无视参2 只能false]

元素大小

  1. 获取大小
    1.1 获取 不包含padding 的大小
        jq元素.width()
        jq元素.height()
    1.2 获取 包含padding 不包含border 的大小
        jq元素.innerWidth()
        jq元素.innerHeight()
    1.3 获取 包含border 不包含margin 的大小
        jq元素.outerWidth()
        jq元素.outerHeight()
    1.4 获取 包含margin 的大小
        jq元素.outerWidth(true)
        jq元素.outerHeight(true)
  2. 设置大小
    jq元素.width(num)
    jq元素.height(num)
        [不包含padding]
        [在使用box-sizing:border-box时 行内样式中的widthheight会自动加上border``padding的数值]

元素位置

  1. 获取位置
    1.1 获取相对于 浏览器 的 绝对位置
        jq元素.offset()
            [返回一个对象]
    1.2 获取相对于 最近的 设置过定位的 祖宗标签的 相对位置
        jq元素.position()
  2. 设置位置
    jq元素-offset({left:num,top:num})
        [不需要px单位]

基本动画

  1. display+height+left+opacity式显示、隐藏
    1.1 显示
        jq元素.show(参1,参2,参3)
    1.2 隐藏
        jq元素.hide(参1,参2,参3)
    1.3 切换
        jq-元素.toggle(参1,参2参3)
    [参1 可选项 动画执行时长(ms)]
        [num/关键字]
            [slow(600) normal(400)默认值 fast(200)]
    [参2 可选项 运动方式]
        [linear 匀速 默认值 swing 慢快慢]
    [参3 可选项 运动结束后执行的回调函数]
  2. 卷帘式显示、隐藏
    2.1 显示
        jq元素.slideDown()
    2.2 隐藏
        jq元素.slideUp()
    2.3 切换
        jq元素.slideToggle()
    [参数123同上]
  3. 透明度显示隐藏
    3.1 显示
        jq元素.fadeIn()
    3.2 隐藏
        jq元素.fadeOut()
    3.3 切换
        jq元素.fadeToggle()
    [参数123同上]
    3.4 运动到指定透明度
        jq元素.fadeTo(毫秒数,目标透明度,速度方式,回调函数)
  4. 自定义动画
    jq元素.animate({键值对},毫秒数,速度方式,回调函数)
        [优点:可以通过回调函数 进行连续动画]
        [或直接使用链式编程 实现连续动画]
  5. 停止动画
    jq元素.stop(参1,,参2)
    [参1 可选项 布尔值 默认值为 false当前动画 停止 而不是所有(后续)动画]
        [true 停止所有动画 包括未执行的后续动画]
    [参2 可选项 布尔值 是否停留在当前动画的 结束位置 默认值为false]
        
    同 结束所有动画 并停留在最终位置:
    jq元素.finish()

Ajax

  1. 发送get请求
    $.get(参1,参2,参3,参4)
        [参1 必选项 地址]
        [参2 可选项 携带的参数]
            [格式 可以是 键值对&键值对 也可以是 对象>键值对]
        [参3 可选项 请求成功后的回调函数]
        [参4 可选项 请求回来的数据格式]
            [常用格式:text | json | xml ]
  2. 发送post请求
    $post(参1,参2,参3,参4)
        [语法同get]
  3. 发送Ajax请求
$.ajax({
    url: 地址,
    method: 请求方法, - 默认get
    async: 是否异步,
    success: 成功的回调,
    error: 失败的回调,
    dataType: 数据格式, - 省略了会默认会自动调整
    data: 携带的参数
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是jQuery? jQuery是一个快速的、轻量的、功能丰富的js库。 jQuery的官网 http://jq...
    小五同学H阅读 268评论 0 0
  • 一:认识jquery jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Aj...
    xuguibin阅读 1,725评论 1 7
  • [if !supportLists]第一章 [endif]介绍 [if !supportLists]一、[endi...
    海绵宝宝_b8a2阅读 315评论 0 0
  • jQuery理解 jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。jQuer...
    艾曼大山阅读 1,547评论 2 27
  • 1. jQuery 介绍 2. jQuery 的基本使用 3. jQuery 选择器 4. jQuery 样式操...
    Scincyc阅读 475评论 0 1