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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery实现广告上下滚动效果
Mar 04 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP 类型转换函数intval
2009/06/20 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
numpy.where() 用法详解
2019/05/27 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
python爬虫用mongodb的理由
2020/07/28 Python
JPA面试常见问题
2016/11/14 面试题
店长岗位的工作内容
2013/11/12 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
个人合作协议书范本
2014/04/18 职场文书
安全环保标语
2014/06/09 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
财务人员入职担保书
2015/09/22 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android