JQuery（二）

「爱情、让人受尽委屈。」 2022-05-25 05:15 105阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

**JQuery事件：**

例子：（加载后标签选择器单击事件）

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
      });});
    </script>
    </head>
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
    </body>

**单独文件中的函数：**

正常开发中jQuery 函数应放到独立的 .js 文件中；例如：

**JQuery名称冲突的解决办法：**

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号；

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

*  把所有 jQuery 代码置于事件处理函数中；
 *  把所有事件处理函数置于文档就绪事件处理器中；
 *  把 jQuery 代码置于单独的 .js 文件中；
 *  如果存在名称冲突，则重命名 jQuery 库；

<table> 
 <tbody> 
  <tr> 
   <th><span style="color:#000000;">方法</span></th> 
   <th><span style="color:#000000;">描述</span></th> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">bind()</span></td> 
   <td><span style="color:#000000;">向匹配元素附加一个或更多事件处理器</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">blur()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 blur 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">change()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 change 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">click()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 click 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">dblclick()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 double click 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">delegate()</span></td> 
   <td><span style="color:#000000;">向匹配元素的当前或未来的子元素附加一个或多个事件处理器</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">die()</span></td> 
   <td><span style="color:#000000;">移除所有通过 live() 函数添加的事件处理程序。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">error()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 error 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.isDefaultPrevented()</span></td> 
   <td><span style="color:#000000;">返回 event 对象上是否调用了 event.preventDefault()。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.pageX</span></td> 
   <td><span style="color:#000000;">相对于文档左边缘的鼠标位置。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.pageY</span></td> 
   <td><span style="color:#000000;">相对于文档上边缘的鼠标位置。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.preventDefault()</span></td> 
   <td><span style="color:#000000;">阻止事件的默认动作。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.result</span></td> 
   <td><span style="color:#000000;">包含由被指定事件触发的事件处理器返回的最后一个值。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.target</span></td> 
   <td><span style="color:#000000;">触发该事件的 DOM 元素。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.timeStamp</span></td> 
   <td><span style="color:#000000;">该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.type</span></td> 
   <td><span style="color:#000000;">描述事件的类型。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">event.which</span></td> 
   <td><span style="color:#000000;">指示按了哪个键或按钮。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">focus()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 focus 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">keydown()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 key down 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">keypress()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 key press 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">keyup()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 key up 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">live()</span></td> 
   <td><span style="color:#000000;">为当前或未来的匹配元素添加一个或多个事件处理器</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">load()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 load 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mousedown()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse down 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mouseenter()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse enter 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mouseleave()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse leave 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mousemove()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse move 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mouseout()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse out 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mouseover()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse over 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">mouseup()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 mouse up 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">one()</span></td> 
   <td><span style="color:#000000;">向匹配元素添加事件处理器。每个元素只能触发一次该处理器。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">ready()</span></td> 
   <td><span style="color:#000000;">文档就绪事件（当 HTML 文档就绪可用时）</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">resize()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 resize 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">scroll()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 scroll 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">select()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 select 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">submit()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 submit 事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">toggle()</span></td> 
   <td><span style="color:#000000;">绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">trigger()</span></td> 
   <td><span style="color:#000000;">所有匹配元素的指定事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">triggerHandler()</span></td> 
   <td><span style="color:#000000;">第一个被匹配元素的指定事件</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">unbind()</span></td> 
   <td><span style="color:#000000;">从匹配元素移除一个被添加的事件处理器</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">undelegate()</span></td> 
   <td><span style="color:#000000;">从匹配元素移除一个被添加的事件处理器，现在或将来</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#000000;">unload()</span></td> 
   <td><span style="color:#000000;">触发、或将函数绑定到指定元素的 unload 事件</span></td> 
  </tr> 
 </tbody> 
</table>

**（1）bind() 方法：**

定义：规定向被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数；

**实例：**

当点击鼠标时，隐藏或显示 p 元素：

$("button").bind("click",function(){
      $("p").slideToggle();
    });

**将事件和函数绑定到元素：**

定义：规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数；

语法：$(selector).bind(event,data,function)

event：必需，规定添加到元素的一个或多个事件；由空格分隔多个事件，必须是有效的事件；

data：可选，规定传递到函数的额外数据；

