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: 携带的参数
})
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容

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