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 23 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现穿梭框效果
Jan 19 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
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
个人自我鉴定写法
2013/11/30 职场文书
爽歪歪广告词
2014/03/20 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
尝试使用Python爬取城市租房信息
2022/04/12 Python