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