jQuery 元素操作大雜匯

$('#id').parent() 當前元素的父級節點

$('#id').siblings() 當前元素所有的兄弟節點

$('#id').prev() 當前元素前一個兄弟節點

$('#id').prevaAll() 當前元素之前所有的兄弟節點

$('#id').next() 當前元素之後第一個兄弟節點

$('#id').nextAll() 當前元素之後所有的兄弟節點

方法都可以添加選擇器,給出選擇條件

如:

$('#id').parent('.a') 找出calss爲a的父級節點
--------------------- 

Jquery 獲取 radio選中值

Radio    

 

  

 


1.獲取選中值,三種方法都可以:

$('input:radio:checked').val();

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

2.設置第一個Radio爲選中值:

    $('input:radio:first').attr('checked', 'checked');

或者

$('input:radio:first').attr('checked', 'true');

注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)

3.設置最後一個Radio爲選中值:

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

4.根據索引值設置任意一個radio爲選中值:

$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....

或者

$('input:radio').slice(1,2).attr('checked', 'true');

5.根據Value值設置Radio爲選中值

$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');

或者

$("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');

6.刪除Value值爲rd2的Radio

$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();

7.刪除第幾個Radio

$("input:radio").eq(索引值).remove();索引值=0,1,2....

如刪除第3個Radio:$("input:radio").eq(2).remove();

8.遍歷Radio

$('input:radio').each(function(index,domEle){

     //寫入代碼

});

 

 

DropDownList

 

 

 

 

 

 

 

1.   獲取選中項:

獲取選中項的Value值:

      $('select#sel option:selected').val();

     或者

       $('select#sel').find('option:selected').val();

獲取選中項的Text值:

      $('select#seloption:selected').text();

     或者

       $('select#sel').find('option:selected').text();

2.   獲取當前選中項的索引值:

$('select#sel').get(0).selectedIndex;

3.   獲取當前option的最大索引值:

$('select#sel option:last').attr("index")

4.   獲取DropdownList的長度:

$('select#sel')[0].options.length;

或者

$('select#sel').get(0).options.length;

5.  設置第一個option爲選中值:

$('select#sel option:first').attr('selected','true')

或者

 $('select#sel')[0].selectedIndex = 0;

 

子串匹配屬性選擇器
下面爲您介紹一個更高級的選擇器模塊,它是 CSS2 完成之後發佈的,其中包含了更多的部分值屬性選擇器。按照規範的說法,應該稱之爲“子串匹配屬性選擇器”。

很多現代瀏覽器都支持這些選擇器,包括 IE7。

下表是對這些選擇器的簡單總結:

類型	描述
[abc^="def"]	選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]	選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]	選擇 abc 屬性值中包含子串 "def" 的所有元素

 

Query獲取Select選擇的Text和Value: 
語法解釋: 

