• jQuery


    1.jQuery操作dom

        1.1、jQuery操作属性(atrribute)

            操作单个属性:(如果属性已经存在,那就修改,如果属性不存在,添加)

                attr(name, value)

            操作多个属性

                attr(obj)  {name:value,name:value...}

            获取属性

                attr(name)   如果属性不存在 返回undefined

            移除属性

                removeAttr(name)  如果不传参数 没有效果

        1.2、jQuery操作值

            获取值     获取的是表单元素的value属性

                val()

            设置值

                val(value)

                给select设置值的时候,如果有和值对应的opiton,那么这个option被选中

                如果没有跟值对应的option,select选中空白

        1.2、jQuery操作内容

            获取内容

                text()    不会获取到html标签

                html()    会获取到

            设置内容

                text(content)  如果内容中有html标签,会对html标签进行转义

                html(htmlStr)  如果有html标签,会把标签转换成对应的元素

        1.3、jQuery操作尺寸

            css()

            height()  获取高度  数值类型

            width()   获取宽度  数值类型

            height(hegiht)   数值类型

            width(width) 数值类型

        1.4、jQuery操作坐标

            获取坐标

                offset()  获取的是当前元素相对于页面左上角的坐标 返回值是一个对象 {top:xx, left:xx}

                position() 获取的是当前元素相对有有定位的父元素的坐标,如果父元素没有定位,继续往上找,直到找到body

            设置坐标

                offset({left:xx,top:xxx}) 如果当前元素没有定位,默认会设置定位为 relative

        1.5、jQuery操作滚动

            scroll 事件  注册给document window都可以

            获取滚动条的滚动值

                scrollTop()  获取纵向滚动条的滚动距离

                scrollLeft() 获取的横向滚动条的滚动距离

            设置滚动条的滚动值

                scrollTop(top)

                scrollLeft(left)

    2.jQuery事件机制

        click(function)====>bind(types,function)=====>delegate(selector,types,function)=====>on(types,selector,data,function)

        on方法绑定事件的两种形式

            1.给自身绑定事件

                on(types,function)

            2.绑定事件委托

                on(types,selector,data,function)

        事件委托的原理就是事件冒泡!

        unbind  undelegate

        off() 不传参数解绑所有的事件

        off(types) 解绑指定类型的事件,自身和委托事件都会被解绑

        off(types,"**") 解绑指定类型的委托事件,自身保留

        触发事件:

            1、直接调用事件  $("div").click()

            2、trigger(type)  type要触发的事件的事件类型

            3、triggerHandler(type) type要出发的事件的事件类型,但是,他不会触发浏览器的默认行为

        事件对象:

            event.type    事件的类型

            event.data    在注册时间的时候,传一个数据

            event.screenX/event.screentY  获取的是鼠标距离屏幕左上角的距离

            event.offsetX/event.offsetY 获取的是鼠标距离当前点击的元素的左上角的距离

            event.pageX/event.pageY  获取的是鼠标页面左上角的距离加上滚动条的滚动距离

            event.clientX/event.clientY 获取是鼠标相对于页面左上角的距离

            event.target  鼠标点击的是谁,就是谁

            event.currentTarget 相当于this,当前对象

            event.delegateTarget  代理对象 谁代理的事件,就是谁

            event.keyCode  获取按键的按键代码

            event.stopPropagation()  阻止事件冒泡

            event.preventDefault()  阻止浏览器默认行为

            return false;

    3、jQuery补充

            1.链式编程

                实现原理:set方法中返回了当前对象

            注意:只有set方法可以继续链式编程,get方法不可以

                因为get方法会返回相应的要获取的值,不能返回当前对象了

                end(),恢复当前语句的主体对象到租出状态

            tips:

                筛选选择器基本上都会把句子的主体对象给更改 prevAll nextAll  siblings  children  parent

            2.隐式迭代

                只有设置方法才有隐式迭代,一次性操作多个元素

                获取方法没有隐式迭代,获取的时候只能获取第一个元素的值

            3.each

                each(function(index, element){})

    jQuery操作属性(重点)

    1.设置单个属性

    //第一个参数:需要设置的属性名
    //第二个参数:对应的属性值
    attr(name, value);
    //用法举例
    $("img").attr("title","哎哟,不错哦");
    $("img").attr("alt","哎哟,不错哦");
    

    2.设置多个属性

    //参数是一个对象,包含了需要设置的属性名和属性值
    attr(obj)
    //用法举例
    $("img").attr({
        title:"哎哟,不错哦",
        alt:"哎哟,不错哦",
        style:"opacity:.5"
    });
    

    3.获取属性

    //传需要获取的属性名称,返回对应的属性值
    attr(name)
    //用法举例
    var oTitle = $("img").attr("title");
    alert(oTitle);
    

    注意:

    • 获取属性时,只会获取到第一个元素对应的属性,与css方法一样
    • 获取属性时,如果该属性不存在,那么会返回undefined
  • 相关阅读:
    merge sorted array
    Remove Duplicates from Sorted List
    climbing stairs(爬楼梯)(动态规划)
    点击事件加不上,换个位置调用
    The file couldn’t be opened because you don’t have permission to view it
    网络——性能调优
    SDWebImage缓存图片的机制(转)
    本地推送 简单代码演示
    UILable点击事件
    点击背景键盘退下
  • 原文地址:https://www.cnblogs.com/sw1990/p/5801127.html
Copyright © 2020-2023  润新知