前端JS使用的技巧总结【持续更新】

最新推荐文章于 2022-05-08 10:07:37 发布

小酷

最新推荐文章于 2022-05-08 10:07:37 发布

阅读量1.8k

点赞数 2

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/love_5209/article/details/20357583

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

23、在jsp页面，可以输出得到Java定义的变量，例如：

<%
String str = request.getParameter("name");
%>

</script>

//以前总以为只能通过js才能获得，比如var str=$("#str").val();

22、hover相关：.a1:hover .b1{background-color:blue} .a1:hover .b2{background-color:red}像这种写法，要使其生效必须b1、b2元素包含在a1之内，否则失效。

21、原文：http://blog.sina.com.cn/s/blog_4934a04a0100kmqr.html

去除字符串左右两端的空格，在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim，但在js中却没有这3个内置方法，需要手工编写。下面的实现方法是用到了正则表达式，效率不错，并把这三个方法加入String对象的内置方法中去。
　　写成类的方法格式如下：（str.trim();）
　　<script language="javascript">
　　 String.prototype.trim=function(){
　　 return this.replace(/(^\s*)|(\s*$)/g, "");
　　 }
　　 String.prototype.ltrim=function(){
　　 return this.replace(/(^\s*)/g,"");
　　 }
　　 String.prototype.rtrim=function(){
　　 return this.replace(/(\s*$)/g,"");
　　 }
　　</script>
　　写成函数可以这样：(trim(str))
　　<script type="text/javascript">
　　 function trim(str){ //删除左右两端的空格
　　 return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }
　　 function ltrim(str){ //删除左边的空格
　　 return str.replace(/(^\s*)/g,"");
　　 }
　　 function rtrim(str){ //删除右边的空格
　　 return str.replace(/(\s*$)/g,"");
　　 }
　　</script>

20、http://www.w3school.com.cn/jsref/met_form_submit.asp
DOM元素的submit()方法：该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的onsubmit事件句柄不会被调用。

<html>
<head>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>


<body>
<p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p>


<form οnsubmit="alert('abc')" id="myForm" action="/i/eg_smile.gif" method="get">
名：<input type="text" name="firstname" size="20"><br />
姓：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" οnclick="formSubmit()" value="提交"><!-- 不弹abc -->
<input type="submit" οnclick="formSubmit()" value="提交"><!-- 弹abc -->
</form></body></html>

