jquery 事件对象笔记

jQuery元素操作

设置或获取元素固有属性

　　  获取

      　　   　　   prop(属性名)

　　   修改

           　　 　　prop(属性名,值)

获取自定义属性

            　　　　attr(属性名)

　　    修改自定义属性

            　　　　attr(属性名,值)

<a href="#" index='2'>2</a>

        $(function () {
            $('a').prop('href', 'www.baidu.com')
            console.log($('a').prop('href'));
            console.log($('a').attr('index'));
        })

jQuery 循环方法

    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>

$(function () {
            var sum = 0
            var arr = ['red', 'blue', 'green']
            $(".item").each(function (i, domEle) {
                // 回调函数第一个参数一定是索引号  索引号可以指定
                console.log(i);
                // 回调函数的第二个参数一定是DOM元素对象
                // dom对象没有css方法
                $(domEle).css('color', arr[i])
                console.log(domEle);
                sum += parseInt($(domEle).text())
                console.log(sum);
            })
            // 循环方法2
            // 可以遍历数据,对象
            $.each($(".item"), function (i, ele) {
                console.log(i);

            })
        })

 

　　 创建元素

    　　语法$("")

    <ul>
        <li></li>
    </ul>
    <div>我是第一个</div>

        $(function () {
            // 创建元素
            var li = $("<li>OK</li>")
            // 内部添加
            $("ul").append(li) //内部添加并且放到内容最后面
            $("ul").prepend(li) //内部添加并且放到内容最前面
            // 外部添加
            var div = $("<div>我是后添加的</div>")
            $("div").after(div) //放到目标元素后面
            $("div").before(div) //放到目标元素前面

            //删除元素
            // $("ul").remove() //删除匹配元素的本身
            // $("ul").empty() //删除匹配元素的子节点
            $("ul").html("") //删除匹配元素的子节点
        })

jQuery事件注册

　　事件处理on()方法

    　　on()方法在匹配元素上绑定一个或者多个事件的事件处理函数

    <div class="box"></div>

        $(function () {
            // 方法1
            $(".box").on({
                mouseenter: function () {
                    $(this).css("background", 'red')
                },
                click: function () {
                    $(this).css("background", "green")
                }
            })
            // 方法2
            $(".box").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current")
            })
        })

on()方法优势2

    　　可以事件委派操作:事件委派就是把原来给子元素身上的事件绑定给父元素身上,就是把事件委派给父元素

    <ul>
        <li>1</li>
        <li>2</li>
    </ul>

        $(function () {
            $("ul").on("click", "li", function () {
                alert("ok")
            })
        })

on()方法优势3

      　可以给动态创建的元素绑定事件

    <ol>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>

        $("ol").on("click", "li", function () {
            alert("ok")
        })
        var li = $("<li>我是后来添加的</li>")
        $("ol").append(li)

事件解绑

   　　 off() 可以移除通过on()添加的事件处理程序

        $("ol").off() //这个是解除了ol身上所有的事件
        $(".box").off("mouseenter") //这个是解除了box身上的鼠标经过事件
        $(".box").off("ul", "li") //解除事件委托

　 jQuery自动触发事件

        $(function () {
            $(".box").on("click", function () {
                alert("ok")
            })
            // 自动触发
            // 1、元素.事件
            $(".box").click();
            // 2、元素.trigger("事件")
            $(".box").trigger("click")
            // 3、$(".box").triggerHabdler("事件") 就是不会触发元素的默认行为
            $(".box").triggerHabdler("click")
        })