关闭

Jquery中各种方法记录

151人阅读 评论(0) 收藏 举报
分类:

一、 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");


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:103492次
    • 积分:1597
    • 等级:
    • 排名:千里之外
    • 原创:224篇
    • 转载:151篇
    • 译文:1篇
    • 评论:7条
    文章分类
    最新评论