工作中用到的前端内容整理

1）获取input中的值

html:

<td>姓名：</td>
<td width="50" ><input type="text" id="name" name="name" class="name"></td>

jQuery：

var name = $("#name").val();  // 通过ID获取
var name = $(".name").val();  // 通过class获取

 js:

var name = document.getElementById("name").value;  // 通过ID获取
document.getElementsByName("name").value  //通过name属性获取

document.getElementById("id名")是根据页面id获取元素，在一个页面中元素id必须是惟一 一个，否则用这种方法将取不到其元素。id就相当于我们个人的身份证号一样，在一个世界上，每个人都是唯一的身份证号。如果页面中没有此id，会找不到你要找的元素，就会报null的错误。

 用getElementsByName()用这种方法是根据页面的元素名来获取页面元素，在一个页面中，元素id是唯一的，但是页面的元素名字name可以是重复的，name就比如我们人名一样，在这个世界中，会有重名的存在。假设一个两个名叫汤姆的人在一起，其他人过来找汤姆，就会直接找到两个，在页面中也是一样，这种方法，我们会得到一个数组。如果我们找到某个具体的页面元素，可以在此方法后面添加一个下标"[整数]"，下标是从0开始的，此整数也就是在页面中你要获取的此元素的位置减一。

2）获取radio选中的选项

jQuery：

以性别为例：

html:

<td>性别：</td>
<td id="gender" width="50" height="20">
    <input id="male" type="radio" name="gender" value="男" >男
    <input id="female" type="radio" name="gender" value="女" >女
</td>

jquery:

// 获取性别
var gender = $("input:radio[name = 'gender']:checked").val();

js:

var gender=document.getElementByName("gender");
var selectvalue="";   //  selectvalue为radio中选中的值
for(var i=0;i<gender.length;i++){
      if(gender[i].checked==true) {
            selectvalue=gender[i].value; 
       }
}

 3）获取select标签选中的内容

以民族为例：

html:

<td>民族：</td>
<td width="200">
    <select id="nation" name="nation">
        <option id="han" name="han" value="汉族">汉族</option>
        <option id="man" name="man" value="满族">满族</option>
        <option id="zang" name="zang" value="藏族">藏族</option>
    </select>
</td>

jquery:

$("#nation").change(function(){
    // 获取select下拉选中选中的option的值
    var value = $("#nation option:selected").val();        
});

js:

var myselect=document.getElementById("nation");  //获取select对象：
var index=myselect.selectedIndex ; //拿到选中项的索引，selectedIndex代表的是你所选中项的index
myselect.options[index].value; //拿到选中项options的value：
myselect.options[index].text; //拿到选中项options的text： 

 4）获取checkbox（复选框）选中的内容

以爱好为例：

html:

<td>爱好：</td>
<td id="hobby" class="hobby" colspan="3">
    <label><input id="literature" name="hobby" type="checkbox" value="文学" />文学 </label> 
    <label><input id="sport" name="hobby" type="checkbox" value="体育" />体育 </label> 
    <label><input id="music" name="hobby" type="checkbox" value="音乐" />音乐 </label> 
</td>

jquery:

var hobby = [];
$(".hobby input").each(function() {
    if($(this).prop("checked")) {
     // array.push() :在数组尾部添加新的元素，
    // 并返回新的数组长度。
    hobby.push($(this).val());
    }
});

将hobby数组转为字符串格式

if(hobby.length != 0) {
    // join方法会返回一个字符串。该字符串是通过把 hobby 的每个元素转换为字符串，
    // 然后把这些字符串连接起来，在两个元素之间插入 "、" 字符串而生成的。
    hobby = hobby.join("、");
    hobby = "  爱好：" + hobby;
}

 js:

function show(){
    obj = document.getElementsByName("hobby");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}