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修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
Seajs的学习笔记
2014/03/04 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
python字典基本操作实例分析
2015/07/11 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
单位租房协议书样本
2014/10/30 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技