JQuery 文档处理与事件

jQuery 文档处理

jQuery创建dom

		//jquery 创建dom
        var ele=$("<div class='child2'></div>");
        var ele=$("<div></div>");
        //给创建的jquery对象添加类   直接在标签上去书写
        ele.addClass("child");

内部插入

• append()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
        //追加在当前元素之后
        $(".subject").append(block);
        //fn 回调函数   index 索引  html 当前元素内容
        $(".subject").append(function (index,html) {
            console.log(index, html);
            return block;
        });
    });

• appendTo()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
        block.appendTo($(".subject"));
    });

append()和appendTo()区别：插入元素与被插入元素前后颠倒

• prepend()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
        //追加在当前元素内容之前
        $(".subject").prepend(block);
        //fn 回调函数  index 索引 html 当前元素内容
        $(".subject").prepend(function (index, html) {
            console.log(index, html);
            return "<div class='child3'></div>";
        });
    });

• prependTo()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
        block.prependTo($(".subject"));
    });

prepend()和prependTo()区别：插入元素与被插入元素前后颠倒

外部插入

• after()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
        //插入到元素之后
        $(".child1").after(block);
        //fn 回调函数 index 索引
        $(".child1").after(function (index) {
            console.log(index);
            return "<div class='child3'></div>";
        });
    });

• insertAfter()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
       //insetAfter
        //插入到元素之后
        block.insertAfter($(".child1"));
    });

after()和insertAfter()区别：插入元素与被插入元素前后颠倒

• before()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
       //before
        //插入到元素之前
        $(".child1").before(block);
        //fn 回调函数 index 索引
        $(".child1").before(function (index) {
            console.log(index);
            return "<div class='child3'></div>";
        });
    });

• insertBefore()方法

$(function () {
        var block = $("<div></div>").addClass("child2");
        block.insertBefore($(".child1"));
    });

before()和insertBefore()区别：插入元素与被插入元素前后颠倒

包裹元素

• wrap()方法

$(function () {
       //创建包裹元素
        var wrap = $("<div></div>").addClass("wrap");
        //传参
        $(".subject").wrap(wrap);
        //直接写标签
        $(".subject").wrap("<div class='wrap'></div>");
        //fn 回调函数 index 索引
        $(".subject").wrap(function (index) {
            console.log(index);
            return wrap;
    });

• unwrap()方法

$(function () {
       //创建包裹元素
        var wrap = $("<div></div>").addClass("wrap");
        //unwrap 移除指定元素的父元素
        $(".child1").unwrap();
    });

• wrapAll()方法

$(function () {
		//将匹配到的所有元素包裹起来
      $("p").wrapAll("<div></div>");
    });

wrap()方法若操作一堆元素，则将会把元素一一包裹起来

• wrapInner()方法

$(function () {
 		var wrap = $("<div></div>").addClass("wrap");
		//wrapInner 将元素内容包裹起来
        $(".subject").wrapInner(wrap);
        //fn 回调函数 index 索引
        $("body").wrapInner(function (index) {
            console.log(index);
            return wrap;
        });
    });

元素替换

• replaceWith()方法

$(function () {
 		//replaceWith  元素替换
        var block = $("<div>hello</div>");
        //元素替换
        $("p").replaceWith(block);
        //fn 回调函数
        $("p").replaceWith(function (index, html) {
            console.log(index, html);
            return block;
        });
    });

• replaceAll()方法

$(function () {
 		//replaceWith  元素替换
        var block = $("<div>hello</div>");
		block.replaceAll($("p"));
    });

replaceWith()和replaceAll()区别：替换元素与被替换元素前后颠倒

删除

• empty()方法

$(function () {
 		//empty  把匹配到的元素的所有子元素删除
        $("ul").empty();
    });

• remove()方法

$(function () {
		//remove 删除匹配到的元素
       $("ul>li").remove();
   });

• detach()方法

$(function () {
 		//detach 删除匹配到的元素
        $("ul>li").detach();
    });

复制

clone()方法

$(function () {
 		//clone 复制
 		//参数  true(深度克隆  克隆dom元素以外  事件 之类)  false(浅克隆  只是克隆了dom元素)
        $("p").clone();
    });

事件

• on()方法和off()方法

$(function () {
 		        //on 事件的绑定
        $("button").on("click",function () {
            console.log("点击了我");
        });
        //传递参数
        var data = {"name":"张三","sex":"男"};
        $("button").on("click",data,function (e) {
            console.log("点击了我",e.data);
        });
        //同时绑定多个事件
        $("button").on("click mouseenter mouseleave",function (e) {
            if (e.type=="click"){
                console.log("鼠标点击");
            }else if (e.type=="mouseenter"){
                console.log("鼠标进入");
            }else {
                console.log("鼠标离开");
            }
        });

        //off  事件的移除
        //不写参数移除所有  写参数移除指定事件
        $("button").off();
        $("button").off("click");
    });

• bind()方法和unbind()方法

$(function () {
 		        //on 事件的绑定
        $("button").bind("click",function () {
            console.log("点击了我");
        });
        //传递参数
        var data = {"name":"张三","sex":"男"};
        $("button").bind("click",data,function (e) {
            console.log("点击了我",e.data);
        });
        //同时绑定多个事件
        $("button").bind("click mouseenter mouseleave",function (e) {
            if (e.type=="click"){
                console.log("鼠标点击");
            }else if (e.type=="mouseenter"){
                console.log("鼠标进入");
            }else {
                console.log("鼠标离开");
            }
        });

        //off  事件的移除
        //不写参数移除所有  写参数移除指定事件
        $("button").unbind();
        $("button").unbind("click");
    });

• one()方法

$(function () {
 		      //one  一次性事件  只能执行一次
        var data = 1;//data不能为字符串
        $("button").one("click",data,function (e) {
            console.log(e.data);
        });
    });

• triggle()方法

$(function () {
 		  //trigger  触发指定类型事件  自动触发
        $("button").on("click",function () {
            console.log("点击");
        });
        $("button").trigger();
    });

事件的委托

on()方法的第二个参数为selector，将父元素的事件委托给子元素执行

$(function () {
 		  $("ul").on("click",".li2",function () {
            console.log("ul的点击事件交给第二个子元素li执行");
        });
    });

事件切换

hover()方法

$(function () {
 	 	 $("button").hover(function () {
                console.log("鼠标悬停");
          },
          function () {
            console.log("鼠标离开");
         });
        //hover方法等价于
         $("button").on("mouseover mouseout",function (e) {
            if (e.type=="mouseover"){
                console.log("鼠标悬停");
            }else {
                console.log("鼠标离开");
            }
        });
    });