jQuery 操作 html 元素的例子 (input/select/checkbox/radio)

1.inputtext/hidden

 

取得id为textGroup1的元素
$("#textGroup1");

 

取得name为textGroup2的input
$("input[name='textGroup2']");

 

取得所有name为textGroup开头的input，遍历
var vTextGroup = $("input[name^='textGroup']");
vTextGroup.each(function(){
 alert($(this).val());
});

 

取得所有name为textGroup结尾的input

var vTextGroup = $("input[name$='textGroup']");

 

取得所有id为textGroup3的元素，遍历
var vTextGroup = $("*[id*='textGroup3']");
vTextGroup.each(function(){
 alert($(this).val());
});

 

设置id为textGroup1的元素的只读
$("#textGroup1").attr("readonly", true);

 

----------------------------

 

2.select

 

取得name为depart的select
$("select[name='depart']");

 

取得选中的value和text
$("select[name='depart']").find("option:selected").val();
$("select[name='depart']").find("option:selected").text();
$("select[name='depart']").val();

 

获取select选择的索引值
$("select[name='depart']").get(0).selectedIndex;

 

获取Select最大的索引值
$("select[name='depart'] option:last").attr("index");

 

设置Select索引值为1的项选中
$("select[name='depart']").get(0).selectedIndex=1;

 

设置Select的Value值为3的项选中
$("select[name='depart']").val(3);

 

设置Select的disabled(可否编辑)
$("select[name='depart']").attr("disabled", true);
$("select[name='depart']").attr("disabled", false);

 

添加onChange事件
$("select[name='depart']").change(function(){//code...});

 

-----

 

为Select追加一个Option(下拉项)
$("select[name='depart']").append("<optionvalue='add'>AddedValue</option>");

 

为Select插入一个Option(第一个位置)
$("select[name='depart']").prepend("<optionvalue='0'>请选择</option>");

 

删除Select中索引值最大Option(最后一个)
$("select[name='depart'] option:last").remove();

 

删除所有option
$("select[name='depart']").empty();

 

取得所有option，遍历
var vDepart = $("select[name='depart'] option");
vDepart.each(function(){
 alert($(this).val());
});

 

----------------------------

 

3.checkbox

 

取得所有选中的name为departmentId的checkbox，遍历
var vDepartmentAry =$("input[name='departmentId'][type='checkbox']:checked");
vDepartmentAry.each(function(){
 alert($(this).val());
});

 

选中/不选中 checkbox组的第四个元素
$("input[name='departmentId'][type='checkbox']").eq(3).attr("checked",true);

 

选中/不选中value为b2的checkbox
$("input[name='departmentId'][type='checkbox'][value='b2']").attr("checked",true);
$("input[name='departmentId'][type='checkbox'][value='b2']").attr("checked",false);

 

设置value为b3的checkbox的disabled(可否编辑)
$("input[name='departmentId'][type='checkbox'][value='b3']").attr("disabled",true);

 

----------------------------

 

4.radio

 

判断name为groupRadio的radio是否选中，如果选中alert出来
var vCheckedRadioVal =$("input[name='groupRadio'][type='radio']:checked").val();
if (!vCheckedRadioVal) {
 alert('请选择集团')
 return false;
} else {
 alert(vCheckedRadioVal);
}

 

遍历所有name为groupRadio的radio
$("input[name='groupRadio'][type='radio']").each(function(){
 alert($(this).val());
});

 

选中 radio单选组的第二个元素
$("input[name='groupRadio'][type='radio']").eq(1).attr("checked",true);

设置 radio单选组的第一个元素 的disabled(可否编辑)
$("input[name='groupRadio'][type='radio']").eq(0).attr("disabled",true);

 

选中/不选中value为a的radio
$("input[name='groupRadio'][type='radio'][value='a']").attr("checked",false);

 

----------------------------

 

5.Textarea

 

$("textarea[name=xxx]").text("111111aaaaaaadsdddsddsdsds");

----------------------------

 

CSS

toggleClass()对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

 

var parentTr = window.parent.$("#csvTblInfo tr");
parentTr.toggleClass("trCSS001");

----------------------------

 

Style

 

$('#img').attr('style', 'display: inline;');
$('#img').attr('style', 'display: none;');

----------------------------

 

Table

 

$(document).ready(function(){

 // 循环取得table1的每一个tr
 $('#table1 tr').each(function() {

  // 取得每个tr中的第一个td的内容
  alert($(this).find("td:first").text());
 });

 // 取得第一个tr中的第一个td中的input的值
 alert($("#table1 tr:firsttd:first").find("input").val());
});

 

<table id="table1">
 <tr>
  <td>a<inputtype="text" value="111"/></td>
  <td>
   <inputid="allselect" name ="allselect" type="checkbox" value="12.01"/>周五004
  </td>
 </tr>
 <tr>
  <td>b<inputtype="text" value="222"/></td>
  <td>
   <inputid="allselect" name ="allselect" type="checkbox" value="13.01"/>周六005
  </td>
 </tr>
</table>