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 26 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
ajax jquery实现页面某一个div的刷新效果
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删除数组元素示例分享
2014/02/17 PHP
php基本函数汇总
2015/07/09 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
Jquery中CSS选择器用法分析
2015/02/10 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
Python requests库用法实例详解
2018/08/14 Python
python验证码图片处理(二值化)
2019/11/01 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
印尼旅游网站:via
2017/11/12 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
施工人员岗位职责
2013/12/12 职场文书
《日月潭》教学反思
2014/02/28 职场文书
2014年冬季防火方案
2014/05/21 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
新年晚会开场白
2015/05/29 职场文书
公司规章制度范本
2015/08/03 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
python三子棋游戏
2022/05/04 Python