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自定义图片上传插件实例代码
Apr 04 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jquery实现手风琴案例
May 04 jQuery
Jquery $.map使用方法实例详解
Sep 01 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
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python在非root权限下的安装方法
2018/01/23 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
影视制作岗位职责
2013/12/04 职场文书
办理暂住证介绍信
2014/01/11 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
幼儿园秋游感想
2014/03/12 职场文书
优秀公益广告词大全
2014/03/19 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
小学教师师德承诺书
2014/05/23 职场文书
结婚老公保证书
2015/02/26 职场文书