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();  

                                     })

                           });       

展开阅读全文

没有更多推荐了,返回首页