Jquery中各种方法记录

一、 each的三种遍历

1、选择器+遍历

$('div').each(function (i){

   i就是索引值

   this 表示获取遍历每一个dom对象

});

2、选择器+遍历

$('div').each(function (index,domEle){

   index就是索引值

  domEle 表示获取遍历每一个dom对象

});

3、更适用的遍历方法

1）先获取某个集合对象

2）遍历集合对象的每一个元素

var d=$("div");

$.each(d,function (index,domEle){

  d是要遍历的集合

  index就是索引值

  domEle 表示获取遍历每一个dom对

});

二、各种选择器

$("input[type=text]:disabled");

$('input[type=text]:enabled');

$('input[type=checkbox]:checked');

$('select option:selected');

三、select的各种jquery操作

<select class="selector"></select>

1、设置value为pxx的项选中

     $(".selector").val("pxx");

2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

    $(".selector").val();

    $(".selector").children('option:selected').val();

4、获取当前选中项的text

    $(".selector").find("option:selected").text();

  

select的change事件：

$(".selector").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中，这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});

$("#select_id").change(function(){//code...});   //为Select添加事件，当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值

jQuery设置Select选择的 Text和Value:
语法解释：

$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中

 

jQuery添加/删除Select的Option项：
语法解释：

$("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option

四、checkbox的相关用法

<input type="checkbox" id="gps_open_close" />

用attr("checked")结果是undefied，要用prop获取checked状态。

 var checked = $("#gps_open_close").prop('checked');

$("#gps_open_close").attr('checked',true);

$("#gps_open_close").change(function(){       
      var checked = $(this).prop('checked');
      if($("#gps_open_close").is(":checked")){
        $("#gps_open_close").attr("checked",false);
      }
  });

var item = $('input[name=items][checked]').val(); 
获 取select被选中项的文本 
var item = $("select[name=items] option[selected]").text(); 
select下拉框的第二个元素为当前选中值 
$('#select_id')[0].selectedIndex = 1; 
radio单选组的第二个元素为当前选中值 
$('input[name=items]').get(1).checked = true;

获取值： 
文本框，文本区域：$("#txt").attr("value")； 
多选框 checkbox：$("#checkbox_id").attr("value")； 
单选组radio：   $("input[type=radio][checked]").val(); 
下拉框select： $('#sel').val();

控制表单元素： 
文本框，文本区域：$("#txt").attr("value",'');//清空内容 
$("#txt").attr("value",'11');//填充内容 
多选框checkbox： $("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')== undefined) //判断是否已经打勾 
单选组 radio：    $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
下拉框 select：   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

五、class属性

$("p").attr("class"); //获取p元素的class

$("p").attr("'class", "high"); //设置p元素的class为 "high"

attr是将原来的class替换为新的class，而不是在原来的基础上追加新的class

$("#p").addClass("another");

$("#p").addClass("another blue");

添加多个class， 多个class之间用 空格隔开。

1、如果给一个元素添加了多个class值，那么就相当于合并了它们的样式。

2、如果有不同的class设定了同一样式属性，则后者覆盖前者。

$("p").removeClass("high"); //移除p元素中值为"high"的class

要把p元素的两个class都删除，就要使用两次removeClass()方法，代码如下：
 $("p").removeClass("high").removeClass("another");

Query提供了更简单的方法。可以以空格的方式删除多个class名，代码如下：
 $("p").removeClass("high another");

外，还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时，就会将class的值全部删除，JQuery代码如下：

 $("p").removeClass(); //移除p元素的所有class

$("p").toggleClass("another"); //重复切换类名“another”

判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class，如果有，则返回true，否则返false。

$("p").hasClass("another");