前端工作过程遇到的问题总结(四)-jQuery和JS篇

最新推荐文章于 2020-05-12 11:14:24 发布

不一于汝

最新推荐文章于 2020-05-12 11:14:24 发布

阅读量329

点赞数

分类专栏：前端工作遇到的问题前端文章标签：前端工作遇到的问题 jQuery和JS篇

前端同时被 2 个专栏收录

70 篇文章 0 订阅

订阅专栏

前端工作遇到的问题

9 篇文章 0 订阅

订阅专栏

respond.js第六行SCRIPT5：拒绝访问。跨域问题

获取div的各种高度

html判断IE版本

图片验证码加时间戳刷新注意

字符串splice()、split()和slice()方法

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 获取兄弟元素的几种不错方法

原文：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阻止事件冒泡的3种方法之间的不同

什么是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);

不一于汝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端工作过程遇到的问题总结(四)-jQuery和JS篇

目录jQuery鼠标事件汇总jQuery 获取兄弟元素的几种不错方法JS组织事件冒泡的三种方法之间的不同删除字符串最后一个字符的几种方法respond.js第六行SCRIPT5：拒绝访问。跨域问题获取div的各种高度html判断IE版本图片验证码加时间戳刷新注意字符串splice()、split()和slice()方法jQuery鼠标事件汇总原文：jQu...
复制链接

扫一扫