jQuery
一. 事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
<script>
$(function(){
var $father = $('.father');
var $son = $('.son');
var $grandson = $('.grandson');
$father.click(function() {
alert('father');
});
$son.click(function() {
alert('son');
});
$grandson.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
</script>
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;总结:
- 事件冒泡是一种常用的思想
- 事件冒泡是 js 对对象事件的处理策略,是 js 是的一种实现机制
- 事件冒泡: 子元素会把事件, 传递给它的父级, 以此类推
- 我们可以阻止事件冒泡: 使用: stopPropagation( )的方法
- 我们也可以通过调用某些事件, 然后以 return false 的形式,阻止事件冒泡
- 阻止默认行为: preventDefault( )
二. 事件委托
定义
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作
作用
事件委托首先可以极大减少事件绑定次数，提高性能；
其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.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>事件委托的写法
<script>
$(function(){
$ul = $('#list');
$ul.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
</script>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>总结:
- 事件委托就是将本体不方便做的事情,委托给别的对象
- 事件委托是我们集中处理某些事件的一种方式
- 事件委托用的是delegate方法, 其中的参数为:
- 第一个参数: 请求委托的对象
- 第二个参数: 请求委托的事件类型
- 第三个参数: 请求委托的处理方式(回调函数)
三. Dom操作
元素节点操作指的是改变 html 的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');移动或者插入标签的方法
append( )
在元素内部添加，从后面放入
使用方法:
$(selector).append(content)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#app')
var $span = $('<span>这是一个span元素</span>')
$div.append($span)
})
</script>
</head>
<body>
<div id="app">div元素</div>
</body>效果:
div元素这是一个span元素appendTo( )
在元素内部添加，从后面放入
使用方式:
$(content).appendTo(selector)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
var $div2 = $('#box')
var $span = $('<span>这是一个span元素11</span>')
$span.appendTo($div1)
$('<em>哈哈哈,斜体</em>').appendTo($div2)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
<div id="box">第二个div元素</div>
</body>结果:
第一个div元素这是一个span元素11
第二个div元素哈哈哈,斜体prepend( )
在元素内部添加，从前面放入
使用方式:
$(selector).prepend(content)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.prepend('<a href="#">a标签</a>')
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>结果:
a标签第一个div元素prependTo( )
在元素内部添加，从前面放入
使用方法:
$(content).prependTo(selector)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$('<a href="#">a标签</a>').prependTo($div1)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>结果:
a标签第一个div元素after( )
在元素外部添加，从后面放入
使用方式:
$(selector).after(content)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.after("<em>哈哈,斜体</em>")
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>结果:
第一个div元素
哈哈,斜体 // 斜的,这里可能看不出来...insertAfter( )：
在元素外部添加，从后面放入
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
使用方法:
$(content).insertAfter(selector)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$('<em>哈哈,斜体</em>').insertAfter($div1)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>结果:
第一个div元素
哈哈,斜体before( )
在被选元素前插入指定的内容。
使用方式:
$(selector).before(content)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.before("<em>哈哈,斜体</em>")
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>结果:
哈哈,斜体
第一个div元素insertBefore( )
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
使用方式:
$(content).insertBefore(selector)例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$('<em>哈哈,斜体</em>').insertBefore($div1)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>结果:
哈哈,斜体
第一个div元素删除标签
使用方式:
$(selector).remove()例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.remove()
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
<div id="box">第二个div元素</div>
</body>结果:
第二个div元素总结:
- Dom 元素这里指的就是 HTML标签,有时候大家会听到 DOM树的概念, 那是因为 HTML 中的标签,就像是树一样, 根部是
<html>标签, 然后是<body>和<head>,再然后一级一级往下排,最终形成树形结构 - 我们可以通过 jquery 来动态的修改 HTML 的结构,使用的就是上述的方法
- append( ) 方法可以在元素内部后方, 添加新的元素, appendTo( ) 也差不多, 只是添加的顺序进行了调换
- prepend( ) 方法可以在元素内部前方, 添加新的元素, prependTo( ) 与之类似, 添加的顺序进行了调换.
- after( ) 方法是指在当前元素外部,从后方插入一个新的元素
- before( ) 这个方法则正好和after( ) 方法相反, 在当前元素前方,插入一个新的元素
- insertBefore( ) 则是在指定的元素之前插入子元素, 这些内容大家只需要简单了解, 使用起来的时候能够想的起来即可, 实在是忘记了, 可以到时候查一下文档.
- 删除某个元素不必多说就是: 某个想要删除的元素调用remove( ) 方法即可.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
