Jquery中各种方法记录

原创 2016年08月30日 16:31:50

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


jQuery 的封装方法

jQuery 的模块封装方法,避免作用域和变量冲突,将扩展包装在一个匿名函数中,所有的变量都是局部的。  以下代码是:http://tympanus.net/Development/3DGallery...
  • wupangzi
  • wupangzi
  • 2013年11月13日 21:23
  • 5817

jQuery- 工具方法和实例方法

在使用jQuery的过程中,其实不难发现其中是存在不同的调用函数的方法的,这主要是因为存在两种方法,一个是工具方法,一个是函数方法$.get() $.post() $('#div1').html()工...
  • Dear_Mr
  • Dear_Mr
  • 2017年02月06日 23:48
  • 767

jquery常用方法总结

取值与赋值操作$("#ID").val(); //取value值 $("#ID").val("xxx"); //赋值 $("#ID").text(); //相当于取innerText $("#ID")...
  • tiana0
  • tiana0
  • 2017年01月14日 17:12
  • 1778

JQuery用户登录时的检测

一、在web开发中经常会遇到用户登录进行检测 var z_user=0,z_psword=0,z_code=0; var code_reg = new RegExp("^[\\da-z]{4}...
  • u013308496
  • u013308496
  • 2016年01月06日 13:03
  • 270

jQuery-源码阅读,extend()与工具方法、实例方法

使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul...
  • qiqingjin
  • qiqingjin
  • 2016年02月28日 20:24
  • 1009

使用jquery cookie.js记录当前所点击过的菜单

网页头部是一个这样的菜单,通过jsp include指令导入的,想给每个点击的菜单加上样式 class="active", 想到用jquery.cookie.js来做。百度搜索了下后发现有相关代码 网...
  • zero_295813128
  • zero_295813128
  • 2016年03月23日 11:31
  • 2494

jQuery调用页面后台方法

有时我们需要在前台jQuery方法中调用后台代码,总结出来,供大家学习。
  • xiaouncle
  • xiaouncle
  • 2016年08月04日 14:48
  • 4022

jquery中attr方法和prop方法的区别

jQuery中,用于获取属性的方法,主要是基于prop方法的,我们经常使用的是attr方法,不过在attr方法中,有时候会出现一些问题的,这里就看下jquery的API中attr的介绍,主要内容翻译自...
  • Lingfeng928
  • Lingfeng928
  • 2016年12月15日 17:53
  • 736

jquery之重写(扩展)$.ajax和$.fn.load等方法详解

前言:         今天做东西,考虑用户最好的体验,要实现界面上异步请求数据的loading效果,功能代码都是别人写完的,大概几十个地方,用的都是jQuery的load方法。咋整啊,总不能挨个去...
  • qq_16313365
  • qq_16313365
  • 2016年04月06日 22:37
  • 8262

记录每个方法的执行时间 AOP

AOP面向切面编程,记录所有方法的执行时间
  • u010081710
  • u010081710
  • 2015年06月30日 14:26
  • 1647
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery中各种方法记录
举报原因:
原因补充:

(最多只允许输入30个字)