前台开发总结09_20170728

一、正则表达式中中括号表达式 [] 注意事项
大多数特殊字符在中括号表达式中失去它们的意义，但是以下特殊字符除外
1、] :如果 ] 字符不是第一项，它结束一个列表，若要匹配列表中的 ] 字符，请将它放在第一位，紧跟在开始 [ 后面
2、\ :转译符。若要匹配 \ 字符，请使用 \\
3、- :连字符。在中括号表达式中使用连字符有两种方法：使用转译符 [\-] ；或者将连字符放在中括号列表的开始或结尾 [-a-z] [a-z-]
注意：在中括号表达式中使用连字符时，必须按照Unicode排序顺序，开始值必须在结束值的前面。

二、在HTML中，我们经常需要在文本中加入空格。但是根据HTML的规则，无论你在HTML标签中使用了多少个空格，HTML只显示一个。
通常，我们的解决方法有如下两个，
1、使用   来表示一个半角空格。缺点，我们通常需要写许多连续的  
2、在需要添加空格的位置插入一个行内块级元素，用它来代替空格。缺点，代码的可阅读性和性能都要受到一定影响。
现在，我们有第三种方法，可以解决此类问题。
3、在需要加空格处，先写   ，然后在它后面加空格。

<p>这是测试用例，仅供         测试使用</p>

三、HTML表单提交中，可以通过使用ajax或者<form target="_blank">来实现表单提交两次的需求。

四、在JS获取DOM元素时，根据ES规范，需要通过document.getElementBy...来获取，非常麻烦。
为了减少代码量，增强代码的可阅读性，我们可以在JS中创建获取DOM元素的方法，如下所示：

<script>
function $_(id){
return document.getElementById(id);
}
//获取DOM元素时，如下使用
$_("div1").style.backgroundColor="green";
</script>

五、jQuery中$(this)的使用
当在对象的方法中使用$(this)时，这个$(this)指代的是这个对象。

$("#demo").click(function(){
console.log($(this));
});

当在JS方法中使用$(this)时，这个$(this)指代的是window，即$(window)

function demo(){
console.log($(this));
}

当若是想在JS方法中使用，可以如下书写。

//html中
<p onclick="demo(this)">测试数据</p>
//js中
function demo(item){
console.log($(item));
}

六、使用stopPropagation()可以阻止事件传播,分为以下两种情况：
1、在js或jQuery中，通过元素对象绑定的事件
示例代码如下所示：

//JS中
document.getElementById("demo").onclick=function(e){
e.stopPropagation();
}
//jQuery中
$("#demo").click(function(e){
e.stopPropagation();
});

注：在jQuery中也可以使用 return flase;代替 e.stopPropagation(); 阻止事件的传播，但是在JS中不行。

2、HTML元素调用事件时，将 event 作为参数传入JS方法
示例代码如下所示：

<input type="button" value="点击" class="but1" onclick="demo(event)">
<script>
function demo(e){
e.stopPropagation();  //不能停止事件传播
}
</script>

七、直接内嵌在html文件中的代码中只要碰到</script>就表示代码结束。就算</script>写在字符串中也一样。
你可以写成 "<script><\/script>" 或者 "<script></scr"+"ipt>"

就算div.innerHTML = "<script><\/script>";这样写了也不行。
因为用innerHTML设置的 script标签中的代码不会加载和执行。

你可以用 document.createElement()创建script标签，然后用 appendChild()添加到页面上。

另外，用jquery是可以 html("<script><\/script>") 这样加载和执行script标签的，这是因为jquery的html()方法中会单独提取script标签用上面的方法加载和执行。

秒客网

前台开发总结09_20170728

相关文章