首页

关于JS中作用域的销毁和不销毁的情况总结

前端达人

window全局作用域->页面关掉才销毁
函数执行会形成私有的作用域

1)作用域的销毁
一般情况下,函数执行形成一个私有的作用域,当执行完成后就销毁了->节省内存空间

2)作用域的不立即销毁
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先执行fn,有一个私有的变量i=10,返回一个堆内存地址 xxxfff111,我们发现这个地址还用到了一次,那么当前的这个fn形成私有作用域(A)就不能立即销毁了,xxxfff111(15)->输出25,A中的i变为11;当xxxfff111执行完了,发现这个地址没用了,浏览器就把A、xxxfff111都释放了

fn()(20);//->在执行fn的时候一切都从新开始了,和上面的步骤是一样的->输出30

3)作用域的不销毁:形成一个私有作用域,里面的内容被外面占用了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn执行形成一个私有的作用域A,A中有一个私有的变量i=10,A中返回一个地址xxxfff11,被外面的f占用了,那么当前的A就不能销毁了
f(15);//->输出25,让A中的i=11
f(20);//->输出31,让A中的i=12
...
当我们知道f用完的时候,为了优化性能,我们让f=null,这样的话A中的xxxfff111没人占用了,浏览器会把A和xxxfff111都释放了


几种不销毁常用到的形式:
1)函数执行,返回一个引用数据类型的值,并且在函数的外面被别人接收了,那么当前函数形成的私有作用域就不在销毁了-->例如上面的案例

2)在函数执行的时候,里面的一个小函数的地址赋值给了我们的外面元素的点击事件,那么当前小函数也相当于被外面占用了,大函数执行形成的私有的作用域也不销毁了
//每一次循环都执行自执行函数形成一个私有的作用域(循环三次就有三个作用域,每一个作用域中都有一个i,第一个存储的是0,第二个存数的是1..),在每一个私有的作用域中都把里面的函数绑定给了外面元素的点击事件,这样的话每一次形成的作用域都不销毁了(三个不销毁的作用域)
var oLis=document.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}

3)在使用setTimeout实现轮询动画的时候,我们如果move需要传递参数值,那么像下面这样的写法会行成很多的不销毁的作用域,非常的耗性能
function move(tar){
<js code>

//window.setTimeout(move,10); ->第二次执行move的时候我们没有给它传值(这样写不行)
window.setTimeout(function(){
move(tar);
},10);//->这样写实现了,但是每一次执行定时器都会形成一个私有的所用域(匿名函数形成的)A,在A中使用了上级作用域中的tar的值,而且执行了move又形成了一个小的作用域(而在小的作用域中会使用tar的值),这样每一次定时器形成的A都不能销毁了
}
move(100);//->第一次这样执行传递100

//解决办法:
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次这样执行传递100


JS中内存空间释放的问题(堆内存、栈内存)
[谷歌浏览器]
我们开辟一个内存,可能或有一些其他的变量等占用了这个内存,谷歌浏览器都会间隔一段时间看这个内存还有没有被占用,如果发现有没有被占用的内存了,就自己帮我们回收了(内存释放)

[火狐和IE]
我们开个内存,当我们引用了它,就在内存中记录一个数,增加一个引用浏览器就把这个数+1,减少一个引用,浏览器就把这个数-1...当减到零的时候浏览器就把这个内存释放了;但是有些情况下(尤其是IE)记着记着就弄乱了,内存就不能释放了-->浏览器的内存泄露

var obj={};
我们养成一个好的习惯,当我们obj这个对象使用完成了,我们手动的obj=null (null空对象指针),浏览器会自己把刚才的堆内存释放掉

标签: javascript




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


jquery ui 中 datepicker的汉化

前端达人

首先上 html代码


  1. <!--为防止一个页面出现多个id 我们改用class
  2. 为防止手工填写格式出错 我们设置属性为 readonly
  3. 只能选 ,不能填 ok
  4. -->
  5. <input type="text" class="datepicker" readonly="readonly"/>



