Javascript and jQuery基本api

之前一直喜好用纯javascript操作DOM。最近了解jQuery，这里整理一些基本的操作DOM与数据的方法。

1.获取和设置输入框的值。

• 原生Javascript

<input id="name"></input>

<script>
    var value = document.querySelectorAll("#name")[0].value;

    document.querySelectorAll("#name")[0].value = "new value";
</script>

querySelectorAll()是非常强大的javascript原生方法。

• jQuery

<input id="name"></input>

<script>
    var value = jQuery("#name").val();

    jQuery("#name").val() = "new value";
</script>

2.获取和设置下拉框的选中项。

• 原生Javascript

<select id="name">
    <option value="China">China</option>
    <option value="USA">USA</option>
</select>

<script>
    var value = document.querySelectorAll("#name")[0].value;

    document.querySelectorAll("#name")[0].value = "USA";
</script>

• jQuery

<select id="name">
    <option value="China">China</option>
    <option value="USA">USA</option>
</select>

<script>
    var value = jQuery("#name").val();

    jQuery("#name").val("USA");
</script>

3.下拉框选项改变事件。

• 原生Javascript

<select id="name" onchange="change(this)">
    <option value="China">China</option>
    <option value="USA">USA</option>
</select>

<script>
    function change(select){
        alert(select.value);
    }
</script>

• jQuery

<select id="name" onchange="change(this)">
    <option value="China">China</option>
    <option value="USA">USA</option>
</select>

<script>
  jQuery("#name").change(function(){
    alert(jQuery(this).val());
  });
</script>

4.获取Checkbox的值。

• 原生Javascript

<input id="name" type="checkbox" onchange="change(this)"></input>

<script>
    function change(checkbox){
        alert(checkbox.checked);
    }
</script>

勾选时值为true，未勾选值为false。

• jQuery

<input id="name" type="checkbox"></input>

<script>
    jQuery("#name").change(function(){
        alert(this.checked);
    });
</script>

5.点击按钮事件。

• 原生Javascript

<button id="name" onclick="sayHi()">Come On</button>

<script>
    function sayHi(){
        alert("Hi!");
    }
</script>

• jQuery

<button id="name">Come On</button>

<script>
  jQuery("#name").click(function(){
    alert("Hi");
  });
</script>

6.循环遍历元素。

• 原生Javascript

<input id="name1" name="option" type="checkbox"></input>
<input id="name2" name="option" type="checkbox"></input>
<input id="name3" name="option" type="checkbox"></input>

<button id="name" onclick="showCheckboxStatus()">Come On</button>

<script>
    function showCheckboxStatus(){
        var checkboxs = document.querySelectorAll("input[name='option']");
        for(var i = 0; i < checkboxs.length; i++){
            alert(checkboxs[i].checked);
        }
    }
</script>

勾选时值为true，未勾选值为false。

• jQuery

<input id="name1" name="option" type="checkbox"></input>
<input id="name2" name="option" type="checkbox"></input>
<input id="name3" name="option" type="checkbox"></input>

<button id="name">Come On</button>

<script>
    jQuery("#name").click(function(){
        jQuery("input[name='option']").each(function(){
            alert(this.checked)
        });
    });
</script>

7.新增页面元素。

• 原生Javascript

<div id="parent">
</div>
<button id="name" onclick="addNew()">Come On</button>

<script>
    function addNew(){
        var newElement = document.createElement("input");
        newElement.setAttribute("type", "text");
        newElement.setAttribute("value", "Hi");
        var parentDiv = document.querySelectorAll("#parent")[0];
        parentDiv.appendChild(newElement);  
    }
</script>

• jQuery

<div id="parent">
</div>
<button id="name">Come On</button>

<script>
    jQuery("#name").click(function(){
        jQuery("#parent").append(
            "<p>I'm the new comer!</p>"
        );
    });
</script>

jQuery创建新元素的方式更像”直接量”的方式，快速，直观。
原生javascript的方式更像标准的创建变量流程，稍显繁琐，但是当我们需要创建的元素的一些属性为动态值时，这种方式更为整洁，易读。

8.删除页面元素。

• 原生Javascript