function：必需。规定当事件发生时运行的函数；

替代语法：$(selector).bind({event:function, event:function, ...})

\{event:function, event:function, ...\}：必需。规定事件映射，其中包含一个或多个添加到元素的事件，以及当事件发生时运行的函数；

**（2）blur()方法：**

定义：当元素失去焦点时发生 blur 事件；blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码；

**提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素；**

**实例：**

当输入域失去焦点 (blur) 时改变其颜色：

$("input").blur(function(){
      $("input").css("background-color","red");
    });

**触发blur事件：**

定义：触发被选元素的 blur 事件；

失去焦点语法：$(selector).blur()
    聚集焦点语法：$(selector).focus()

$(document).ready(function()\{  
  $("input").focus(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").blur(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
  $("\#btn1").click(function()\{  
    $("input").focus();  
  \});    
  $("\#btn2").click(function()\{  
    $("input").blur();  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>  
<p><button id="btn1">触发输入域的 focus 事件</button></p>  
<p><button id="btn2">触发输入域的 blur 事件</button></p>  
</body>

**将函数绑定到blur事件：**

定义：规定当被选元素的 blur 事件发生时运行的函数；

语法：$(selector).blur(function)

function：可选。规定当 blur 事件发生时运行的函数；

**（3）change()事件：**

定义：当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数；

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生；

**实例：**

当输入域发生变化时改变其颜色：

$(".field").change(function(){
      $(this).css("background-color","#FFFFCC");
    });

**触发change事件：**

定义：触发被选元素的 change 事件；

语法：$(selector).change()

**将函数绑定到change事件：**

定义：规定当被选元素的 change 事件发生时运行的函数；

语法：$(selector).change(function)

function：可选。规定当 change 事件发生时运行的函数；

**(4)chick()事件：**

定义：当点击元素时，会发生 click 事件；当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click；

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数；

**实例：**

当点击按钮时，隐藏或显示元素：

$("button").click(function(){
      $("p").slideToggle();
    });

**触发click事件：**

定义：触发被选元素的click事件；

语法：$(selector).click()

**将函数绑定到click事件：**

定义：规定当被选元素的 change 事件发生时运行的函数；

语法：$(selector).click(function)

function：可选。规定当发生 click 事件时运行的函数；

**（5）dblclick()事件：**

定义：当双击元素时，会发生 dblclick 事件；当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click；在很短的时间内发生两次 click，即是一次 double click 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数；

**提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题；**

**实例：**

当双击按钮时，隐藏或显示元素；

$("button").dblclick(function(){
      $("p").slideToggle();
    });

**触发dblclick事件：**

定义：触发被选元素的dblclick事件；

语法：$(selector).dblclick()

**将函数绑定到dblclick事件：**

定义：规定当被选元素的 dblclick事件发生时运行的函数；

语法：$(selector).dblclick(function)

function：可选。规定当发生 dblclick 事件时运行的函数；

**（6）delegate()事件：**

定义：delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）；

**实例：**

当点击鼠标时，隐藏或显示 p 元素；

$("div").delegate("button","click",function(){
      $("p").slideToggle();
    });

语法：$(selector).delegate(childSelector,event,data,function)

childSelector：必需。规定要附加事件处理程序的一个或多个子元素；

event：必需。规定附加到元素的一个或多个事件；由空格分隔多个事件值。必须是有效的事件；

data：可选。规定传递到函数的额外数据；

function：必需。规定当事件发生时运行的函数；

</body>

向未来的元素添加事件处理程序

如何使用 delegate() 方法向尚未创建的元素添加事件处理程序

**（7）die()事件：**

定义：die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序；

**实例：**

移除所有通过 live() 方法向 p 元素添加的事件处理程序；

$("p").die();

语法：$(selector).die(event,function)

event：必需。规定要移除的一个或多个事件处理程序；由空格分隔多个事件值。必须是有效的事件；

function：可选。规定要移除的特定函数；

</body>

移除通过 live() 添加的特定函数

如何使用 live() 方法移除事件处理程序的特定函数;

**（8）error()事件：**

定义：当元素遇到错误（没有正确载入）时，发生 error 事件，error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数；

**提示：该方法是 bind('error', handler) 的简写方式；**

**实例：**

如果图像不存在，则用一段预定义的文本取代它；

$("img").error(function(){
      $("img").replaceWith("

Missing image!

");\});

**触发error事件：**

定义：触发被选元素的error事件；

语法：$(selector).error()

**将函数绑定到error事件：**

定义：规定当被选元素的 error事件发生时运行的函数；

$(selector).error(function)

function：可选。规定当发生 error 事件时运行的函数；

**（9）isDefaultPrevented()事件：**

定义：isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法；

**实例：**

防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果；

$("a").click(function(event){
       event.preventDefault();
      alert("Default prevented: " + event.isDefaultPrevented());
    });

语法：event.isDefaultPrevented()

event：必需。规定需要检查的事件。这个 event 参数来自事件绑定函数；

**（10）pageX()事件：**

定义：pageX() 属性是鼠标指针的位置，相对于文档的左边缘；

**实例：**

显示鼠标指针的位置：

$(document).mousemove(function(e){
      $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
    });

语法：event.pageX

event：必需。规定要使用的事件。这个 event 参数来自事件绑定函数；

**（11）pageY()事件：**

定义：pageY() 属性是鼠标指针的位置，相对于文档的上边缘；

**实例：**

显示鼠标指针的位置；

$(document).mousemove(function(e){
      $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
    });

语法：event.pageY

event：必需。规定要使用的事件。这个 event 参数来自事件绑定函数；

**（12）preventDefault()事件：**

定义：preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）；

**实例：**

防止链接打开 URL；

$("a").click(function(event){
      event.preventDefault();
    });

语法：event.preventDefault()

event：必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数；

</body>

**（13）result()事件：**

定义：result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义；

**实例：**

显示最后一次点击事件返回的结果；

$("button").click(function(e) {
      $("p").html(e.result);
    });

语法：event.result

event：必需。规定返回的最后一个值来自哪个事件。这个 event 参数来自事件绑定函数；

**（14）target（）事件：**

定义：target 属性规定哪个 DOM 元素触发了该事件；

**实例：**

显示哪个 DOM 元素触发了事件；

$("p, button, h1, h2").click(function(event){
      $("div").html("Triggered by a " + event.target.nodeName + " element.");
    });

语法：event.target

event：必需。规定需要检查的事件。这个 event 参数来自事件绑定函数；

**（15）timeStamp（）事件：**

定义：timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数；

**实例：**

显示出当对按钮元素的点击事件发生时的时间戳；

$("button").click(function(event){
      $("span")html(event.timeStamp);
    });

语法：event.timeStamp

event：必需。规定返回该时间戳的事件。这个 *event* 参数来自事件绑定函数；

**（16）type（）事件：**

定义：type 属性描述触发哪种事件类型；

**实例：**

$("p").bind('click dblclick mouseover mouseout',function(event){
      $("div").html("Event: " +event.type);
    });

语法：event.type

event：必需。规定要检查的事件。这个 event 参数来自事件绑定函数；

**（17）which（）事件：**

定义：which 属性指示按了哪个键或按钮；

**实例：**

显示按了哪个键；

$("input").keydown(function(event){
      $("div").html("Key: " + event.which);
    });

语法：event.which

event：必需。规定要检查的事件。这个 event 参数来自事件绑定函数；

**（18）focus()事件：**

定义：当元素获得焦点时，发生 focus 事件，当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点；focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数；

**实例：**

当输入框获得焦点时，改变它的背景色；

$("input").focus(function(){
      $("input").css("background-color","#FFFFCC");
    });

**触发focus事件：**

定义：触发被选元素的dblclick事件；

语法：$(selector).focus()

**将函数绑定到focus事件：**

定义：规定当被选元素的 blur 事件发生时运行的函数；

语法：$(selector).focus(function)

function：可选。规定当发生 focus 事件时运行的函数；

JQuery（二）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI（二）

相关【Jquery】- 二维码

相关【JQuery】熟能生巧JQuery（二）——简介

相关 jQuery--动画篇(二)

相关 jQuery--事件篇(二)

相关 JQuery（二）

相关 jQuery基础（二）—— 解决jQuery冲突

相关 jQuery学习之二

相关【jQuery】学习笔记（二）

相关 jQuery学习（二）——jQuery选择器总结