jquery事件及元素节点操作

1.jquery函数事件：页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

1.1鼠标事件

click 点击事件
dblclick 双击事件
mouseenter 鼠标焦点进入元素范围（进入子元素不触发）
mouseleave 鼠标焦点离开元素范围（离开子元素不触发）
hover 鼠标焦点进入/离开元素范围有两个回调函数
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）

$('div').click(function(){
				alert('单击');
			})
$('div').dblclick(function(){
				alert('双击');
			})
/*注意 在单击双击 同时设定的情况下 单击触发的是单击事件 双击触发的也是单击事件*/

//鼠标滑入、滑出(不含子元素)
            var div_02=$("#div_02");
            div_02.bind("mouseenter",function(){
                console.log("鼠标滑入")
            })
            div_02.bind("mouseleave",function(){
                console.log("鼠标滑出")
            })
//hover()方法
            $("[type=submit]").hover(function(){
                console.log("鼠标移动到提交按钮上")
            },function(){
                console.log("鼠标离开提交按钮")
            }
//鼠标滑入、滑出(含子元素)
            var div_01=$("#div_01");
            div_01.bind("mouseover",function(){
                console.log("鼠标滑入")
            })
            div_01.bind("mouseout",function(){
                console.log("鼠标滑出")
            })

1.2 键盘事件

kegdown 键被按下的过程
keypress 键被按下
keyup 键被松开

 $("input").keypress(function(){
  	console.log('keypress');
  });
 $("input").keyup(function(){
	console.log('keyleave');
 });
 $("input").keydown(function(){
	console.log('keydown');
 });

1.3 表单事件

submit 表单提交
change 表单文本修改
focus 鼠标获取表单输入框焦点
blur 鼠标失去表单输入框焦点

/*submit 表单提交*/
$(function(){
	$("form").submit(function(){
   		alert("提交");
 	});
})
<body>
	<form action="">
		First name: 
		<input type="text" name="FirstName" value="Mickey"><br>
		Last name: 
		<input type="text" name="LastName" value="Mouse"><br>
		<input type="submit" value="提交">
		</form> 
</body>

1.4 文档/窗口事件

load 数据加载完成
resize 用户改变浏览器窗口大小
scroll 滚动条滚动
unload 加载失败

2.jquery事件冒泡
2.1什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
2.2怎么阻止事件冒泡
阻止事件冒泡有三种方式：
1.阻止冒泡事件：event.stopPropagation()
2.阻止默认事件：event.preventDefault()
3.两种均可阻止：return false
第三种缺点：直接返回了函数，函数后面的语句没法执行了
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #father{
            width: 300px;
            height: 300px;
            background-color: paleturquoise;
        }
        #son{
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }
        #grandson{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
    </style>
    <script>
        $(function(){
            $("#father").click(function(){
                alert("我是father")
            });
            $("#son").click(function(event){
                alert("son");

                //阻止冒泡行为 方法1：
                // event.stopPropagation();
                
                //阻止冒泡行为 方法2：
                return false
            });
            $("#grandson").click(function(){
                alert("grandson")
            });

            //阻止默认行为
            $("form").submit(function(event){
                //阻止默认行为 方法1：
                // event.preventDefault();

                //阻止默认行为 方法2：
                return false
            })

            //事件委托
            $("ul").delegate("li","click",function(){
                $(this).css({background:'red'});
            })
        })
    </script>
</head>
<body>
    <div id="father">
        <div id="son">
            <div id="grandson"></div>
        </div>
    </div>

    <form action="#">
        <input type="submit">
    </form>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

3.jquery事件委托
3.1什么是事件委托？
子元素的事件委托给父元素，而不是分给子元素自己去绑定事件，然后触发事件的时候找到对应的event.target
是指利用事件冒泡，只指定一个事件处理程序，来管理某一类型的所有事件
3.2为什么要事件委托？
因为在js中添加到页面的事件处理程序个数会影响到页面的整体运行性能
其次对列表逐个添加事件处理程序太过于麻烦，所以，事件委托极大地提高了页面运行的性能
通过for循环给ul底下的li遍历绑定事件，看似没有问题但实际非常影响页面的运行性能
此时，就用到冒泡模式的事件委托来解决。
简单点就是减少DOM访问，减少内存，提高页面的运行性能。
3.3事件委托的方法

方法	定义
on()	可以在被选元素及子元素上添加一个或多个事件处理程序，并且此事件处理程序适用于当前及未来的元素
bind()	向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数，不能为未来元素添加事件
delegate()	为指定的元素及其子元素添加一个或多个事件处理程序，此方法适用于当前或未来的元素

1.on() ：
语法：$(selector).on(event,childSelector,data,function)
特点：给父元素底下新添加的标签也可以用监听事件，也支持多时事件处理
一般使用：

$("#thisA").on("click", function(){ 

        console.log("id是thisA的标签添加了click点击事件。");

});

或：

 $("#thisA").on("click mouseover",{id:"id"}, function(e){ 

        console.log("id是thisA的标签添加了点击和鼠标悬停事件，传递的值是："+e.data.id);

});

