Jquery常用技巧
在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)
概述
获取在匹配的元素集中的第一个元素的属性值。
——————————————以上函数说明应用自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 |
$(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为可见区域高度
相关文章
- 从零开始学习jQuery (十) jQueryUI常用功能实战
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- 前端基础 -JQuery之 对属性的操作
- 前端基础 -JQuery之 相关事件
- jquery点击div以外的区域触发事件
- 完整的Jquery-easyUI显示分页数据例子
- 一些实用的 jQuery 技巧
- [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 一 ) - 传统下拉菜单
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第3章 修改页面 3.1 技巧:添加类
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3 技巧:生成类名
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4 示例:使用按钮集装饰单选框
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.6 技巧:使用对话框微件引起注意
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.7 技巧:指定过渡动画
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.12 技巧:跨页面时固定footer
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.13 技巧:将footer的位置保持固定
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧:使用多个列
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.21 技巧:利用jQuery Mobile的辅助函数
- jQuery uploadify-v3.1 批量上传
- jQuery常用及基础知识总结(一)
- jQuery JavaScript Library v1.10.2