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实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
劣质的PHP代码简化
2010/02/08 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序实现九宫格抽奖
2020/04/15 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
中层干部培训方案
2014/06/16 职场文书
党员志愿者活动总结
2014/06/26 职场文书
党的生日演讲稿
2014/09/10 职场文书
作弊检讨书
2015/01/27 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
二审答辩状格式
2015/05/22 职场文书
文化大革命观后感
2015/06/17 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python