标签归档：jquery技巧

js代码中window.onload、$(document).ready(function(){})有哪些不同呢？


摘要:
下文讲述js编写中，我们常遇见的初始化页面的Js事件方法window.onload、$(document).ready()的不同点，如下所示:

window.onload、$(document).ready(function(){}) 是我们常用的页面初始化绑定事件的js方法，那么她们到底有哪些不同之处呢，如下所示:


不同点1:

两个方法来源不同
window.onload是javascript的原生方法
$(document).ready(function(){}):是jquery框架封装的一个操作框架


不同点2:

执行时间不同
window.onload:需等到页面中所有元素(图片也需加载完毕)都在客户端浏览器中加载完毕，才会触发window.onload中的方法
$(document).ready():只需等待DOM结构加载完毕后，即可触发函数内的方法


不同点3:

可编写个数不同
window.onload:只可编写一个，如果编写多个的话，只有最后一个window.onload中的函数会得到运行
$(document).ready():可编写无数个,每一个里面的函数都会得到运行


不同点4:

缩写方式不同
window.onload:没有缩写方法
$(document).ready():可缩写为 $(); —如：$(function(){});

javascript jquery如何实现checkbox选中与取消选择的操作方法呢?


摘要:
下文讲述javascript中jquery 批量操作checkbox “全选、反选、全不选(取消选中)”的操作方法分享，如下所示：


实现思路:
通过批量对checkbox 添加checked属性和移除checked属性,达到全选和反选的目的
通过遍历checkbox对其进行反选操作

例:
jquery 实现 checkbox “全选、反选、全不选(取消选中)”

 
   <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
  jquery实现checkbox全选，反选，取消选择操作的示例分享</title>
 </head>
 <body>
  猫猫教程(www.maomao365.com)<br />
  checkbox演示<br />

     你最喜欢的人是谁？<br/>
    <input type="checkbox" name="chk" value="关羽" />关羽
    <input type="checkbox" name="chk" value="鲁班" />鲁班
    <input type="checkbox" name="chk" value="刘备" />刘备
    <input type="checkbox" name="chk" value="曹操" />曹操 <br/>
    <input type="button" id="btnCheckAll" value="全选" />
    <input type="button" id="btnCheckNo" value="取消选中" />
    <input type="button" id="btnCheckNot" value="反选" />

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script>
    $(function(){

        $("#btnCheckAll").click(function(){
            $("input:checkbox").prop("checked","checked");
        });

        $("#btnCheckNo").click(function(){
            $("input:checkbox").removeAttr("checked");
        });

        $("#btnCheckNot").click(function(){
            $("input:checkbox").each(function(){
                this.checked=!this.checked;
            });
        });


    });
</script>

 </body>
</html>
jquery checkbox的三种操作方法分享

jquery checkbox的三种操作方法分享

jquery 如何实现点击checkbox行所在文本行“选中checkbox复选框”呢？


摘要:
下文讲述jquery中点击checkbox所在文本行，达到选中复选框的方法分享，如下所示:

在web项目开发中,
checkbox所在行中都存在文本说明信息，
那么如何实现点击文本说明信息达到选中checkbox复选框呢？
下文将一一道来

实现思路:
在div上绑定点击事件，
当点击时，通过jquery的find方法获取子元素的checkbox，并模拟点击


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
--选中复选框后面的文本，达到选中checkbox的目的
</title>
<style type="text/css">
div{
  width:480px;
  height:30px;
  text-align:left;
  padding-left: 2px;
  line-height:30px;
  border-bottom:solid 1px blue;
  cursor:pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){


  $("div").click(function(){

	if($(this).find(":checkbox").prop("checked")){
      $(this).find(":checkbox").prop("checked",false);
    }else{
      $(this).find(":checkbox").prop("checked",true);
    }
     

  })
});
</script>
</head>
<body>
 
    <div><input type="checkbox"/>猫猫教程欢迎你</div>
    <div><input type="checkbox"/>这是一家基础教程网站</div>
    <div><input type="checkbox"/>www.maomao365.com</div>
    <div><input type="checkbox"/>这是一个测试信息</div> 
 
 </body>
</html>
jquery checkbox选中文字达到选中checkbox的目的

jquery checkbox选中文字达到选中checkbox的目的