jQuery实践小结-白红宇

前言

虽然 jQuery 不再更新，但是公司的旧项目中依然在使用，也再次感受了一下属于jQuery的那个时代。但是由于长时间没有使用 jQuery ，导致使用生疏。下面就遇到的一些问题进行总结归纳。

使用 jQuery/javascript判断及改变checkbox选中状态

使用jQuery来判断一个CheckBox是否被选中有以下三种方式：

（1）.attr('checked)

看JQuery版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false

（2）.prop('checked')

1.6+:true/false

（3）.is(':checked')

eg：$("input[type='checkbox']").is(':checked');选中为true,未选中为false；

所有版本:true/false

目前在项目中使用的是is(':checked');的方式，因为兼容性方面比较好。

改变CheckBox的选中状态

（1）使用attr方法进行checkbox状态的改变。这个方法就是对属相的设置，参数中第一个是属性（string类型），第二个值为属性的值。

选中：$("input[type='checkbox']").attr("checked",true);

取消选中：$("input[type='checkbox']").attr("checked",false);

（2）但是有时使用attr操作，虽然属性值改变了，但是页面上的checkbox并没有选中。在这种情况下，建议使用prop方法来操作改变checkbox选中状态。

选中：

$("input[type='checkbox']").prop("checked",true);

$("input[type='checkbox']").prop({checked:true}); //map键值对

$("input[type='checkbox']").prop("checked",function(){return true;});//函数返回true或false

$("input[type='checkbox']").prop("checked","checked");

取消选中：

$("input[type='checkbox']").prop("checked",false);

一个实现反选的例子：

$(":checkbox").each(function(){  if($(this).prop("checked")){    $(this).prop("checked",false);  }else{    $(this).prop("checked",true);  }});复制代码

使用原生实现以上功能

判断：document.getElementById("someCheckbox").checked  //值为true或false改变document.getElementById("someCheckbox").checked = true;document.getElementById("someCheckbox").checked = false;复制代码

jQuery 多属性选择器

复合属性选择器，需要同时满足多个条件的时候使用，多个属性值取交集。语法： [selector1][selector2][selectorN] 多个属性选择器

例子： (1)、查询一个input,类型是checkbox，name是chkName

$("input[type=checkbox][name=chkName]")

jQuery中的serialize()方法

在提交form表单的时候，我们可以通过这个方法进行序列化表单值创建URL编码文本字符串。选择一个或者多个表单元素（如输入和/或文本区），或表单元素本身。

序列化的值可以在生成AJAX请求的时候用于URL查询字符串中。语法 $(selector).serialize()

$("button").click(function(){    $("div").text($("form").serialize());});复制代码

jQuery序列化表单serialize如何排除元素

在上面的serialize方法中，我们其实不想让一些信息提交，比如信用卡账号。那么我们怎么排除这些信息呢？

$("form[name='forname'] :not(#test1,#test2,#test3...........)").serialize();

使用:not选择器可以帮助我们做到这点。