1. $("#select_id").change(function(){//code...});    //爲Select添加事件,當選擇其中一項時觸發
2. var checkText=$("#select_id").find("option:selected").text();   //獲取Select選擇的Text
3. var checkValue=$("#select_id").val();   //獲取Select選擇的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex;   //獲取Select選擇的索引值

5. var maxIndex=$("#select_id option:last").attr("index");   //獲取Select最大的索引值

jQuery設置Select選擇的Text和Value: 
語法解釋: 

1  $("#select_id ").get(0).selectedIndex=1;   //設置Select索引值爲1的項選中
2  $("#select_id ").val(4);    //設置Select的Value值爲4的項選中
3  $("#select_id option[text='jQuery']").attr("selected", true);    //設置Select的Text值爲jQuery的項選中 

jQuery添加/刪除Select的Option項: 
語法解釋: 

1  $("#select_id").append("<option value='Value'>Text</option>");   //爲Select追加一個Option(下拉項)
2  $("#select_id").prepend("<option value='0'>請選擇</option>");   //爲Select插入一個Option(第一個位置)
3  $("#select_id option:last").remove();   //刪除Select中索引值最大Option(最後一個)
4 $("#select_id option[index='0']").remove();   //刪除Select中索引值爲0的Option(第一個)
5 $("#select_id option[value='3']").remove();   //刪除Select中Value='3'的Option
6 $("#select_id option[text='4']").remove();   //刪除Select中Text='4'的Option

 

jquery獲取select下拉框的值以及change時間綁定

下拉框一般是綁定onchange時間,對應jquery的change,一般要獲取下拉框的值和索引進行操作

<select id="bidder_way" name="bidder_way" style="width:207px;" class="normal">
<option value="">--選擇投標人的方式--</option>
<option value="比選">比選</option>
<option value="指定">指定</option>
</select>

<script>
$(function(){
$("#bidder_way").change(function(){ 
var select_val = $(this).children('option:selected').val();
if(select_val != ''){
if(select_val == '比選'){
}else{
}
}
});
});

</script>

更多獲取select下拉框值和索引的方法(摘自網絡):

 

獲取Select :
獲取select 選中的 text :
$("#phpddt.com").find("option:selected").text();

獲取select選中的 value:
$("#phpddt.com ").val();

獲取select選中的索引:
$("#phpddt.com ").get(0).selectedIndex;

設置select:
設置select 選中的索引:
$("#phpddt.com ").get(0).selectedIndex=index;//index爲索引值

設置select 選中的value:
$("#phpddt.com ").attr("value","Normal“);
$("#phpddt.com ").val("Normal");
$("#phpddt.com ").get(0).value = value;

設置select 選中的text:
var count=$("#phpddt.com option").length;
for(var i=0;i<count;i++) 
{ if($("#phpddt.com ").get(0).options[i].text == text) 

$("#phpddt.com ").get(0).options[i].selected = true; 

break; 

}

$("#select_id option[text='jQuery']").attr("selected", true);

設置select option項:

$("#select_id").append("<option value='Value'>Text</option>"); //添加一項option
$("#select_id").prepend("<option value='0'>請選擇</option>"); //在前面插入一項option
$("#select_id option:last").remove(); //刪除索引值最大的Option
$("#select_id option[index='0']").remove();//刪除索引值爲0的Option
$("#select_id option[value='3']").remove(); //刪除值爲3的Option
$("#select_id option[text='4']").remove(); //刪除TEXT值爲4的Option

清空 Select:
$("#phpddt.com ").empty();

 

目前幾種借用jQuery選取點擊元素獲得當前點擊元素信息,

1

2

3

$(document).click(function(e) { // 在頁面任意位置點擊而觸發此事件

  $(e.target).attr("id");       // e.target表示被點擊的目標

})<br>//此方法對於想要獲取擊元素獲得當前點擊元素信息如id,value,等信息,無法準確定位,獲取,因此需要this,及當前之意

 借用this獲取當前元素信息

HTML代碼

1

2

3

4

5

<ul>         

    <li class="a" id="ongoing">正在進行</li>

    <li id="about_to_begin">即將開始</li>

    <li id="past_activities">往期活動</li>

</ul>

 js代碼

1

2

3

4

5

6

7

8

9

10

11

                $(document).ready(function(){

                $("li").click(function(){ //點擊可通過標籤,id,類名等

//                  alert($(this).attr("id")) //此處可以拿到點擊元素的id ,取到其value值及用attr()方法                                

                                        alert($(this).html())    //拿到點擊元素的內容<br>                //拿到內容後即可使用ajax 方法與後臺交換數據,進行交互

                    var code = $(this).attr("id")

//                  console.log(code)

                    $("#a div").remove(); //配合點擊事件拿到元素的同時刪掉HTML頁面部分內容 同時也可用添加元素的方法添加元素

                    $("#b div").remove();

                    $("#c div").remove();  

                                     })

                           });       

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章