jQuery操作Dom、jQuery事件机制、jQuery补充部分

时间：2022-02-15 09:38:50

jQuery操作Dom：

修改属性：

//使用attr()方法
//attr(name, value)

//name:要修改的属性的属性名

//value:对应的值
//attr方法，如果当前标签有要修改的属性，就会进行修改，如果没有，直接添加
例：$("a").attr("href","http://www.baidu.com");

修改多个属性值：

//attr(obj)

$(“img”).attr({

“title”: ”文件名称”，

“src”:”路径”，

“alt:”图片”

})

//获取属性

//attr(name);

在获取不存在的属性的时候此种方法会返回undefined

移除属性：

//removeAttr(name)

//name:要删除的属性名

//attr方法不能用来操作单属性 （checked  selected  disable）

//操作checked  selected disabled  这三个属性需要用到 prop

例：

<script>

  $(function(){

      $("#btn1").click(function(){

         $("#check").prop("checked", true);

      });

      $("#btn2").click(function(){

          $("#check").prop("checked",false);

      });

  })  ;

</script>

<body>

<input type="button" value="选中" id="btn1"/>

<input type="button" value="不选中" id="btn2"/>
<input type="checkbox" name="" id="check"/>

</body>

jQuery操作值：

//获取表单元素的value值

                //val()

 //          console.log($("#txt").val());
//设置表单元素的value值

                //val(value)

                //value：要设置的value值

//                $("#txt").val("太阳天空照");

当用val()获得select的value值时，获得的是一个数组。（必须要选中，不然返回null）

 $(function(){

        var $select=$("#select>option").val();

        console.log($select);

    })

    </script>

</head>

<body>

<input type="text" id="txt" value="请输入内容"/>

<select name="" id="select">

    <option value="1">134</option>

    <option value="2">124</option>

    <option value="3">114</option>

html()方法与text()方法:

 $(function(){

        $("div").text("<span>这是一段内容</span>");//不会转译

//获取内容

      //  $("div").text()

//        $("div").html("<p>文字</p>");会进行转译

    });

获取尺寸：

height()  width()

$(function(){

    $("#btn").click(function(){

        var width=$("div").width();

        var height=$("div").height();

        console.log(width,height);

    });

});

jQuery操作坐标值：

offset()方法

$(function () {

    $("#btnGetOffset").click(function () {

        //offset()方法可以用来获取 当前元素距离页面坐上角的坐标

        //{top: 20, left: 20}

        var offset = $("div").offset();

        console.log(offset.top, offset.left);

    });

    $("#btnSetOffset").click(function () {

        //offset(obj)

        //设置当前元素距离页面左上角的坐标

        //obj: {top:value, left:value}

        $("div").offset({

            top: 40,

            left: 40

        });

    });

    $("#btnGetPosition").click(function () {

        //postion方法用来获取当前元素相对于有定位的父元素的位置，如果父元素没有设置定位，会继续往上找，直到找到body

//position方法只能够获取位置不能够修改位置

        var pos =  $("#inner").position();

        console.log(pos);

    });

})

scrollTop方法

设置或者获取垂直滚动条的位置

//获取滚动条的滚动距离  left scrollLeft()

//                      top   scrollTop()

$(function(){

    $(document).scroll(function(){

        var scrollLeft=$(this).scrollLeft();

        var scrollTop=$(this).scrollTop();

        console.log(scrollLeft,scrollTop);

    });

});

bind绑定 和delegate事件

$(function(){

   //bind绑定事件

    //bind(types,eventHandler)

    //types事件类型，是字符串，如果有多个用空格隔开

    //eventHandler:事件处理函数

    $(function(){

        $("div").bind("mouseenter click",function(){

            alert("哈哈");

        });

        $("#btn").click(function(){

            $("div").append("<p>233</p>")

        });

        //delegate 事件委托

        //同时绑定多个时间，也可动态给元素添加事件

        $("div").delegate("p","mouseenter",function(){

            alert("事件委托");

        });

    })

});

on()绑定事件

//on方法绑定事件

       //on(types,selector,eventHandler)

       //types 事件类型多个事件用空格隔开

       //selector要给谁绑定就选择相应的选择器

       $(function(){

           $("div").append($("p"));

           $("div").on("mouseenter click","p",function(){//委托给div实现

               alert("哈哈");

           });

//       $("p").on("mouseenter",function(){

//                alert("自身绑定");

//            })

       });

//on方法绑定事件

       //on(types,selector,eventHandler)

       //types 事件类型多个事件用空格隔开

       //selector要给谁绑定就选择相应的选择器

       $(function(){

           $("div").append($("p"));

           $("div").on("mouseenter click","p",function(){//委托给div实现

               alert("哈哈");

           });

//       $("p").on("mouseenter",function(){

//                alert("自身绑定");

//            })

       });

off()解绑

//off(types)

            //括号内是要解绑的事件类型

            //1.括号不传参数会解绑所有事件

           //$("p").off();

            //2.不论是委托事件还是自身绑定事件都会解绑

//            $("p").off("click");

            //3.解绑所有代理的click事件，元素本身的事件不会被解绑

            //$(selector).off( “click”, “**” );

triggle触发事件：

 $(function(){

            //1.直接调用事件

            $("#btn").click(function(){

//                $("#txt").focus();

            //2.trigger(type)

            //括号内是指定要触发的事件类型

//              $("#txt").trigger("focus");

                //3.注意：这种方式触发事件，不触发浏览器默认行为， 比如:文本框获得焦点的默认行为

                $("#txt").triggerHandler("focus");

            });

        });

事件对象：

event.type

事件类型

event.data

存储绑定事件时传递的附加数据

event.target

点了谁就是谁

event.currentTarget

当前DOM元素，等同于this

event.delegateTarget

代理对象

screenX和screenY

对应屏幕最左上角的值

offsetX和offsetY

点击的位置距离元素的左上角的位置

clientX和clientY

距离页面左上角的位置（忽视滚动条）

pageX和pageY

距离页面最顶部的左上角的位置（会计算滚动条的距离）

event.wich

鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键

event.keyCode

按下的键盘代码

event.stopPropagation()

阻止事件冒泡行为

event.preventDefault()

阻止浏览器默认行为

阻止事件的冒泡行为除了e. stopPropagation()还有return false;return false;还有阻止浏览器默认行为的作用，所以推荐使用这种方法。

jQuery补充部分：

链式编程：在设置操作的时候才能延续链式编程，返回的是这个对象（return this）

而在获取操作的时候得到的相应的值，不能返回this.

解决办法：使用筛选选择器 end(); 它会改变jQ对象的dom对象，恢复到上一次状态

隐式迭代：

什么是隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

//            $("li").css("backgroundColor","pink");

//         这里获取的是很多的li标签

            //$("li")拿到的是10个元素

            //当我们执行设置操作的时候，设置的是全部的li 

            //会对这10个元素进行遍历，然后依次执行设置方法

//            $("li").css("fontSize");

            //获取方法里面不会有隐式迭代

each()方法：

有了隐式迭代，为什么还要使用each函数遍历？ 大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。 如果要对每个元素做不同的处理，这时候就用到了each方法

 //each(function(index,element){})

            //index就是当前正在遍历的元素的索引

            //element就是当前正在遍历的元素

            $lis.each(function (index, element) {

                console.log(index);

//                console.log(element);

                $(element).css("backgroundColor","red");

            });




相关文章