jquery中的trigger和triggerHandler区别

trigger( event, [data] )

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个’submit’,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

你也可以触发由bind()注册的自定义事件

什么是JS事件冒泡?

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。  

如何来阻止Jquery事件冒泡?

 

通过一个小例子来解释

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5"%>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Porschev---Jquery 事件冒泡</title>



<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>



</head>

<body>

<form id="form1" runat="server">

<div id="divOne" onclick="alert('我是最外层');">

<div id="divTwo" onclick="alert('我是中间层!')">

<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层!')">点击我</a>

</div>

</div>

</form>

</body>

</html> 

比如上面这个页面,

分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;

他们都有各自的click事件,最里层a标签还有href属性。

 

运行页面,点击“点击我”,会依次弹出:我是最里层—->我是中间层—->我是最外层

—->然后再链接到百度.

 

这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。

事件冒泡过程(以标签ID表示):hr_three—-> divTwo—-> divOne 。从最里层冒泡到最外层。

 

如何来阻止?

 

1.event.stopPropagation(); 

 <script type="text/javascript">

 

        $(function() {

            $("#hr_three").click(function(event) {

                event.stopPropagation();

            });

        });

       

 

<script>

再点击“点击我”,会弹出:我是最里层,然后链接到百度

 

 

 2.return false;

如果头部加入的是以下代码

<script type="text/javascript">

 

$(function() {

$("#hr_three").click(function(event) {

return false;

});

});

 

<script>

再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面

 

由此可以看出:

1.event.stopPropagation(); 

   事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

 

 

2.return false;

   事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

 

 

还有一种有冒泡有关的:

3.event.preventDefault(); 

   如果把它放在头部A标签的click事件中,点击“点击我”。

   会发现它依次弹出:我是最里层—->我是中间层—->我是最外层,但最后却没有跳转到百度

 

    它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

jQuery.extend 函数详解

[转]JQuery的extend扩展方法:
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
      一、Jquery的扩展方法原型是:   

 extend(dest,src1,src2,src3...);


      它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

  var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。


      这样就可以将src1,src2,src3…进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

 

      那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}


      也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

      二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
   1、$.extend(src)
   该方法就是将src合并到jquery的全局对象中去,如:

 $.extend({
  hello:function(){alert('hello');}
  });


   就是将hello方法合并到jquery的全局对象中。
   2、$.fn.extend(src)
   该方法将src合并到jquery的实例对象中去,如:

 $.fn.extend({
  hello:function(){alert('hello');}
 });

 

   就是将hello方法合并到jquery的实例对象中。

   下面例举几个常用的扩展实例:

$.extend({net:{}});

 

   这是在jquery全局对象中扩展一个net命名空间。

  $.extend($.net,{
   hello:function(){alert('hello');}
  })


    这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

   三、Jquery的extend方法还有一个重载原型:  

extend(boolean,dest,src1,src2,src3...)


      第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } ); 


      我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是: 

result={name:"John",last:"Resig",
        location:{city:"Boston",state:"MA",county:"China"}}

 

       也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
                    ); 


     那么合并后的结果就是:

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

 

  以上就是$.extend()在项目中经常会使用到的一些细节。

JS动态生成元素鼠标响应方法 .live()

 

jQuery在动态生成HTML元素后,如果该元素集合中有鼠标点击CLICK事件,这时点击无响应,需要用到.live()方法使生成的动态元素依然保持页面装载后的效果,使鼠标点击事件生效.

jQuery(document).ready(function(){
 var contentTR=$('.info tr:eq(0)').html();
 var e=0;
    $('.addrow').click(function(){
  e=e+1;
  
        $(".info .addrow").parent().parent().before('<tr>' + contentTR + '</tr>');
  $(".info tr:eq("+e+")").find("input:eq(0)").attr("name","a"+e);
  $(".info tr:eq("+e+")").find("input:eq(1)").attr("name","b"+e);
  $(".info tr:eq("+e+")").find("select:eq(0)").attr("name","c"+e);
  $(".info tr:eq("+e+")").find("input:eq(2)").attr("name","d"+e);
  $(".info tr:eq("+e+")").find("input:eq(3)").attr("name","f"+e);
  
  });
  $('.del').live('click',function(){
            $(this).parent().parent().remove();
                });
        });

js 字符串转 对象

eval("("+ $data.buttons +")")

就这样…

在用dialog的时候buttons的参数是obj找了半天 原因是从php传过来的参数是string格式的

不是插件要求的格式,尼玛坑爹啊 不知道做个格式判断 - =…

尼玛 select选择后部触发change的原因

        尼玛坑爹啊!!!~~

        就是那么简单,第二次遇到尽然让我困扰了2次,WTF!!!!!

在做 gvms opreation的时候我们把 panel的框体隐藏起来,display="none" 然后通过id获取全部的html

之后在点击action按钮后将id内的内容用js连接符'+'放到一起在需要的位置展现出来

        

        而这个时候我们是通过select去选择不同的channel展示不同输入框的

        当触发 $("#transfer_action").change的时候触发不了,原因是应为这个时候html里存在2个id为transfer_action的元素,所以导致change不触发。以后再用这种方式写控制的时候一定要记得remove掉之前的内容…

   

$transfer_action_form = $('#transfer_action_form').find('table').tr_level('even').end();
$("#transfer_action_form").remove();

