在jQuery编码中,我们会判断元素是否存在某个属性.比如是否包含 class="new" 的样式呢.JQuery判断就非常简单了,因为有 hasClass这个方法 $("input[name=new]").hasClass("new") 即可判断.
但是有时候我们需要判断别的属性,比如有的 a 链接包含 rel 属性,有的没有rel属性.这时该怎么判断呢?
这时就没有现成的方法了. 如果存在某个属性 $("#aid").attr("rel") 会返回 rel的值,如果不存在 rel属性则会返回"undefined"
undefined 就是 undefined类型 , if($("#aid").attr("rel")=="undefined") 这个判断可能不成立.
因为类型不相同.
建议使用 if(typeof($("#aid").attr("rel"))=="undefined") 即可
jquery全选/取消全选(反选)/单选操作以及获取值常见用法和错误-jquery prop()函数使用教程
用原生态的JavaScript操作页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也不难写。但使用jQuery实现则非常简单,代码很简洁-write less,do more!
jquery版本:1.9
先看看HTML代码,很简单的操作框
- <div class="checkbox_test">
- <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
- <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
- <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
- <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
- <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
- </div>
引入jquery库
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
对于checkbox的选择,实际上就是添加了一个属性:checked,不管后面有没有值,都是选中状态,在程序里面,如果checked值纯在,就是true,不存在就是false。于是就可以用下面的这个代码:
- //全选/反选
- $("#chk_all").on('click', function(){
- if($(".chk_all").attr("checked")){ //判断chk_all是否被选中
- $("input[name='chk_list']").attr("checked",false); //反选
- }else{
- $("input[name='chk_list']").attr("checked",true);//全选
- }
- })
可是,这段运行却是错误的,因为$(“.chk_all”).attr(“checked”)的值是undefined,因为在源代码里面没有这个属性。
查看jquery的api手册,发现了一个prop函数:
—————————-以下函数说明应用自jquery官方api———————————-
prop(name|properties|key,value|fn)
概述
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误
参数
属性名称
作为属性的“名/值对”对象
属性名称,属性值
1:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
——————————————以上函数说明应用自jquery官方api————————————–
prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.
区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
那么
上面的代码可以这样写:
- //全选/反选
- $("#chk_all").on('click', function(){
- if($(".chk_all").prop("checked")){ //判断chk_all是否被选中
- $("input[name='chk_list']").prop("checked",false); //反选
- }else{
- $("input[name='chk_list']").prop("checked",true);//全选
- }
- })
这样修改以后,就不会报错,并且可以运行的很好!
JQuery 获取验证上传文件大小代码
本文章来能大家介绍JQuery 获取验证上传文件大小代码,以前我们都是直接使用js来验证上传文件大小但有时会不兼容,后来我找到一个不错的JQuery获取上传文件大小与实现文件大小验证函数,大家可参考。 jquery
再把我以前用的js验证上传文件大小的代码也放上吧,有需要的选择参考。
原文链接:http://www.111cn.net/wy/jquery/47294.htm |
Jquery获取浏览器窗口的高度和宽度
<script type="text/javascript">
$(document).ready(function()
{
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
}
)
</script>
其中
1。alert(document.documentElement.clientHeight);//
2。alert(document.body.clientHeight);//
区别为 若增加的 xhtml 的声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
则 1为可见区域高度;2为文档高度
若不增加
1为文档高度;2为可见区域高度
大爷,请赏我点铜板买喵粮自己吃,您的支持将鼓励我继续创作!(支付宝)