1,事件冒泡
在子元素与复元素绑定同类事件如(click),在触发子元素的同时其父级元素的绑定事件也会被触发。
例:
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
若不想让父级元素绑定的事件受到影响即可阻止事件冒泡,阻止事件冒泡的方法是:event.stopPropagation();
例:
$(function(event){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
event.stopPropagation();
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
1.1阻止表单的默认行为:event.preventDefault();
event.stopPropagation();和 event.preventDefault();
的合并写法为:return false;
2,事件委托
事件委托的原理是利用冒泡,把事件添加到父级上,通过判断事件来源的子集执行相关操作,优点是极大的减少了事件绑定的次数,其次可以让新加入的子元素也可以执行相应的操作。
例:
$(function(){
$list = $('ul');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
3,节点的创建、添加、和删除
3.1创建:$("<li></li>")
3.2内部添加内容:
element.append(‘内容’); 把内容放到匹配元素的最后面,相当于原生的appendChild()。
appendTo(content);用于被追加的内容。
element.prepend(‘内容’) 把内容放到匹配元素的前面。
prependTo(content) 追加内容到元素的前面。
3.3外部添加:
element,after('内容’) 把内容放到目标元素后面。
element.before('内容’) 把内容放到目标元素的前面。
3.4插入标签
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3.5 删除元素:
element.remove() 删除匹配的元素。
element.empty() 删除匹配的元素集合中所有的子节点。
element.html("") 清空匹配的元素内容。
remove()删除的是元素的本身,empty()与html()作用相同,只不过html()还可以设置内容。 |
<body>
<ul>
<li>原li</li>
</ul>
<p>今天天气不错</p>
<div class="test">原div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>创建的li</li>");
// 2. 添加元素
// (1) 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
//$("li").appendto("ul") 把li追加到ul的后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
//$("li").prependTo("ul") 把li追加到ul前面
// (2) 外部添加
var div = $("<div>添加的</div>");
// $(".test").after(div);
$(".test").before(div);
//$("p").insertAfter("div");把p标签插入到div的后面。
//$("p").insertBefore("ul");把p标签插入到ul的前面。
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
//4,其他
//$("p").wrap("<div class='wrap'></div>");将所有匹配的p标签用新创建的div包裹起来。
//$("p").unwrap();将包裹p标签的div取消。
//$("p").replaceWith("<b>Paragraph. </b>");将所匹配的p标签用b标签替换。
})
</script>
</body>