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实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
微信支付开发交易通知实例
2016/07/12 PHP
如何在PHP中使用数组
2020/06/09 PHP
html下载本地
2006/06/19 Javascript
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
React组件生命周期详解
2017/07/03 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python列表如何更新值
2020/05/27 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
软件测试企业面试试卷
2016/07/13 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
取保候审保证书
2014/04/30 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
市级三好生竞选稿
2015/11/21 职场文书