jQuery读书笔记二 jQuery中的事件与应用

来源：互联网发布：windows 网络编程编辑：程序博客网时间：2024/06/12 02:19

1、实践中的冒泡现象：

<style type="text/css">           body{font-size:13px}            .clsShow{border:#ccc 1px solid;background-color:#eee;margin-top:15px;padding:5px;width:220px;line-height:1.8em;display:none}           .btn {border:#666 1px solid;padding:2px;width:50px;           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}    </style>    <script type="text/javascript">        $(function() {            var intI = 0; //记录执行次数            $("body,div,#btnShow").click(function(event) {//点击事件                intI++; //次数累加                $(".clsShow")                .show()//显示                .html("您好，欢迎来到jQuery世界!")//设置内容                .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本                event.stopPropagation();//阻止冒泡过程            })        })    </script></head><body>    <div>        <input id="btnShow" type="button" value="点击" class="btn" />    </div>    <div class="clsShow"></div></body>

2、使用映射方式绑定多个不同的事件

<script type="text/javascript">        $(function() {            /*$(".txt").bind({ focus: function() {            $("#divTip")            .show()//显示            .html("执行的是focus事件");//设置文本            },            change: function() {            $("#divTip")            .show()//显示            .html("执行的是change事件");//设置文本            }            })*/            var message = "执行的是focus事件";            $(".txt").bind("focus", { msg: message }, function(event) {                $("#divTip")                .show()//显示            .html(event.data.msg); //设置文本            });            message = "执行的是change事件";            $('.txt').bind('change', { msg: message }, function(event) {                $("#divTip")                .show()//显示            .html(event.data.msg); //设置文本            });        })    </script></head><body>     <div>姓名：<input type="text" class="txt" /></div>     <div id="divTip" class="clsTip"></div></body>

3、切换事件---jQuery中有两个方法用于事件的切换一个事方法hover()，另外一个是toggle()；例如有一个超链接的标记，当鼠标悬停是出发一个事件，当鼠标移除去在出发另外一个事件才是就可以考虑使用hover()；

$("a").hover(function(){     //执行代码一}，function(){      //执行代码二});

eg:

    <style type="text/css">           body{font-size:13px}            .clsFrame{border:solid 1px #666;width:220px}           .clsFrame .clsTitle{background-color:#eee;padding:5px;font-weight:bold}           .clsFrame .clsContent{padding:5px;display:none}    </style>    <script type="text/javascript">        $(function() {            $(".clsTitle").hover(function() {                $(".clsContent").show();            }, function() {                $(".clsContent").hide();            })        })    </script></head><body>     <div class="clsFrame">          <div class="clsTitle">jQuery简介</div>          <div class="clsContent">  jQuery是由美国人John Resig于2006年创建的一个开源项目，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。</div>        </div></body>

然后在介绍toggle()

toggle()方法中可以指定N多个函数，“依次”调用函数它会一直执行到最后然后在重复的对这些函数进行轮番调用，eg：

<style type="text/css">           body{font-size:13px}            img{border:solid 1px #ccc;padding:3px}   </style>    <script type="text/javascript">        $(function() {            $("img").toggle(function() {                $("img").attr("src", "Images/img05.jpg");                $("img").attr("title", this.src);            }, function() {                $("img").attr("src", "Images/img06.jpg");                $("img").attr("title", this.src);            }, function() {                $("img").attr("src", "Images/img07.jpg");                $("img").attr("title", this.src);            })        })    </script></head><body>

4、方法one();为所选的元素绑定一个仅出发依次的函数

<style type="text/css">           .btn {border:#666 1px solid;padding:2px;width:160px;           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}    </style>    <script type="text/javascript">        $(function() {            function btn_Click() { //自定义事件                this.value = "010-12345678"            }            $("input").bind("click", btn_Click); //绑定自定义事件        })    </script></head><body>    <input id="Button1" type="button" value="点击查看联系方式" class="btn" /></body>

5、获得焦点的另外一种方法：$("#id").trigger("focus");
在jQuery中addClass()的功能是添加CSS样式，为更好的体现样式在新增加CSS样式之前，应先通过removeClass删除已加载的CSS样式，达到预期的效果

6、多级联动的例子

<script type="text/javascript">      $(function() {          function objInit(obj) {//下拉列表框初始化              return $(obj).html("<option>请选择</option>");          }          var arrData = { //定义一个数组保存相关数据              厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },              厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },              厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }          };          $.each(arrData, function(pF) { //遍历数据增加厂商项              $("#selF").append("<option>" + pF + "</option>");          });          $("#selF").change(function() { //厂商列表框选项改变事件              objInit("#selT");              objInit("#selC");              $.each(arrData, function(pF, pS) {                  if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配                      $.each(pS, function(pT, pC) { //遍历数据增加品牌项                          $("#selT").append("<option>" + pT + "</option>");                      });                      $("#selT").change(function() { //品牌列表框选项改变事件                          objInit("#selC");                          $.each(pS, function(pT, pC) {                              if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配                                  $.each(pC.split(","), function() { //遍历数据增加型号项                                      $("#selC").append("<option>" + this + "</option>");                                  });                              }                          });                      });                  }              });          });          $("#Button1").click(function() { //注册按钮单击事件              var strValue = "您选择的厂商:";              strValue += $("#selF option:selected").text();              strValue += " 您选择的品牌:";              strValue += $("#selT option:selected").text();              strValue += " 您选择的型号:";              strValue += $("#selC option:selected").text();              $("#divTip")              .show()              .addClass("clsTip")              .html(strValue); //显示提示信息并增加样式          });      })       </script> </head><body>     <div class="clsInit">       厂商：<select id="selF"><option>请选择</option></select>         品牌：<select id="selT"><option>请选择</option></select>         型号：<select id="selC"><option>请选择</option></select>        <input id="Button1" type="button" value="查询" class="btn" />    </div>     <div class="clsInit" id="divTip"></div></body>