然后是jquery ui 初始化部分代码


  1. //日期格式改变
  2. $( ".datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
  3. //星期格式汉化
  4. $( ".datepicker" ).datepicker( "option", "dayNamesMin",[ "日", "一", "二", "三", "四", "五", "六" ] );
  5. //月份格式汉化
  6. $( ".datepicker" ).datepicker( "option", "monthNames", [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] );



注:jquery ui 的设置有两种,一种是在初始化的时候就填入参数

另一种是在初始化之后,在设置参数。这里为了说明参数选项,我们选择的第二种方式来讲解。



效果图: 



官方说明地址: http://api.jqueryui.com/datepicker/#option-altFormat

下载地址:http://download.jqueryui.com/download


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

datatable 拖动列宽 鼠标拖动列宽

前端达人


本篇博客所用到的技术也是从别的博客学习到的,但目前找不到那篇博客的链接了。

1.普通表格实现拖动列宽

var tabSize = tabSize || {}; tabSize.init = function (id) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); var headTh = table.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 调用 // 鼠标拖动列宽 setTimeout(function () { // 1.html代码里就是一个普通的table元素 // 2.传入table元素的id tabSize.init('documentList'); }, 600); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.datatable实现鼠标拖动列宽

  1. 项目中用到datatable插件的地方,都是需要上下滚动的;而datatable插件实现上下滚动,是生成了两个div各包含了一个table,一个表格里只包含thead并且固定住(类:dataTables_scrollHead),另一个实现table内容滚动(类:dataTables_scrollBody) 。
  2. 那么,若要实现鼠标拖动列宽的话,则需要:表头绑定鼠标事件→事件触发时两个表格的对应列的宽度都要改变
  3. 若这个datatable表格原本没有滚动条的话,在鼠标拖动列宽的时候,会出现滚动条,其中,datatable定义时,“scrollX”: true在这里插入图片描述
    在这里插入图片描述
