javascript 前端学习经验总结

javascript

HTML编码规范-属性次序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

    class
    id, name
    data-*
    src, for, type, href
    title, alt
    aria-*, role

console.debug

• 屏蔽测试代码：

var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
window.console = {};
for (var i = 0; i < names.length; ++i)
window.console[names[i]] = function() {}

• 禁止所有表格提交出去

<script>
$(document).ready(function(){
  $("form").submit(function(e){
   e.preventDefault;
  });
});
</script>

jquery selector

• selector
  

  在jQuery中去选择一个元素，不论元素存在与否，选择器都是一个对象类型，其typeof 为object;若元素不存在，其length属性为0
  若是数组，遍历其中每一个元素，再做判断。选择器选择的某个元素是否存在，且唯一 若是对象，length===1，若需判断内容非空;
  若是字符串，value()应该不是空的字符串，$().value() length!===0;

联合选择器
$(".panel.panel-info")//无空格表示子类选择，在.panel下找.panel-info
$(".panel. panel-info")//属于css联合选择器。选择.panel类元素下的所有.panel-info类子元素，联合选择器如下所示

联合选择器	示例	解释
element,element	div,p	选择所有<div>元素和<p>元素
element element	div p	选择<div>元素内的所有<p>元素
element>element	div>p	选择所有父级是 <div> 元素的<p>元素
element+element	div+p	选择所有紧接着<div>元素之后的<p>元素

* focus blur 那些元素可以获得焦点呢？

• a elements that have an href attribute
• link elements that have an href attribute
• button elements that are not disabled
• input elements whose type attribute are not in the Hidden state and that are not disabled
• select elements that are not disabled
• textarea elements that are not disabled
• command elements that do not have a disabled attribute
• Elements with a draggable attribute set, if that would enable the user agent to allow the user to begin a drag operations for those elements without the use of a pointing device
  Each shape that is generated for an area element

除上面以外的元素（比如：div，p）一般都无法直接获得焦点，那如何处理呢？ 给元素添加 tabindex 属性,对使无法直接获得焦点的元素获得焦点的最佳实践就是：给元素添加 `tabindex = -1`

The tabindex content attribute specifies whether the element is focusable, whether it can be reached using sequential focus navigation, and the relative order of the element for the purposes of sequential focus navigation.
If the value is a negative integer: The user agent must allow the element to be focused, but should not allow the element to be reached using sequential focus navigation.

• each() 方法为每个匹配元素规定要运行的函数 $(selector).each(function(index,element))
  example：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      $(this).click(function(){
          alert($(this).text());
      })
    });
  });
});
</script>

对选中的元素中的每一个元素绑定事件时，不能用如下方式的循环语句，因为当文档加载完场后，i的值已经等于x.length;当单击事件触发后，i的值为x.length,因此，x.eq(i).length===0，因此，x.eq(i)实际上成为一个空元素，其text()方法返回结果自然为空。

$(document).ready(function(){
  $("button").click(function(){
    x=$("li");
      for (i=0;i<x.length;i++)
      {
        x.eq(i).click(function (){
             alert(x.eq(i).text());
             console.error(x.eq(i).length);
        });
      }
  });
});
</script>

form

• form input type="upload"
  

  包含文件上传的表单应包括以下属性：
  enctype="multipart/form-data"
target="upload_target"

表单中enctype=”multipart/form-data”的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.
enctype=”multipart/form-data”是上传二进制数据; form里面的input的值以2进制的方式传过去。

target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。
格式如下：

<form target="_blank|_self|_parent|_top|framename">

notes: 在 HTML5 中，不再支持 frame 和 frameset，所以 _parent、_top 和 framename 值大多用于 iframe。

• select checkbox radio
  

  采用checkbox对象的isChecked()方法确定checkbox是否被选中
  jQuery( ":checked" ) The :checked selector works for checkboxes, radio buttons, and options of select elements.
  To retrieve only the selected options of select elements, use the :selected selector.

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Instead, drop the ID, and then select them by name, or by a containing element:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

And now the jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

(.is())

Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

is(":checked")

• form submit event
  为form的submit事件添加验证函数，而不是为对象添加

jquery ajax

• convert json into javascript object
  JSON.parse(data)

• 声明一个变量但没有赋值，此时这个变量的值为undefined. Undefined用作数字时类型表现为NaN, 用作布尔时表现为false.

• sort 方法返回一个元素已经进行了排序的 Array 对象。

Array.prototype.sort()

Syntax
arr.sort()
arr.sort(compareFunction)

f compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in Unicode code point order. For example, “80” comes before “9” in Unicode order.

var scores = [1, 10, 21, 2]; 
scores.sort(); // [1, 10, 2, 21]
// Watch out that 10 comes before 2,
// because '10' comes before '2' in Unicode code point order.

To compare numbers instead of strings, the compare function can simply subtract b from a. The following function will sort the array ascending (if it doesn’t contain Infinity and NaN):

function compareNumbers(a, b) {
  return a - b;
}

var cc=[
{ name: "a", age: 30},
{ name: "c", age: 24},
{ name: "b", age: 28},
{ name: "e", age: 18},
{ name: "d", age: 38}
].sort(function(obj1, obj2) {
return obj1.age - obj2.age;
});
for(var i=0;i<cc.length;i++){
alert(cc[i]['age']); //依次显示 18,24,28,30,38
}