“jquery”如何控制清空div中的内容?

“jquery”如何控制清空div中的内容?,第1张

给右边div加一个id=“div1”属性$("#div1")empty(); 这样就清空右边的内容了,然后再去显示你自己的内容就可以了。

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。

jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

2009年1月,jQuery 13版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。

这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在13版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在13版中,可以直接用live()方法。

2010年1月,也是jQuery的四周年生日,jQuery 14版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14com站点,带来了连续14天的新版本专题介绍。

使用jquery库的函数:remove()。

功能思路:展现一个UL,然后设计一个按钮,通过绑定删除函数,点击时删除所有LI节点

实例演示如下:

1、设计简单的一个页面,其中html代码如下:

简单的样式文件:

此时的页面内容展示如下:

2、设计JS代码,实现删除函数。

3、实例 *** 作,点击按钮,实现节点删除,展示如下:

完成设计,此时的DOM节点如下:

扩展资料:

remove函数详情解析:

1、定义和用法:

remove() 方法移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

2、语法:

$(selector)remove()。

首先你要理解一点,jQuery 的绑定事件是能够叠加的,比如对一个div 绑定的多次 blur 事件,在触发的时候 多个绑定在div 上的blur 事件都会执行;
<div id="demo'></div>
$( '#demo' )bind( 'blur', function(){} );
$( '#demo' )bind( 'blur', function(){} );
$( '#demo' )bind( 'blur', function(){} );
比如以上对 demo 绑定了 3 次blur 事件,那么在触发blur 事件的时候 3 个都会执行;
想要只执行最后一次绑定的时间而忽视之前绑定的事件,就要在下一次绑定事件之前先解除原先绑定的事件,再绑定新的事件
<div id="demo'></div>
$( '#demo' )bind( 'blur', function(){
$( '#demo' )unbind( 'blur' ); // 在执行完 blur 事件后解除绑定的事件或者在其他的地方解除绑定也行;
} );
原理说多了,其实楼主的代码改法很简单,
$('#b'+id1)bind('blur',function(){
$('body')append('<div id="test">执行到节点2</div>');
})
把这个事件绑定写到 click 外面去,然后在 click 里面写上模拟 blur 事件的代码就可以了,这样就保证了blur 事件只绑定了一次,而不是在每次click 之后叠加绑定了新的事件
$("areply")click(function(){
//点击'回复'触发
//两处append调用都是供测试用,项目中为对应处其他功能代码
$('body')append('<div id="test">执行到节点1</div>');
$('#b'+id1)blur(); // 执行绑定的 blur 事件
return false;
})
$('#b'+id1)bind('blur',function(){
$('body')append('<div id="test">执行到节点2</div>');
})

使用stopPropagation() 方法;

estopPropagation()方法不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

例:div点击事件阻止冒泡;

html

<div id="div1"><div id="div2"></div></div>

js

$("#div2")bind("click",function(e){

estopPropagation();//阻止事件冒泡,点击div2的时候将不发生点击div1的事件;

});


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13361698.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-21
下一篇 2023-07-21

发表评论

登录后才能评论

评论列表(0条)

保存