jQuery的选择器中的通配符[id^=’code’]

1.选择器

(1)通配符:

  $("input[id^='code']");//id属性以code开始的所有input标签

  $("input[id$='code']");//id属性以code结束的所有input标签

  $("input[id*='code']");//id属性包含code的所有input标签

(2)根据索引选择

  $("tbody tr:even"); //选择索引为偶数的所有tr标签

  $("tbody tr:odd"); //选择索引为奇数的所有tr标签

(3)获得jqueryObj下一级节点的input个数

  jqueryObj.children("input").length;

(4)获得class为main的标签的子节点下所有<a>标签

  $(".main > a");

(5)选择紧邻标签

  jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有

 

2.筛选器  

//not

  $("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签

 

3.事件

//处理文本框上的键盘操作

jqueryObj.keyup(function(event){

var keyCode = event.which;//获取当前按下键盘的键值,回车键为13

}

 

4.工具函数

$('#someField').val($.trim($('#someField').val()));//消除空格,语法:$.trim(value)

jQuery选择器大全

 

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。

jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。
其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

基本选择器:

$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")                     选择所有的div标签元素,返回div元素数组
$(".myClass")           选择使用myClass类的css的所有元素
$("*")                        选择文档中的所有的元素
可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")

层叠选择器:

$("form input")         选择所有的form元素中的input元素
$("#main > *")          选择id值为main的所有的子元素
$("label + input")     选择所有的label元素的下一个input元素节点
经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")       同胞选择器
该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:

$("tr:first")               选择所有tr元素的第一个
$("tr:last")                选择所有tr元素的最后一个
$("input:not(:checked) + span")   
过滤掉:checked的选择器的所有的input元素
$("tr:even")               选择所有的tr元素的第0,2,4… …个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd")                选择所有的tr元素的第1,3,5… …个元素
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素   
$("td:gt(4)")             选择td元素中序号大于4的所有td元素
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")

内容过滤选择器:

$("div:contains('John')")  选择所有div中含有John文本的元素
$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)")        选择所有含有p标签的div元素
$("td:parent")          选择所有的以td为父节点的元素数组

可视化过滤选择器:

$("div:hidden")        选择所有的被hidden的div元素
$("div:visible")        选择所有的可视化的div元素

属性过滤选择器:

$("div[id]")              选择所有含有id属性的div元素
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']")  选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素
$("input[name*='man']")          选择所有的name属性包含'news'的input元素
$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child")          返回所有的div元素的第一个子节点的数组
$("div span:last-child")           返回所有的div元素的最后一个节点的数组
$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器:

$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text")                     选择所有的text input元素
$(":password")           选择所有的password input元素
$(":radio")                   选择所有的radio input元素
$(":checkbox")            选择所有的checkbox input元素
$(":submit")               选择所有的submit input元素
$(":image")                 选择所有的image input元素
$(":reset")                   选择所有的reset input元素
$(":button")                选择所有的button input元素
$(":file")                     选择所有的file input元素
$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

HTML5 跨文档消息传输

对窗口对象的message事件进行监听 

window.addEventListener("message", function(event) { 
// 处理程序代码 
}, false); 

使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下: 

otherwindow.postMessage(message, targetOrigin);

该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址,可以在URL地址字符串中使用通配符“*”指定全部地址,不过建议使用准确的URL地址。otherwindow为要发送窗口对象的引用,可以通过window.open()方法返回该对象,或通过对window.frames数组指定序号(index)或名字的方式来返回单个frame所属性的窗口对象。 

示例 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
<title>跨文档消息传输示例主文档</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
// 监听message事件。 
window.addEventListener("message", function(event) { 
// 忽略指定URL之外的页面发送的消息。 
if(event.origin != "http://www.blue-butterfly.net") return; 
alert(event.data); // 显示消息。 
}, false); 
$("#iframeContent").load(function(event) { 
// 向子页面发送消息 
this[0].postMessage("Hello", "http://www.blue-butterfly.net/test/"); 
}); 
}); 
</script> 
</head> 
<body> 
<header> 
<h1>跨域通信示例</h1> 
</header> 
<iframe id="iframeContent" width="400" src="http://www.blue-butterfly.net/test/"></iframe> 
</body> 
</html> 

子页面中的代码如下: 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
window.addEventListener("message", function(event) { 
if(event.origin != "http://Lulingniu") return; 
$("#console").append(event.origin).append("传来的消息:").append(event.data); 
// 向主页面发送消息。 
event.source.postMessage("Hello, there is :" + this.location, event.origin); 
}, false); 
}); 
</script> 
</head> 
<body> 
<p>这是iframe中的内容。</p> 
<div id="console"></div> 
</body> 
</html> 

•通过对window对象的message事件进行监听,可以接收消息。 

•通过访问message事件的origin属性,可以获取消息的发送源(本例中主页面的发送源为“http://Lulingniu”,子页面的发送源为“http://www.blue-butterfly.net”)。注意:发送源与网站的URL地址不是一个概念,发送源只包括域名与端口号,为了不接收其他源恶意发送过来的消息,最好对发送源做检查。 

•通过访问message事件的data属性,可以取得消息内容(可以是任何JavaScript对象,使用JSON)。 

•使用postMessage()方法发送消息。 

•通过访问message事件的source属性,可以获取消息发送源的窗口的代理对象。