jquery与js实现全选功能的区别


Posted in jQuery onJune 11, 2017

一、jquery常用的事件

click(),dbclick()   

focus(),blur()   

change()   

keydown(),keypress(),keyup() 

mousedown(),mouseup()    mouseenter(),mouseleave()  mouseover(),mouseout()  mousemove()

二、jquery挂事件

$(“p”).bind("事件名称”,要执行的匿名函数)

$(“p”).unbind("事件名称”)

三、jquery实现全选功能(重点是属性用.prop(),不用.attr())

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="{utf-8}">
    <title></title>
    <script src="../jquery-3.2.0.js"></script>
  </head>
  <body>
    <form>
      <input type="checkbox" class="all"/>省市<br />
      <input type="checkbox" class="a"/>山东
      <input type="checkbox" class="a"/>山西
      <input type="checkbox" class="a"/>北京
      <input type="checkbox" class="a"/>河北
      <input type="checkbox" class="a"/>江苏
    </form>
  </body>
</html>
<script>
  $(".all").click(function(){
//    alert($(this)[0].checked);//如果选中则返回true;否则返回false
    var a= $(this)[0].checked; //dom对象
//   alert($(this).prop("checked"));
     var a=$(this).prop("checked");//获取jquery对象
//改变子复选框的状态 用prop代替attr,解决了之前用js写出现的bug,但是在源代码中查不到
  $(".a").prop("checked",a); 
  })
</script>

对比js全选代码:{2017-05-03日的详情见数据访问(租房子多条件查询)}

function quanxuan(a,ff)
{
  var ck = document.getElementsByClassName(ff);
  if(a.checked)
  {
    for(var i=0;i<ck.length;i++)
    {
      ck[i].setAttribute("checked","checked");
    }
  }
  else
  {
    for(var i=0;i<ck.length;i++)
    {
      ck[i].removeAttribute("checked");
    }
  }
}
</script>

此外,jquery可以替代js的一切功能,除了settimeout,setinterval

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
You might like
做一个有下拉功能的留言版
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python验证码图片处理(二值化)
2019/11/01 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
美国创意之家:BulbHead
2017/07/12 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
学年自我鉴定
2014/01/16 职场文书
酒店个人求职信范文
2014/01/25 职场文书
员工晚婚的请假条
2014/02/08 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
鸡毛信观后感
2015/06/11 职场文书
广播体操比赛主持词
2015/06/29 职场文书
python自动化八大定位元素讲解
2021/07/09 Python