var tabSize = tabSize || {}; tabSize.init = function (id,headTableWrapperId) { //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 var tTD; // 获取需要修改列宽的表格 var table = document.getElementById(id); // 获取固定头部的表格 var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0]; // 获取表格头部th var headTh = tableHead.rows[0]; for (j = 0; j < headTh.cells.length; j++) { headTh.cells[j].onmousedown = function () { //记录单元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; headTh.cells[j].onmouseup = function () { //结束宽度调整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; headTh.cells[j].onmousemove = function () { //更改鼠标样式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暂存的Table Cell if (tTD == undefined) tTD = this; //调整宽度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX) > 0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //调整列宽 tTD.style.width = tTD.width + 'px'; tTD.style.cursor = 'col-resize'; // 调整滚动表格的每个cell for (k = 0; k < table.rows.length; k++) { table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width; } } }; } }; // 鼠标拖动列宽 setTimeout(function () { // 参数:1.table元素的id, // 2.datatable插件生成的最外层div的id,F12可查看到 tabSize.init('cfcPlanListIn','cfcPlanListIn_wrapper'); }, 2000); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

在这里插入图片描述
在这里插入图片描述

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn 作者:阿晏

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

jquery对复选框(checkbox)的操作汇总

前端达人

query操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

?
1
$( "input:checkbox:checked" ).val()

或者

?
1
$( "input:[type='checkbox']:checked" ).val();

或者

?
1
$( "input:[name='ck']:checked" ).val();

2、 获取多个checkbox选中项

?
1
2
3
4
5
$( 'input:checkbox' ).each( function () {
if  ($( this ).attr( 'checked' ) == true ) {
alert($( this ).val());
}
});

3、设置第一个checkbox 为选中值

?
1
$( 'input:checkbox:first' ).attr( "checked" , 'checked' );

或者

?
1
$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' );

4、设置最后一个checkbox为选中值

?
1
$( 'input:radio:last' ).attr( 'checked' 'checked' );

或者

?
1
$( 'input:radio:last' ).attr( 'checked' 'true' );

5、根据索引值设置任意一个checkbox为选中值

?
1
$( 'input:checkbox).eq(索引值).attr(' checked ', ' true ');

索引值=0,1,2....
或者

?
1
$( 'input:radio' ).slice(1,2).attr( 'checked' 'true' );

6、选中多个checkbox同时选中第1个和第2个的checkbox

?
1
$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' );

7、根据Value值设置checkbox为选中值

?
1
$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' );

8、删除Value=1的checkbox

?
1
$( "input:checkbox[value='1']" ).remove();

9、删除第几个checkbox

?
1
$( "input:checkbox" ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个checkbox:

?
1
$( "input:checkbox" ).eq(2).remove();

10、遍历checkbox

?
1
2
3
$( 'input:checkbox' ).each( function  (index, domEle) {
//写入代码
});

11、全部选中

?
1
2
3
$( 'input:checkbox' ).each( function () {
$( this ).attr( 'checked' true );
});

12、全部取消选择

?
1
2
3
$( 'input:checkbox' ).each( function  () {
$( this ).attr( 'checked' , false );
});

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性,通过id选择器选取:

 

?
1
< input  type = "checkbox"  name = "myBox"  id = "chkOne"  value = "1"  checked = "checked"  />

    JQuery:

?
1
$( "#chkOne" ).click( function (){});

   2.给CheckBox设置一个class属性,通过类选择器选取:

?
1
< input  type = "checkbox"  name = "myBox"  class = "chkTwo"  value = "1"  checked = "checked"  />

    JQuery:

?
1
2
$( ".chkTwo" ).click( function (){});

  3.通过标签选择器和属性选择器来选取:

?
1
2
< input  type = "checkbox"  name = "someBox"  value = "1"  checked = "checked"  />
< input  type = "checkbox"  name = "someBox"  value = "2"  />

   JQuery:

?
1
2
$( "input[name='someBox']" ).click( function (){});

二、对CheckBox的操作:
   以这段checkBox代码为例:

?
1
2
3
4
< input  type = "checkbox"  name = "box"  value = "0"  checked = "checked"  />
< input  type = "checkbox"  name = "box"  value = "1"  />
< input  type = "checkbox"  name = "box"  value = "2"  />
< input  type = "checkbox"  name = "box"  value = "3"  />

   1.遍历checkbox用each()方法:

?
1
$( "input[name='box']" ).each( function (){});

   2.设置checkbox被选中用attr();方法:

?
1
2
$( "input[name='box']" ).attr( "checked" , "checked" );

    在HTML中,如果一个复选框被选中,对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked",所以判断 if("checked"==$("#id").attr("checked")) 是错误的,应该是 if(true == $("#id").attr("checked"))
 
  3.获取被选中的checkbox的值:

?
1
2
3
4
$( "input[name='box'][checked]" ).each( function (){
if  ( true  == $( this ).attr( "checked" )) {
    alert( $( this ).attr( 'value' ) );
}

     或者:

?
1
2
3
4
$( "input[name='box']:checked" ).each( function (){
if  ( true  == $( this ).attr( "checked" )) {
    alert( $( this ).attr( 'value' ) );
}

   $("input[name='box']:checked")与 $("input[name='box']")有何区别没试过,我试了用 $("input[name='box']")能成功。
   4.获取未选中的checkbox的值:

?
1
2
3
4
5
$( "input[name='box']" ).each( function (){
    if  ($( this ).attr( 'checked' ) == false ) {
       alert($( this ).val());
     }
  });

   5.设置checkbox的value属性的值:

?
1
$( this ).attr( "value" ,值);

三、 一般都是创建一个js数组来存储遍历checkbox得到的值,创建js数组的方法:

     1.  var array= new Array();

     2. 往数组添加数据:

        array.push($(this).val());

     3.数组以“,”分隔输出:

         alert(array.join(','));




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

html iframe 子页面调用父页面的方法

前端达人

还是附上代码吧。不多说,方便日后查看


父页面代码:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>parents</title>
  5. <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. <script language="javascript" type="text/javascript">
  9. function sayhello() {
  10. alert('Hello World!');
  11. }
  12. var value = 'value';
  13. </script>
  14. <div id="default">div内容</div>
  15. <iframe src="child.html"></iframe>
  16. </body>
  17. </html>

子页面

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>child</title>
  5. <meta charset="UTF-8">
  6. <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. $(function() {
  9. //在iframe子页面中查找父页面元素
  10. alert($('#default', window.parent.document).html());
  11. //在iframe中调用父页面中定义的变量
  12. alert(parent.value);
  13. //在iframe中调用父页面中定义的方法
  14. parent.sayhello();
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <div>iframe子页面内容</div>
  20. </body>
  21. </html>

注意:

父页面的属性和方法必须在iframe标签之前

1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

动态生成的DOM做点击事件无效

前端达人

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果。

例如:

复制代码
<section> 测试动态生成的DOM点击事件 <br />
    </section>       
        <script src="jquery-1.11.2.min.js"></script>
        <script> $(function () {
                $.ajax({
                    type: "post",
                    url: "Handler1.ashx",
                    data: {},
                    success: function (data) {
                        $("section").append(data); //把获取的标签动态添加到页面中 }
                })
            });
            $("#test").click(function () {
                alert("Smile");
            }) </script>
复制代码

生成页面,点击A标签无效果。

这里只介绍两种解决方法。

①把事件写在生成的字符串当中,感觉很low

里面什么方法名外面就声明一个(需要带参就传参)。

②我一般喜欢在JS里面直接写点击事件,不喜欢在标签里面写事件

 我们直接写这个标签的点击事件是没效果的,我们就换个写法,利用On来完成。

 

 这样也可以完成点击事件。

 

 

另附:a标签的href也是可以执行脚本的,点击事件也会执行脚本,点击事件优先,然后在执行href链接。

 

 下载一般都是把A标签的Href给个一般处理程序的链接(参数就用?传值)。但我这个下载的参数是动态生成的,在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接

 

复制代码
  //下载 $("#uploadInfo").click(function () { var uids = "";
            $(":checkbox[name='A']:checked").each(function (i, item) {
                uids += $(item).attr("data-id") + ",";
            }) if (uids === "") {
                NewAlertBox("warning","请最少选择一项",2000);
            } else { var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
                $(this).attr("href", urls);  //执行完了点击事件,把Href赋值,然后自动跳转href链接 }

        });

1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

JQuery阻止事件冒泡

前端达人

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。

通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。

复制代码
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style> 

<body>
<div id="content">
外层div
<div id="msg">
内层div
</div>
</div>


    

</body>

 
复制代码

显示结果

对应的jQuery代码如下:

复制代码
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(){
            alert("我是小div");
        }); // 为外层div元素绑定click事件  $("#content").click(function(){
            alert("我是大div");
        }); // 为body元素绑定click事件  $("body").click(function(){
            alert("我是body");
        });
    }); </script>
复制代码

当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。

如何防止这种冒泡事件发生呢?

修改如下:

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(event){
            alert("我是小div");
            event.stopPropagation(); // 阻止事件冒泡  }); // 为外层div元素绑定click事件  $("#content").click(function(event){
            alert("我是大div");
            event.stopPropagation(); // 阻止事件冒泡  }); // 为body元素绑定click事件  $("body").click(function(event){
            alert("我是body");
            event.stopPropagation(); // 阻止事件冒泡  });
    }); 
复制代码

event.stopPropagation(); // 阻止事件冒泡

 

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

html部分

复制代码
 <body> <form action="test.html"> 用户名:<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
复制代码

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
            $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空");  $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 )  event.preventDefault();  
                }
            });
        }); </script>
