本文共 5084 字,大约阅读时间需要 16 分钟。
在编码中,我们会判断元素是否存在某个属性.比如是否包含 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") 即可
用原生态的操作页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也不难写。但使用实现则非常简单,代码很简洁-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 获取验证上传文件大小代码,以前我们都是直接使用js来验证上传文件大小但有时会不兼容,后来我找到一个不错的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" οnclick="checkfile()"/>
- </body>
- <script type="text/javascript">
- var maxsize = 2*1024*1024;//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>
复制代码 原文链接: |
<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为可见区域高度
转载地址:http://gqhni.baihongyu.com/