Jquery事件、冒泡、委托与节点

1-jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm =$('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

注：attr可以读取自定义属性

// 取出图片的地址

var $src =$('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src:"test.jpg", alt: "Test Image" });

02-jquery事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

绑定事件的其他方式

$(function(){
    $('#div1').bind('mouseover click', function(event){
        alert($(this).html());
    });
});

取消绑定事件

$(function(){
$('#div1').bind('mouseover click',function(event) {
alert($(this).html());

//$(this).unbind();
$(this).unbind('mouseover');

});
});

3-事件冒泡

父级对象所有同类事件

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

阻止默认行为

阻止表单提交 $('#form1').submit(function(event){ event.preventDefault();})

4-事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件委托的写法

$(function(){
    $list = $('#list');  $list.delegate('li', 'click', function() {$(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   <li>5</li>
</ul>

5-jquery元素节点操作

创建节点

var $div =$('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点

1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

Jquery事件、冒泡、委托与节点相关推荐

jquery 事件冒泡的介绍以及如何阻止事件冒泡
为什么80%的码农都做不了架构师?>>> 什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个 ...
阻止jQuery事件冒泡
Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档中的开头 ...
jQuery事件冒泡
开始前,我就想问几个问题. 什么是事件冒泡如何阻止事件冒泡先看代码图.设置两个盒子,用一个盒子包着另一个盒子,外边的盒子我给它红色.里边的盒子我给它蓝色,用jQuery赋予两个盒子点击事件当你点 ...
JQuery事件----冒泡机制的思考
当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件. <div class="div_xiaozi"> <span class="spa ...
Jquery 防止事件冒泡
Jquery 防止事件冒泡 1.简介在jquery事件中,如果指定对象和指定对象的父对象(依次往上类推)都定义了同样的事件,则jquery默认会往上传递,挨个执行. <!DOCTYPE htm ...
jquery阻止事件冒泡的两种方法
事件的旅程: 当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件.以下面的页面模型为例: 1. <div class="foo">2. <span ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...
JQuery --- 第三期 (jQuery事件相关)
个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta char ...
JS阻止事件冒泡的3种方法，以及他们之间的不同
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
JavaScript事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 事件的冒泡和捕获事件的冒泡有什么好处事件冒泡的优点和缺点不是所有的事件都能冒泡阻止事件冒泡阻止jQuery事件冒泡 ...

Jquery事件、冒泡、委托与节点

Jquery事件、冒泡、委托与节点相关推荐

最新文章

热门文章