首页 > 编程 > JavaScript > 正文

jquery与js实现全选功能的区别

2019-11-19 16:22:10
字体:
来源:转载
供稿:网友

一、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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表