或：

$("body").on("click","#thisA" ,function(){

        console.log("可以给当前元素下的子元素添加事件");

});

可用off()方法移除事件绑定：

$("#thisA").off("click");

如需添加只运行一次的事件然后移除，可直接使用 one() 。

2.bind()：
语法：$(selector).bind(event,data,function,map)
特点;适用于静态页面，只能给调用它时已存在的元素绑定，不能给未来新增的元素绑定
当页面加载完时，才进行blind；
一般使用：

 $("#thisA").bind("click", function(){ 

    console.log("id是thisA的标签添加了click点击事件。");

  });

或：

  $("button").bind({

    click:function(){$("p").slideToggle();},

    mouseover:function(){$("body").css("background-color","#E9E9E4");}, 

    mouseout:function(){$("body").css("background-color","#FFFFFF");} 

  });

可用unbind()方法移除事件绑定。

3.delegate()：
语法：$(selector).delegate(childSelector,event,data,function)
特点;更精确的小范围使用事件代理，可以用在动态添加的元素上
一般使用：使用实例类似于on（）。
可用undelegate()方法移除事件绑定。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function(){
            //事件委托
            $("ul").delegate("li","click",function(){
                $(this).css({background:'red'});
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

4.jquery节点操作

4.1jQuery创建节点

var div = $("<div></div>")

4.2内部插入(父子关系)

//append()和appendTo()：在现存元素的内部，从后面插入元素
父元素.append(子元素)
子元素.appendTo("父元素")

//prepend()和prependTo()：在现存元素的内部，从前面插入元素
父元素.prepend(子元素)
子元素.prependTo("父元素")

4.3外部插入（兄弟关系）

//after()和insertAfter()：在现存元素的外部，从后面插入元素
已有元素.after(要插入的元素)
要插入的元素.after(已有元素)

//before()和insertBefore()：在现存元素的外部，从前面插入元素
已有元素.before(要插入的元素)
要插入的元素.insertBefore(已有元素)

4.4删除节点

子元素.remove()   将自己从父元素中删除
父元素.empty()    清除父元素中所有的子元素
子元素.detach()   效果同remove

4.5替换节点

使用p替换div
$("div").replaceWith($("<p>hello</p>"))
$("<p>hello</p>").replaceAll($("div"))

4.6克隆节点

$("div").clone(true).appendTo("body")
注：true  可以克隆事件   false不可以克隆事件

4.7节点关系

    1) $(this)
        this在原生事件中指向事件源的dom对象，使用$转为jquery对象
            $(this)  $(document)  $(window)
        jquery对象转dom：$("div")[0]遍历转变
        jquery 对象中包含的是dom对象，可以通过数组的取值方式取出其中的dom对象
    2) .children()
        匹配元素集合中每一个元素的所有子元素
        $("ul").childern(".ss")
        获取所有 ul 中类名为 ss 的子元素
    3) .next
        获取匹配元素集合中每一个元素的下一个兄弟标签
        $("ul").next()   ul 的下一个兄弟
        .nextAll()       获取后边所有的兄弟
    4) .siblings()
        获取匹配元素集合中所有元素的兄弟元素     可筛选
        $("#test").siblings(".selected")
    5) .parent()
        获取匹配元素集合中每一个元素的父元素
        $("#t").parent(); // body
        .parents()
        获取匹配元素集合中每一个元素的祖先元素，直到 html 为止

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .div_01{
            width: 100px;
            height: 100px;
            background-color: teal;
            margin-bottom: 20px;
        }
        .div_02{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin-bottom: 20px;
        }
        .add{
            width: 100px;
            height: 100px;
            background-color: violet;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .class{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-bottom: 20px;
        }
    </style>
    <script>
        $(function(){
            //append()和appendTo()：在现存元素的内部，从后面插入元素
            var div_03=$("<div>这是append增加的div元素</div>");
            // $("body").append(div_03);
            div_03.appendTo($("body"));
            div_03.addClass("add");

            //prepend()和prependTo()：在现存元素的内部，从前面插入元素
            var div_04=$("<div>这是prepend增加的div元素</div>");
            // $("body").prepend(div_04);
            div_04.prependTo($("body"));
            div_04.addClass("add");

            //after()和insertAfter()：在现存元素的外部，从后面插入元素
            var div_05=$("<div>这是after增加的div元素</div>");
            // $(".div_01").after(div_05);
            div_05.insertAfter($(".div_01"));
            div_05.addClass("class");

            //before()和insertBefore()：在现存元素的外部，从前面插入元素
            var div_06=$("<div>这是before增加的div元素</div>");
            // $(".div_02").before(div_06);
            div_06.insertBefore($(".div_02"));
            div_06.addClass("class")

            //删除节点 remove()
            div_06.remove();
        })
    </script>
</head>
<body>
    <div class="div_01">原有元素div_01</div>
    <div class="div_02">原有元素div_02</div>
</body>
</html>

jquery事件及元素节点操作

4.jquery节点操作

猜你喜欢