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实现图片放大点击切换
Jun 06 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery插件实现悬浮的菜单
Apr 24 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学习 计数器实例代码
2008/06/15 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
采购主管的岗位职责
2013/12/17 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
运动会广播稿50字
2015/08/19 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
MySQL中order by的执行过程
2022/06/05 MySQL