复制代码
//阻止默认行为 ( 表单提交 ) event.preventDefault(); 

还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
            $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空");  $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) //event.preventDefault();   return false; }
            });
        }); </script>
复制代码

 

同理,上面的冒泡事件也可以通过return false来处理。 
复制代码
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(event){
            alert("我是小div"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        }); // 为外层div元素绑定click事件  $("#content").click(function(event){
            alert("我是大div"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        }); // 为body元素绑定click事件  $("body").click(function(event){
            alert("我是body"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        });
    }); 

1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

dataTable 表格头错位

前端达人

在开发中遇到这个问题,就是第一次加载的时候会错位,出现窄很多的现象,在网上找了一番后,发现http://blog.csdn.net/bugscode/article/details/53432069这篇博客中给出的原因是清晰的,但是解决方法我没怎么看明白,于是按照他所说的原因,即
这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性,它会使Table标签中多一个style=”width: xx px;”属性,这就导致了变化大小时标题对不齐现象。

然后在 datatable中加入了 serverSide 设置,

$('#charging_table').dataTable({
    serverSide : false,
    ......}) 
  • 1
  • 2
  • 3

既然是因为 serverSide 的原因,那我把它 设置为 false 结果问题还真解决了!


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

dataTable tab栏切换时错位解决办法 – 漆黑小T – 博客园

前端达人

做后台管理类网站肯定要写列表,首选dataTable,功能强大

最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了!

resize,m_fill,w_1600,h_290#

主要时因为当table被隐藏后,table的header宽度会计算错乱,解决方案就是在table切换的时候重新调整列的宽度,找到好多解决方案,不过最简单的是下面这种:

var table = $.fn.dataTable.fnTables(true);

if ( table.length > 0 ) {

$(table).dataTable().fnAdjustColumnSizing();

}

但是

使用时要注意姿势,一定要让DOM渲染结束后把这一坨给粘贴过去:

 
                                                                    
  1. $("#li_certificate").click(function () {
  2. $(this).parent().addClass("selected").siblings().removeClass("selected");
  3. $("#div_record").hide();
  4. $("#div_certificate").show();
  5. //这个位置写那个重新适应宽度的代码
  6. });
1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

前端达人

input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈

大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示。是不是很常见?很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 

<input type="text" value="搜索关键字" onfocus="if(this.value == '搜索关键字') this.value = ''" onblur="if(this.value =='') this.value = '搜索关键字'" /> 

我是非常反对把 javascript 写在 html 标签里的,这和 style 写在 html 标签里一样,虽然不违反 W3C 标准,但也不推荐这么写。因为: 
1.完全没有复用性可言,如果是个表单,输入框很多,每个都需要这样的效果,那就每个都这么处理吗? 
2.如果要修改其中的提示文字,费时费力又不好维护。 
3.我们倡导结构(html)、表现(css)、行为(javascript)三者分离,这才是一个好的页面。 
那要怎么写才能实现这个效果,而且既有复用性,又好维护,又不需要把 js 写进 html 里呢? 
具体方法如下: 
首先肯定是引入jQuery 
Html代码: 

<div><input type="text" value="提示测试" class="input_test" /></div> 
<div><input type="text" value="请输入搜索关键" class="input_test" /></div> 

jQuery代码: 

复制代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> $(function(){ 
$('.input_test').bind({ 
focus:function(){ if (this.value == this.defaultValue){ this.value=""; 
} 
}, 
blur:function(){ if (this.value == ""){ this.value = this.defaultValue; 
} 
} 
}); 
}) </script> 
复制代码

只要在实现的input输入框加上”input_test”这个class就可以轻松实现了 




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档