06月
03

jQuery

发表于 • 字数统计 2.5k
文章目录
  1. jQuery
    1. 入口函数
  2. JQ对象
    1. JQ 对象转 dom 对象
    2. dom 对象转 jq 对象
  3. 选择器
    1. 筛选器
  4. css 样式
  5. 属性
  6. 获取与设置内容
  7. 类名
  • 事件
  • 动画
  • 操作节点
  • 坐标值
    1. 宽高
  • 绑定事件
  • 解绑
  • 注
    1. 隐式迭代与链式编程
    2. 多库共存

    • jQuery

    jquery.min.js 表示压缩过的代码

    jquery.js 表示正常的代码写法

    用 $ 或者 jQuery 对象调用方法

    入口函数

    • $(function () {}) 类似 window.onload 也就是 onload = function () {} (默认挂载在 window 对象上)

      onload 只能执行一个，而 $ 可以执行多个

    • $(document).ready(function () {}) 类似addEventListener(“DOMContentLoaded”, function () {})

    JQ对象

    $(“CSS选择器”) 返回一个 jq 对象，可以使用 jq 方法，不能使用 DOM 对象的原生方法

    1
    var $box = $(".box") // jQ 对象变量名一般加上 $ 符号
    JQ 对象转 dom 对象
    • $("CSS选择器")[index] 把选中的 jq 对象转为 dom 对象，如 $(".box")[0] 获取第一个 .box 的 dom 对象
    • $("CSS选择器").get(index) 把选中的 jq 对象转为 dom 对象
    dom 对象转 jq 对象
    • $(dom) 可以直接传入 DOM 对象！ 如 $(document,getElementsByClassName(“box”)[0]) 就得到 $(“.box”):eq(0)

    选择器

    基本选择器与 document.querySelectorAll() 写法一致，都写入 CSS 选择器

    $("CSS选择器")

    筛选器

    与伪类选择类似，但它选择是所有 li 中的下标，而不是同一个父元素下的 li 的下标

    $("li:first") = $("li:eq(1)")下标等于1 、$("li:last")最后一个 li、

    $("li:gt(3)") 下标大于三

    $("li:ls(3)")下标小于三

    $("li:odd") 偶数行、$("li:even") 奇数行

    $("li:empty") 选中一个空的 li 元素

    $("li:contains(text)") 匹配包含 text 文本的 li

    $("*").eq(3) eq() 也可以写在外面，但不是:而是.了，这样就能选择别的元素了，不一定都是 li (这里前面写了 *，为了说明这一点) 如果写 $(“li”):eq(3) 其实与写在里面效果一样。

    这个属性是为了选择元素！ 和 $(“*”)[3] 一样！只不过这个选择的元素能用 JQ方法，原生的不行！

    $("li").eq(3).prevAll() 选择在li:eq(3) 之前的所有元素，元素倒序排列，也就是会写成 li2、li1、li0，而不是li0、li1、li2

    $("li").eq(3).siblings() 选择除自己之外的所有兄弟节点

    $(".box").find(ul) 找到符合条件的子元素 (不知道和$(“.box ul”) 有什么区别)

    $(".box").children("p") 选择特定的关系节点 (不知道和$(“.box p”) 有什么区别)

    css 样式

    $(".box").css("width") jQEle.css(“样式名”) ，类似 getComputedStyle(ele, null)[“样式名”]

    $(".box").css("height", "100px") 设置单个样式，名与值都加引号，之间用 , 隔开

    1
    2
    3
    4
    5
    6
    7
    // 设置多个样式时，传入一个对象
    $(".box").css({
        "line-height": "100px", // 有连接符加引号或者驼峰命名
        text-align: "100px", // 有连接符加引号或者驼峰命名
        height: "100px", // 普通样式可加引号也可不加
        "color": "red" // 普通样式可加引号也可不加
    })

    属性

    $(".box").attr("title","这是鼠标放上去显示的提示内容")

    $(".box").removeAttr("title") 删除

    jQ用 .attr() 与 get、set、removeAttribute() 类似

    如果要设置多个，同样是传入一个对象，与设置 css 类似，键名是属性名，键值是需要设置的值

    获取与设置内容

    $(".box").html() 获取与设置 html 内容 ，与 innerHTML 类似

    $(".box").text() 获取与设置 text 内容， 与innerText 类似

    $(".box").val() 获取与设置 input 的 value 值

    在括号中写入要设置的值，如 $(".box").text("123")

    类名

    与 dom.classList.add()/remove()/toggle()/contains() 类似，不过 jQ 能操作多个类名

    $(".box").addClass("b1 b2 b3") 可以添加一个或多个类，类名之间用空格隔开

    $(".box").removeClass("b1 b2")可以删除一个或多个类，类名之间用空格隔开

    $(".box").toggleClass("b3") 添加或删除 b3 类名，如果存在就删除，如果不存在就添加

    $.(".box").hasClass("b3") 判断是否有 b3 类名，返回 true 或 false

    事件

    1
    2
    3
    4
    5
    6
    // jQuery 事件不带 on 
    // jQ 事件是用 addEventListener 绑定的
    $(".box").click(function () {
        console.log(this) // 事件中的 this 指的是对应的 dom元素，不是 JQ 对象
        console.log(event) // 事件对象与原生事件对象一致
    })

    动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    $(selector).show(2000) // 动画时间 毫秒
    $(selector).show(slow/normal/fast) // 也可以这样写 表示动画进行速度慢、中、快
    $(selector).hide(2000) // 动画消失时间
    // show 和 hide 都可以接收一个函数参数作为完成动画之后的回调函数 如
    $(selector).show(2000, function () {
        console.log("动画 show 结束") 
    })
    $(selecotr).hide(speed, callback)

    // 滑入滑出
    $(selector).slideDown(speed, callback)
    $(selector).slideUp(speed, callback)
    $(selector).slideToggle(speed, callback)

    // 淡入淡出
    $(selector).fadeIn(speed, callback)
    $(selector).fadeOut(speed, callback)
    $(selector).fadeToggle(speed, callback)
    $(selector).fadeTo(speed, opacity) // 调节透明度 忽略参数或传入不合法字符串，使用默认值 400ms

    //自定义动画
    $(selector).animate(styles, speed, ease, callback)
    /* 参数一 样式
       参数二 持续时间
       参数三 运动函数
       参数四 完成时的回调函数
    */

    // 例如
    $(".box").animate({
        // 可以带单位也可以不带，带单位记得加引号
        width: 600, 
        height: "200px",
        top: 300,
        left: "200px"
    }, 1000, linear, function () {
        console.log("animate done!")
    })
    stop(stopALL, goToEnd) // 停止动画 两个参数都是布尔值。
    // 第一个参数表示是否停止这个元素上所有动画，如果为false取消当前正在进行的动画，如果为true 取消所有已入栈的动画。
    // 第二个参数表示是否跳转到动画的最后一帧

    // 原来的 jq animate() 无法改变颜色，如果需要改变颜色
    // 如果需要用 animate() 改变颜色 需引入  jquery.color.js ，

    操作节点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var pEle = document.createElement("p")
    // 原生只能插入节点，不能插入 HTML 文本，下面这条代码会报错
    $(".box")[0].appendChild("<p></p>") 
    // jQ 可以插入 HTML 文本 / 元素 / 纯文本 / JQ对象
    $(".box").append(pEle)
    $(".box").append("<h1>hahaha</h1>")
    $(".box").append($(".title")) // 如果页面中存在这个元素，相当于把这个元素移动到 .box 的子元素最后一位，如果 .box 元素不止一个，那么每个 .box 元素中都添加一次
    $(".title").appendTo($(".box")) // 把.title追加到.box中去 与上一条代码效果一致，只不过是写法与上面不一样而已
    $(".box").prepend("<span>添加第一个子元素</span>") 
    $(".box").before("<span>在自己之前添加一个兄弟元素</span>")
    $(".box").after("<span>在自己之后添加一个兄弟元素</span>")
    $(".box").remove() // 删除元素自身
    $(".box").empty() // 清空元素内容
    $(".box").html("")
    $(".box").clone()  // 克隆自己

    坐标值

    • $(selector).offset() 在 jq 中，这个是获取元素相对于文档的位置，同时可以设值$(selector).offset({left:100,top:50})

    • $(selector).position()获取元素外边距外侧开始到最近的有相对定位的父元素的距离，，不能设置

    • $(selector).scrollTop() 获取或设置元素垂直方向滚动的位置

      设值： $(selector).scrollTop(100) ， JQ通过修改 top、left 值来改变元素的上左边距，如果元素没有定位，会自动添加 position: relative ，相对定位

    • 在 JQ 中，获取页面高度 $(document).scrollTop()即可，也可以在 括号中 加入设置值 ，设置值实际使用了 原生的window.scrollTo() 方法

    宽高

    $(".box").width() 获取宽度

    $(".box").width(100px) 设置宽度

    $(".box").height() 获取高度，设置高度同理

    绑定事件

    JQ 最开始 是用 bind、triggle 绑定事件，在 jQ 1.7 之后多了 on 方式，大家都用它了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $(".box").click(function (){
        console.log(123)
    })
    $(".box").click(function (){
        console.log(456)
    })
    // 点击后将出现 123， 456 ，说明 jq 可以在同一个事件上绑定多个处理程序

    // 传参，可以在 function 参数之前传入一个对象参数，这个对象参数将会被绑定在 event.data 属性上
    // 无法取消事件，因为是匿名函数
    $(".box").click({name: "nihao"}, function () {
        console.log(e.data) // 打印出 {name: "nihao"}
    })
    // on ，能取消，能传值，能监听事件委托，能同时绑定多个不同事件
    $(".box").on("click mouseenter mouseleave", {name: "nihao"},function () {
    })

    // 事件委托，好处是能让新添加的子元素也有这个事件   这个实际上是只在 .box 绑定了一次事件
    $(".box").on("click", ".inner", function () {
        this // 指向触发事件的元素
        event.target // 指向触发事件的元素
        event.currentTarget // 指向 委托监听的元素，即 .box
        
    })

    解绑

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(".box").dbclick(function () {
        // 直接调用，解绑所有通过 JQ 绑定的事件，原生绑定的事件依然存在
        $(this).off()
    })

    // 添加参数，解绑通过 jq 绑定的一类事件
    $(".box").off("click") 

    // 解绑某一个事件处理函数，函数必须是具名函数，类似 ele.removeEventListener("click", fn)，不过一个解绑 jq 对象，一个解绑 dom 对象
    $(".box").off("click", fn)

    注

    隐式迭代与链式编程

    JQ 的方法默认对指定的 JQ 对象中的所有元素都操作一遍(隐式迭代)，同时每个方法都会返回被操作的元素本身，所以可以链式编程，如

    1
    2
    3
    4
    5
    6
    7
    $(".box").css("width", "100px")
        .css("height","200px")
    	.css("color", "red")
    	.next() // 对象此时转移成了 $(".box").next()
    	.css("color", "blue") // box 的下个兄弟元素字色改变
    	.end() // end() 让对象变回了 $(".box")
    // end() 方法结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态

    大部分情况下 jQ 是不需要 each 方法的，因为 jQuery 隐式迭代的特性，但如果需要对每个元素做不同的处理，就需要 each

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(this).index() // 获取当前元素在父元素所有节点中的
    $(selector).each(function (index,item) {
        // index 当前被选中的元素下标
        // item 当前被选中的元素
    })
    // 例   每个li的宽度是其 (下标+1)数值 的 100倍 px，如果 li 的下标大于 3， 它的高度是它的(下标+1)数值的 200倍 px
    $("li").each(function (index, item) {
       item.css("width", 100 * (index + 1) + 'px') 
        if(index > 3) {
            item.css("height", 200 * (index + 1) + 'px')
        }
    })

    多库共存

    $.noConflict() 让 jQuery 释放对 $ 的控制权，之后只能通过 jquery 对象使用 jQuery 的方法

    分享到：

    评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理