Jquery常用技巧

来源：互联网发布：2017双十一消费数据编辑：程序博客网时间：2024/05/22 14:26

JQuery 判断某个属性是否存在 hasAttr

在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值的属性，而忽略了浏览器生成的任何错误

参数

name

属性名称

properties

作为属性的“名/值对”对象

key,value

属性名称，属性值

key,function(index, attr)

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
/*
*
* Function to validate File size
*
**/
function findSize(field_id)
{
         var fileInput = $("#"+field_id)[0];
         byteSize  = fileInput.files[0].fileSize;
      return ( Math.ceil(byteSize / 1024) ); // Size returned in KB.
}
复制代码

再把我以前用的js验证上传文件大小的代码也放上吧，有需要的选择参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="DEscription" contect="my code demo" />
<meta name="Author" contect="Michael@www.micmiu.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <img id="tempimg" dynsrc="" src="" style="display:none" />
  <input type="file" name="file" id="fileuploade" size="40" />
  <input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
</body>
<script type="text/javascript">
  var maxsize = 210241024;//2M
  var errMsg = "上传的附件文件不能超过2M！！！";
  var tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";
  var  browserCfg = {};
  var ua = window.navigator.userAgent;
  if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
  }else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
  }else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
  }
  function checkfile(){
try{
   var obj_file = document.getElementById("fileuploade");
   if(obj_file.value==""){
   alert("请先选择上传文件");
   return;
   }
   var filesize = 0;
   if(browserCfg.firefox || browserCfg.chrome ){
   filesize = obj_file.files[0].size;
   }else if(browserCfg.ie){
   var obj_img = document.getElementById('tempimg');
   obj_img.dynsrc=obj_file.value;
   filesize = obj_img.fileSize;
   }else{
   alert(tipMsg);
   return;
   }
   if(filesize==-1){
   alert(tipMsg);
   return;
   }else if(filesize>maxsize){
   alert(errMsg);
   return;
}else{
   alert("文件大小符合要求");
   return;
}
}catch(e){
alert(e);
}
  }
</script>
</html>
复制代码

原文链接：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为可见区域高度

阅读全文

0 0