Jquery -- 常用选择器 和 div/select/radio/checkbox的使用

一、控制html显示与隐藏：display 和visibility

display：元素的位置不被占用
 <div id="div1" style="display:block;">DIV 1</div>
 <div id="div2" style="display:none;">DIV 2</div> 
visibility：元素的位置仍被占用
<div id="div3" style="visibility:visible;">DIV 3</div>
 <div id="div4" style="visibility:hidden;">DIV 4</div>

 jQuery实现
 $("#divX").hide(); 
$("#divX").show();
 $("#divX").toggle();
 <a target=_blank href="http://www.w3school.com.cn/jquery/jquery_hide_show.asp">jQuery 效果 - 隐藏和显示</a>

 JS实现（不能混用）
 function mySwitch(){
 document.getElementById('123').style.display = document.getElementById('123').style.display=='none'?'block':'none'; 
}

 eg：
<tr id="pushTitle"> 
  <td class="td_left">         
    <label for="name">推送标题：</label> 
  </td>     
  <td  class="td_right">          
    <input name="title" style="width:171px;"> 
  </td>
</tr>
$("#pushTitle").show();

$("#pushTitle").hide();

二、下拉框select的使用

js 操作select 下拉框

<tr>
    <td class="td_left">推送类型：</td>
    <td class="td_right"> 
        <select id="pushType" οnchange="valueChange()" name="pushType">
            <option id="pushMessage" value="0">消息</option>
            <option id="pushNotifi" value="1" selected >通知</option>
        </select>
    </td>
</tr>
事件：
onChange="valueChange();"

获取：
 1、获取select对象长度：
seletor.length;

2、获取select对象选中项的值(value)：
selector.val();   // 选中消息："0"；选中通知："1"

3、获取select对象选中项的文本（text）：
$("#pushType option:selected").text();  // 选中消息："消息"；选中通知："通知"

4、获取select选中项的索引值（selectedIndex）：
$("#pushType").get(0).selectedIndex; // 选中消息：0；选中通知：1（number）

5、获取指定下拉框选项 ：
$("#selId").find("option:selected");
“option:selected”为选中项，“option:first”为首项（索引值为0），“option:last”为末项（索引值最大） 

6、获取下拉框选项值为“xxx”的选项：
$("#selId option[value='xxx']")；
//$("#selId option[text='xxx']");
 //$("#selId option[index='x']");  
// 对于text和index无效，建议不要使用

7、设置：设置选中项： $("#pushType").get(0).selectedIndex = 1;
// 设置select value为"xxx"的为选中项 
$("#selId").attr("value","xxx“);
$("#selId").val("xxx");
$("#selId").get(0).value = "xxx";

8、 添加下拉框选项:
$("#selId").append("<option value='Value'>Text</option>");
“append”在下拉框末尾添加，添加后此项索引值最大； “prepend”在下拉框的首部添加，添加后此项索引值为0
$("#selId").prepend("<option value='Value'>Text</option>");


9、 移除下拉框选项：
$("#selId option[value='xxx']").remove(); 

移除下拉框选项值为“xxx”的选项


10、 清空下拉框所有选项:
$("#selId").empty();
$("#selId option").remove();

 

三、单选框radio的使用

<td class="td_right" id="why">
	<input id="jishi" type="radio" name="timerSign" value="0" οnclick="setTimer();" checked="checked" />即时发送
	        
	<input id="dingshi" type="radio" name="timerSign" value="1" οnclick="setTimer();" />定时发送
	<input id="sendDate" name="arrivalDate" disabled  onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/> (定时任务大于当前时间一分钟，单播不支持定时)
</td> 

四、复选框checkbox的使用

<tr>
    <td class="td_left">
        <label for="pushObj">推送对象：</label>
    </td>
    <td id="pushObj" class="td_right">
        <input id="Android" type="checkbox" name="pushObj" οnclick="checkBox($(this));"  value="0" checked/><label>Android</label>
        &nbsp;  &nbsp;  &nbsp; 
        <input id="iOS" type="checkbox" name="pushObj" οnclick="checkBox($(this));" value="1" checked/><label>iOS</label>
    </td>   
</tr>
使用$("[name='checkbox']:checked")这种方法才可以正确取到radio/checkbox组的被选中的控件的集合

// 根据id获取
var pushObj = $("#pushObj [name='pushObj']:checked") 

// var pushObj = $("#pushObj").find(":checkbox");

// 使用jquery判断checkbox是否选中
$("#iOS").is(":checked") // 返回true or false ，使用attr("checked")不能判断

// 使用jquery改变checkbox选中状态
$("input:checkbox[name='pushObj']").prop('checked', false); // 所有的checkbox改变状态，不能使用attr("checked","checked") 和 removeAttr("checked");