19、提交校验防止提交表单：在form属性中添加onsubmit事件，里面添加方法进行校验，如果校验通过则提交，否则不提交。需要注意的是，onsubmit需要进行再次判断。
如下：（这种做法将不生效，无论true or false 表单将继续提交）
<script type="text/javascript">function check(){return false;// or return true}</script>
<form οnsubmit="check();" action="1.html"><input type="submit" ></form>
应该：
<script type="text/javascript">function check(){return false;// or return true}</script>
<form οnsubmit="if(!check()){return false;}" action="1.html"><input type="submit" ></form>

18、只能输入数字的另一种写法

<input type="text" value="" onKeyPress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"/>

17、避免使用eval或者Function构建器
使用eval或者function构建器是一件非常消耗资源的操作，因为每次调用script引擎都必须将源代码转换为可执行的代码
var func1 = new Function(functionCode); //避免使用！！
var func2 = eval(functionCode);//避免使用！！

16.清空数组
var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].

15、逗号运算符：逗号运算符，它将先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值。http://blog.csdn.net/wl110231/article/details/8162732
<script>
var a = 10, b = 20;
function CommaTest(){
return a++, b++, 10;
}
var c = CommaTest();
alert(a); // 返回11
alert(b); // 返回21
alert(c); // 返回10
</script>

var a =0;
var b =( a++,99);
console.log(a);// a will be equal to 1
console.log(b);// b is equal to 99

14、不要用delete从数组中删除项目
开发者可以使用split来替代delete去删除数组中的项目。好的方式是使用delete去替换数组中undefined的数组项目，而不是使用delete去删除数组中项目。

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
应该如下使用

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
items.splice(3,1) ;
items.length; // return 10
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
delete方法应该用来删除一个对象属性。

13、在数字0和最大数之间生成一组随机数
var numbersArray = [] , max = 100;
for( var i=1; numbersArray.push(i++) < max;); // numbers = [0,1,2,3 ... 100]

12、自调用（Self-calling）函数
通常被称为自调用匿名函数或即刻调用函数表达式（LLFE）。当函数被创建的时候就会自动执行，如下：

(function(){
// some private code that will be executed automatically
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)

11、页面使用过多的id有没有问题？按照正常情况下是没有问题的，只要id不冲突。但对于网页的重构重用，就比较难维护修改了。如果重复会棘手，取名的时候可以考虑 id="页面名_标签名_含义名"

10、target=“_blank” 关于target的取值如下：
_blank：在新窗口打开页面
_self：在当前窗口打开，也可能是当前框架
_parent：在父框架中打开新页面
_top：在整个窗口中打开新页面
framename：在指定的框架中打开被链接文档
由此可见，当target="_blank"与target="blank"的意思是不一样的，target="blank"这个没有任何错误，对比上面的取值情况可以看出，这个应该是framename，如果页面中有这个一个frame，那么一切正常；但是如果没有的话，走的逻辑是这个：如果指定的姿势有误，那么浏览器就会新开一个窗口，给这个窗口一个标识，然后将文档打开。
简单的举一个例子：A页面有几个链接，target属性的值是blank，那么当你打开页面的时候，确实在新窗口打开了。我们小心翼翼的在打开的页面看下window.name会发现值是blank，这个时候如果再打开A页面的其他链接，会发现并没有在新窗口打开，而是覆盖掉了刚才打开的页面。因为target指定的值是一样的
总结一下就是：blank不是属性值，而是framename，所以这里是不是blank都无所谓，随便一个字符串都行。

9、$(selector).each(); 对于隐藏的选择题没有效果，可以采用delegate()

8、元素绑定click事件里面最好不要包含本身的toggle事件（toggle()本身就是两次或多次click事件），这样避免莫名其妙的错误。
如：（避免以下做法）
$("#e").click(function(){
doSomething(...);
$(this).toggle(...);
});
实在需要用toggle事件，同时也click单击做其他事时，可以将click事件放在toggle里面，如：
$("#e").toggle(
function(){
doSomething(...);
clickEvent();
},
function(){
doOtherthing(...);
clickEvent();
}
);

7、如何将a标签变成普通的文本颜色，并且使其没有点击事件，没有hover属性等。
看第一个例子，没有绑定事件的。

<html>
<head>
<style type="text/css">
a{
//pointer-events: none;
text-decoration: none;
cursor: default;
}
a:visited{
color:black;
}
</style>
</head>
<body>
<a href="#" >test</a>
</body>
</html>

假如上面的例子绑定了click事件，还是会触发的。
看第二个例子

<html>
<head>
<style type="text/css">
a{
pointer-events: none;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" οnclick="alert('click');">test</a>
</body>
</html>

绑定了事件，使用pointer-events:none让事件不生效。

6、给元素添加事件时，要考虑到该元素之前是否有相同的事件，通常使用addEventListener()来追加，当然对于IE下可使用attachEvent()，兼容各个浏览器的话可对2个函数进行修正一下

5、当层次嵌套时需注意事件的捕获或冒泡，比如一个div内放一个div，需要对内层div添加onclick事件时，要注意事件冒泡事件，w3c可以使用event.stopPropagation()，IE使用设置cancelBubble设置为true。另外可利用event.preventDefault()去除原本事件

4、jquery层次选择器的使用：
层次选择器——通过元素之间的层次关系获取特定元素。例如后代元素、子元素、相邻元素和同辈元素等。
　　$("a b")选取a元素里的所有后代b元素
　　$("a>b")选取a元素下的子元素b，这里是直接后代关系
　　$("a+b")选取紧邻在a元素后的b元素（同辈元素）,可用next()方法代替

　　$("a~b")选取a元素后的所有同辈元素b，可用nextAll()方法代替

3、jquery对象和DOM对象的区别：
DOM（文档对象模型）每一份DOM都可以表示成一棵树，DOM对象可以使用javascript方法。jquery对象就是通过jquery包装DOM对象产生的对象。jquery对象是jquery独有的。在jquery对象中无法使用DOM对象的任何方法，DOM对象也不能使用jquery里的方法。
jquery对象转化为DOM对象方法：
var $cr=$("#cr");var cr=$cr[0]
var $cr=$("#cr");var cr=$cr.get(0);
DOM对象转化为jquery对象方法：
　　var cr=document.getElementById("cr");
　　var $cr=$(cr)；
　　
　　解决jquery与其他库的冲突可以用jQuery.noConflict()函数。具体可见：http://www.w3school.com.cn/jquery/core_noconflict.asp
var j = jQuery.noConflict();

j("div p").hide(); // 基于 jQuery 的代码

$("content").style.display = "none"; // 基于其他库的 $() 代码

2、当使用的层级多的时候，有时候会碰见如设置的事件不生效等问题，可以在firefox或chrome对其进行审查元素，确定是否有元素挡在其上面，如果有可以将下层的z-index设置得比上层高即可躲过上层的遮罩，另一种方法可以使用css3新属性pointer-events: none;将该属性应用于上层即该层不再捕获任何click事件（点击时即可穿透该层）

1、灵活使用“隐藏”。通常的隐藏元素有display:hide 还有visibility:hidden。两者区别可见：http://blog.csdn.net/love_5209/article/details/19916557
当对于一个元素初始设置为以上任一种时，该元素绑定的事件也将不生效，那么假如要鼠标经过display:hide的元素，让其显示，该怎么做呢？
解决办法有2个：
第一，可以在隐藏元素外层嵌套一层div并设置鼠标经过事件，让其改变隐藏元素的display为inline或block；
第二，不使用display:hide，使用css3的透明度opacity:0，然后鼠标经过事件则改变opacity:1即可（注：IE不支持该属性）

小酷

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端JS使用的技巧总结【持续更新】

17、避免使用eval或者Function构建器使用eval或者function构建器是一件非常消耗资源的操作，因为每次调用script引擎都必须将源代码转换为可执行的代码var func1 = new Function(functionCode); //避免使用！！var func2 = eval(functionCode);//避免使用！！16.清空数组 va
复制链接

扫一扫