JavaScript合并两个数组并去除重复项的方法,jQuery实现自动调整字体大小的方法

本文实例分析了JQuery中DOM事件冒泡。分享给大家供大家参考。具体分析如下:

本文实例讲述了jQuery实现自动调整字体大小的方法。分享给大家供大家参考。具体分析如下:

本文实例讲述了JavaScript合并两个数组并去除重复项的方法。分享给大家供大家参考。具体实现方法如下:

什么是冒泡

这里使用一个jQuery函数,自动更改元素中的文本的字体大小。

Array.prototype.unique = function() {
var a = this.concat();
for(var i=0; i
for(var j=i+1; j
if(a[i] === a[j])
a.splice(j, 1);
}
}
return a;
};
//Demo
var array1 = ["a","b"];
var array2 = ["b", "c"];
var array3 = array1.concat(array2).unique();

在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。

$.fn.fontfit = function(max) {
  var max_size = 18;
  if (typeof(max) == "undefined")
    max = max_size;
  $(this).wrapInner('<div id="fontfit"></div>');
  var dheight = $(this).height();
  var cheight = $("#fontfit").height();
  var fsize = (($(this).css("font-size")).slice(0,-2))*1;
  while(cheight<dheight && fsize<max) {
    fsize+=1;
    $(this).css("font-size",fsize+"px");
    cheight = $("#fontfit").height();
  }
  while(cheight>dheight || fsize>max) {
    fsize-=1;
    $(this).css("font-size",fsize+"px");
    cheight = $("#fontfit").height();
  }
  $("#fontfit").replaceWith($("#fontfit").html());
  return this;
}

输出结果:
[“a”,”b”,”c”]

<div id="content">
  外层div元素
  内层span元素
  外层div元素
</div>



<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>

希望本文所述对大家的jQuery程序设计有所帮助。

希望本文所述对大家的javascript程序设计有所帮助。

当单击内部span元素,即触发span元素的click事件时,会输出3条记录。只单击内部span元素,就会触发外部div元素和body元素上绑定的click事件。这是由事件冒泡引起的。在单击span元素的同时,也单击了包含span元素的元素div和包含div元素的元素body,并且每一个元素都会按照特定的顺序响应click事件。

您可能感兴趣的文章:

  • jQuery在页面加载时动态修改图片尺寸的方法
  • jQuery动态修改超链接地址的方法
  • ASP.NET jQuery 实例10
    动态修改hyperlink的URL值
  • jQuery动态改变图片显示大小(修改版)的实现思路及代码
  • jquery实现实时改变网页字体大小、字体背景色和颜色的方法
  • jQuery实现切换字体大小的方法
  • jQuery之字体大小的设置方法
  • jquery更换文章内容与改变字体大小代码
  • JQuery
    改变页面字体大小的实现代码(实时改变网页字体大小)
  • jQuery动态修改字体大小的方法【测试可用】

您可能感兴趣的文章:

  • JavaScript
    数组去重并统计重复元素出现的次数实例
  • javascript获取重复次数最多的字符
  • JavaScript去掉数组重复项的方法分析【测试可用】
  • js数组中删除重复值的代码小结
  • JS实现合并两个数组并去除重复项只留一个的方法
  • JavaScript去掉数组中的重复元素
  • JS两个数组比较,删除重复值的巧妙方法(推荐)
  • js获取数组任意个不重复的随机数组元素
  • JavaScript中数组去除重复的三种方法
  • JS
    在指定数组中随机取出N个不重复的数据
  • JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例

元素的click事件会按照以下顺序“冒泡”。

  1. <span>
  2. <div>
  3. <body>

之所以称为冒泡,是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

事件冒泡引发的问题

事件冒泡可能会引起预料之外的效果。上例中,本来只想触发<span>元素的click事件,然而<div>元素和<body>元素的click事件也同时被触发了。因此,有必要对事件的作用范围进行限制。当单击<span>元素时,只触发<span>元素的click事件,而不触发<div>元素和<body>元素的click事件:当单击<div>元素时,只触发<div>元素的click事件,而不触发<body>元素的click事件。

事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件对象变得比较困难。针对这个问题,JQuery进行了必要的扩展和封装,从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。

在程序中使用事件对象非常简单,只需要为函数添加一个参数,jQuery代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注