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模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jquery实现简单拖拽效果
Jul 20 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+mysql写的简单留言本实例代码
2008/07/25 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
在视频前插入广告
2006/11/20 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Vuex 模块化使用详解
2019/07/31 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python中super函数的用法
2017/11/17 Python
python 标准差计算的实现(std)
2019/07/29 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
文明礼仪主题班会
2015/08/13 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python