LeoKim's Blog – 第65页

jquery中的trigger和triggerHandler区别

leokim / 2013年11月8日2013年12月10日 / 未分类

trigger( event, [data] )

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

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

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

什么是JS事件冒泡？

leokim / 2013年11月8日2013年11月8日 / 未分类

在一个对象上触发某类事件（比如单击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();

$(function() {

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

event.stopPropagation();

});

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

2.return false;

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

$(function() {

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

return false;

});

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

由此可以看出：

1.event.stopPropagation();

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

2.return false;

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

还有一种有冒泡有关的：

3.event.preventDefault();

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

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

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

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

leokim / 2013年11月7日2013年12月10日 / 未分类

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的location

leokim / 2013年11月7日2013年12月10日 / 未分类

location.reload()  从服务器端重新载入页面 ;

location.false(true)  从缓存中重新载入。

js 字符串转对象

leokim / 2013年11月6日2013年11月6日 / 未分类

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

就这样…

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

不是插件要求的格式，尼玛坑爹啊不知道做个格式判断－＝…

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

leokim / 2013年11月4日2013年11月4日 / 未分类

尼玛坑爹啊！！！～～

就是那么简单，第二次遇到尽然让我困扰了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’]

leokim / 2013年10月31日2013年12月10日 / 未分类

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选择器大全

leokim / 2013年10月23日2013年12月10日 / 未分类

在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 跨文档消息传输

leokim / 2013年10月16日2013年10月16日 / 未分类

对窗口对象的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属性，可以获取消息发送源的窗口的代理对象。

一	二	三	四	五	六	日
						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