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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php中文字符串截取方法实例总结
2014/09/30 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
javascript基础知识
2016/06/07 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python装饰器原理与用法分析
2018/04/30 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
《兰亭集序》教学反思
2014/02/11 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
结对共建协议书
2014/08/20 职场文书
单位考核聘任报告
2015/03/02 职场文书
上级领导检查欢迎词
2015/09/30 职场文书