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查找dom的几种方法效率详解
May 17 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
跟老齐学Python之print详解
2014/09/28 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
外贸员简历中的自我评价
2014/03/04 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
北京英文导游词
2015/02/12 职场文书
企业愿景口号
2015/12/25 职场文书
教师教育心得体会
2016/01/19 职场文书