目录
respond.js第六行SCRIPT5:拒绝访问。跨域问题
jQuery鼠标事件汇总
原文:jQuery鼠标事件汇总
- click事件:点击鼠标左键时触发
$('p').click(function(){});
- dbclick事件:迅速连续的两次点击时触发
$('p').dbclick(function(){});
- mousedown事件:按下鼠标时触发
$('p').mousedown(function(){});
- mouseup事件:松开鼠标时触发
$('p').mouseup(function(){});
- mouseover事件:鼠标从一个元素移入另一个元素时触发;mouseout事件:鼠标移出元素时触发
$('p').mouseover(function(){});
$('p').mouseout(function(){});
- mouseenter事件:鼠标移入元素时触发; mouseleave事件:鼠标移出元素时触发
$('p').mouseenter(function(){});
$('p').mouseleave(function(){});
- hover事件:鼠标浮动在其上的元素时触发
$('p').hover(
function(){},
function(){}
);
- toggle事件:鼠标点击切换事件
$('p').toggle(
function(){},
function(){}
);
jQuery 获取兄弟元素的几种不错方法
- 获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression.
如果要获取下例中所有的h1的直接兄弟元素h2
<div>
<h1>Main title</h1>
<h2>Section title</h2>
<p>Some content...</p>
<h2>Section title</h2>
<p>More content...</p>
</div>
可以直接使用 :
$('h1 + h2')
// Select ALL h2 elements that are adjacent siblings of H1 elements.
如果要过滤h1的兄弟元素,当然也可以使用 :
$('h1').siblings('h2,h3,p');
// Select all H2, H3, and P elements that are siblings of H1 elements.
- 如果要获取当前元素之后的所有兄弟元素,可以使用nextAll()
代码如下:
<ul>
<li>First item</li>
<li class="selected">Second Item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>
如果要获取第二个条目之后的所有li元素,可以使用如下代码 :
$('li.selected').nextAll('li');
上例也可以使用general sibling combinator (~)来实现 :
$('li.selected ~ li');
获取直接兄弟元素也可以不使用selector,直接使用next(). :
var topHeaders = $('h1');
topHeaders.next('h2').css('margin', '0);
JS组织事件冒泡的三种方法之间的不同
- 什么是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。从最里层冒泡冒泡到最外层。
- 如何来阻止?
- event.stopPropagation();
<script type="text/javascript"> $(function() { $("#hr_three").click(function(event) { event.stopPropagation(); }); }); <script>
/再点击“点击我”,会弹出:我是最里层,然后链接到百度
-
return false;
<script type="text/javascript"> $(function() { $("#hr_three").click(function(event) { return false; }); }); <script>
再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面
由此可以看出:
- event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)
- return false;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
还有一种跟冒泡有关的:
- event.preventDefault();
如果把它放在头部A标签的click事件中,点击“点击我”。
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
删除字符串最后一个字符的几种方法
字符串:string s = "1,2,3,4,5,"
目标:删除最后一个","
方法:
- 用的最多的是Substring
s = s.Substring(0,s.length -1)
- 用RTrim
s = s.ToString().RTrim(',')
- 用TrimEnd,这个方法和RTrim差不多,区别是这个传递的是一个字符数组,而RTrim可以是任何有效的字符串
s=s.TrimEnd(',')
//如果要删除"5,",则需要这么写
char[] MyChar = {'5',','};
s = s.TrimEnd(MyChar);
//s = "1,2,3,4"
类似函数
TrimStart、LTrim等,还有一个TrimToSize对提高性能能有微弱的好处
respond.js第六行SCRIPT5:拒绝访问。跨域问题
原文:respond.js第六行 SCRIPT5: 拒绝访问。跨域问题
问题描述:respond.js第六行 SCRIPT5: 拒绝访问。昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹,所以提前准备了这两个文件准备现场那一个半成品加进去做测试,但是发现没有作用,还报错了,没想到在这翻了个跟头,在这里mark一下。
出现的问题:respond.js第6行 SCRIPT5: 拒绝访问。看了一下源码:是这个样子的。
当时情况比较尴尬,没想到什么有用的解决途径,最后查了下资料,respond.js 由于使用 file:// 协议,IE8 是无法调起本地文件的。所以解决办法就是起一个服务器,在服务器端执行ajax就解决的这里的跨域问题。
主要是respond.min.js 用于解决 ie6-ie8媒体查询 兼容问题;
1、 需把文件置于服务器上,iis下运行
2、包含媒体查询的 css文件需 采用外链形式
3、头部引用的respond.min.js 需置 于css 文件之后;
4、头部引用的respond.min.js 文件必须放在本html页内,如shtml文件提出公共部分后则无效;
获取div的各种高度
- 获取div的文档总高度(必须DOM操作):
var scrollHeight=document.getElementById("inner").scrollHeight;
// jq中没有scrollHeight -只有scrollTop():
// 所以用DOM操作获取元素并计算scrollHeight。
- 获取div的窗口显示高度:
var height=$("#inner").height()
//或
var height=document.getElementById("inner").offsetHeight
- 获取div的卷上去高度:
var scrollTop=$("#inner").scrollTop();
//或
var scrollTop=document.getElementById("inner").scrollTop;
- 三者关系:
scrollHeight >= height + scrollTop
- 获取div文档(body)顶部的高度:
$(“#inner”).offset().top
- 获取div距离父元素顶部的距离:
$(“#inner”).position().top
- 获取div距离窗口(window)顶部的距离
(“#inner”).offset().top - (“body”).scrollTop()
html判断IE版本
原文:html判断IE版本
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
图片验证码加时间戳刷新注意
<img style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"
src="/cms/htmlCode.jsp"
id="imgcode"
onclick="imgCode()"
>
js:
<script type="text/javascript">
function imgCode(){
document.getElementById("imgcode").src='/cms/htmlCode.jsp?a='+new Date();
}
</script>
字符串splice()、split()和slice()方法
- 作用对象
split()方法是对字符串的操作;splice()和slice()是对数组的操作。slice()也可用于字符串
- 参数
- split(separator,howmany)参数有两个,separator为必选项,表示分割字符串的符号;如",", ":", "|"等。howmany为可选项,表示分割后返回的结果长度
- splice(index,howmany,item1,item2,item...)参数至少两个,index为必选项,表示操作数组的起始位置,负数表示从倒数开始。howmany为必选项,表示从起始位置开始要替换或删除几个元素。item为可选项目,表示要替换的新元素,有则替换没有则表示删除。
- slice(start,end)参数有两个,start为必填字段,end为选填字段,返回一个新的数组,包含从start到end的元素
- 返回值
- split() 返回一个字符串数组。
- splice() 返回被删除的元素组成的数组即如果使用arr = arr.splice()的方法将会返回一个被截取的部分,而arr.splice后调用arr将会返回一个截取后的新数组
- slice() 返回一个新的数组,包含从start到end(不包含该元素)的arrayObject中的元素
- 注意事项
- splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改,也就说使用了 demo.slice()方法之后demo还是demo,而使用了demo.splice()之后demo将发生改变。
- split()和slice()方法一样,不会对原数组进行改变,想要获取改变后的数组需要进行赋值操作。即、demo = demo.slice(start,end);