JQuery（二）

最新推荐文章于 2023-05-27 23:48:40 发布
最新推荐文章于 2023-05-27 23:48:40 发布
阅读量159 收藏 2
点赞数
文章标签： jquery

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

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 文件中；例如：

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

JQuery名称冲突的解决办法：

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

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

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

（1）bind() 方法：

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

实例：

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

 

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

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

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

 

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

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

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

 

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

（2）blur()方法：

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

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

实例：

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

 

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

触发blur事件：

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

 

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

<script type="text/javascript">

$(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 事件发生时运行的函数；

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

（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()

<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
  $("button").click(function(){
    $("input").change();
  });
});
</script>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>

 

将函数绑定到change事件：

 

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

 

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

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

<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>

(4)chick()事件：

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

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

实例：

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

 

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

触发click事件：

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

 

语法：$(selector).click()

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();  //单击事件；
  });
  $("p").dblclick(function(){
    $("button").click(); //双击事件；
  });
});
</script>
<body>
<button>点击这里进行切换</button>
<p>双击本段落会触发上面这个按钮的 click 事件。</p>
</body>

 

将函数绑定到click事件：

 

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

 

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

（5）dblclick()事件：

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

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

实例：

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

 

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

触发dblclick事件：

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

 

语法：$(selector).dblclick()

<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
  $("p").click(function(){
    $("button").dblclick();
  });
});
</script>
<body>
<button>请双击这里</button>
<p>点击本段落会触发上面这个按钮的 dblclick 事件。</p>
</body>

 

 

 

将函数绑定到dblclick事件：

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

 

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
});
</script>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>

（6）delegate()事件：

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

实例：

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

 

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
语法：$(selector).delegate(childSelector,event,data,function)

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

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

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>

</body>

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>
</body>

（7）die()事件：

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

实例：

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

 

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

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

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

<script type="text/javascript">
function changeSize(){
$(this).animate({fontSize:"+=3px"});
}
function changeColor(){
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
  $("p").live("click",changeSize);
  $("p").live("click",changeColor);
  $("button").click(function(){
    $("p").die("click",changeSize);
  });
});
</script>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>

</body>

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

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

<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeColor()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
  $("p").live("click",changeSize);
  $("p").live("click",changeColor);
  $("button").click(function(){
    $("p").die("click",changeSize);
  });
});
</script>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
</body>

（8）error()事件：

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

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

实例：

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

 

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

Missing image!

");});

触发error事件：

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

 

语法：$(selector).error()

<script type="text/javascript">
$(document).ready(function(){
  $("img").error(function(){
    $("img").replaceWith("<p><b>图片未加载！</b></p>");
  });
  $("button").click(function(){
    $("img").error();
  });
});
</script>
<body>
<img src="/i/eg_tulip.jpg" />
<p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>
<button>触发图像的 error 事件</button>
</body>

将函数绑定到error事件：

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

 

$(selector).error(function)

 

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

<script type="text/javascript">
$(document).ready(function(){
  $("img").error(function(){
    $("img").replaceWith("<p><b>图片未加载！</b></p>");
  });
});
</script>
<body>
<img src="errorimg.gif" />
<p>如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>
</body>

（9）isDefaultPrevented()事件：

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

实例：

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

 

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

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

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    alert("Default prevented: " + event.isDefaultPrevented());
  });
});
</script>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
<p>请点击该链接，检查是否阻止了默认动作。</p>
</body>

 

（10）pageX()事件：

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

实例：

显示鼠标指针的位置：

 

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

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

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(document).mousemove(function(e){
    $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
  });
});
</script>
<body>
<p>鼠标指针位于： <span></span></p>
</body>

（11）pageY()事件：

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

实例：

显示鼠标指针的位置；

 

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

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

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(document).mousemove(function(e){
    $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
  });
});
</script>
<body>
<p>鼠标指针位于： <span></span></p>
</body>

（12）preventDefault()事件：

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

实例：

防止链接打开 URL；

 

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

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

 

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
  });
});
</script>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>

 

</body>

（13）result()事件：

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

实例：

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

 

$("button").click(function(e) {
  $("p").html(e.result);
});
语法：event.result

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

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(e) {
    return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY);
  });
  $("button").click(function(e) {
    $("p").html(e.result);
  });  
});
</script>
<body>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>；

（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 参数来自事件绑定函数；

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p, button, h1, h2").click(function(event){
    $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
  });
});
</script>
<body>
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件，下面的 div 会显示出哪个元素触发了该事件。</p>
<div></div>
</body>

（15）timeStamp（）事件：

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

实例：

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

 

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

 

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

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(e){
    $("span").text(e.timeStamp);
  });
});
</script>
<body>
<p>对下面这个按钮的点击事件发生在 1970 年 1 月 1 日之后 <span>unknown</span> 毫秒。</p>
<button>Click me</button>
</body>

（16）type（）事件：

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

实例：

 

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

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

 

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").bind('click dblclick mouseover mouseout',function(event){
    $("div").html("事件：" + event.type);
  });
});
</script>
<body>
<p>该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果您触发了其中的一个事件，下面的 div 中会显示出事件的类型。</p>
<div></div>
</body>

 

（17）which（）事件：

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

实例：

显示按了哪个键；

 

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

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

<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){
    $("div").html("Key: " + event.which);
  });
});
</script>
<body>
请随意键入一些字符：<input type="text" />
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
<div />
</body>

（18）focus()事件：

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

实例：

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

 

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

触发focus事件：

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

 

语法：$(selector).focus()

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>

将函数绑定到focus事件：

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

 

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

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

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

月庵浅色炉邻熏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery一级菜单和二级菜单
wen0627的博客
05-07 3427
1、先做一级菜单，第一步设置body，把大概样子写出来。 2、第二步-1、用css设置通配符。 3、第二步-2、设置ul标签基础样式 。 4、第二步-3、设置类样式。 5、设置jquery内容的第一步先引入jQuery文件。 6、第二步设置一个函数在里面放入我们要设置成的效果，获取文档在在载入页面是的效果，绑定类设置鼠标移入展示一级菜单内容，鼠标移出隐藏内容。 7、一级菜单的说完了，现在来说二级菜单的内容怎么设置移入显示然后在移入下一个就显示下一个隐藏上一个...
jQuery二级下拉滑动导航菜单特效代码
03-20
**jQuery二级下拉滑动导航菜单特效代码详解** 在网页设计中，导航菜单是至关重要的元素，它能够帮助用户快速定位并访问网站的不同部分。在众多的JavaScript库中，jQuery以其简洁的API和丰富的插件库深受开发者喜爱...
Page类和回调技术
takeshe的专栏
11-11 665
asp.net夜话之五：Page类和回调技术在今天我主要要介绍的有如下知识点：Page类介绍Page的生命周期IsPostBack属性ClientScriptManager类回调技术(CallBack)其中Page_Load就是页面加载的时候在服务器上运行的方法。单页模型的特点是HTML标记、控件代码及服务器端运行的C#代码全部包含在一个aspx页面中，Web服务器第一次运行该页面的时候会
jQuery中bind函数绑定多个事件
热门推荐
ICode联盟
08-03 2万+
名人名言：道德是真理之花。——雨果 在jQuery中绑定多个事件名称是，使用空格隔开，举例如下： $("#foo").bind("mouseenter mouseleave", function() { $(this).toggleClass("entered"); }); 在1.4版本以后，也可以如下绑定 $("#foo").bind({ click: func
jquery事件的切换，和多个事件的绑定
boss_way的博客
11-07 1146
1． 事件切换 1. hover 这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行。     1.1． toggle 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。 对绑定的多个函数 ，进行依次的轮流执行。
jquery二级联动下拉菜单
qq_38938763的博客
06-15 2540
二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 先看下效果 大类：   前端技术   程序开发   数据库   小类： 实现的效果就是当选择大类时，小类下拉框里的选项内容也随着改变。实现原理：根据大类的值，通过jQuery把值传给后台PHP处理，PHP通过查
jQuery二进制、十进制、十六进制转换
LiGuogang
11-12 1980
十进制数 d = 15，转为二进制数 b ？ // 十进制数 var d = 15; // 二进制数 var b = d.toString(2); // '1111' 十进制数 d = 15，转为十六进制数 h ？ // 十进制数 var d = 15; // 十六进制数 var h = d.toString(16); // 'f' 二进制数 b = ‘1111’，转为十进制数 d ？ // 二进制数 var b = "1111"; // 十进制数 var d = parseInt("1111", .
JQuery实现二级联动
qq_43379611的博客
04-06 1357
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>二级联动_JQ</title> <style> </style> <script src="jquery-1.9.1.min.js"></script> </head> <body> <!--下拉框.
jQuery二、常用API
李宥的博客
03-28 1197
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
jQuery实现二级侧边导航菜单
ovocc的博客
03-21 1796
案例向
如何使用JQuery实现Js二级联动和三级联动
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-27 2210
好了，以上代码就是使用JQuery库来实现的上面的二级三级联动，希望多多支持！
新浪网jQuery二级下拉菜单特效代码
03-20
【标题】"新浪网jQuery二级下拉菜单特效代码"是一个基于jQuery实现的网页导航菜单，其设计灵感来源于新浪网的门户网站。这个特效旨在为用户提供一个类似新浪网站的交互式二级下拉菜单，使得用户在浏览网页时能更方便...
jQuery二级联动分类菜单
05-01
"jQuery二级联动分类菜单"是一个基于jQuery JavaScript库的实现，利用了jQuery的强大功能来创建动态、响应式的菜单系统。在这个项目中，jQuery版本为1.11.1，这是一个稳定且广泛使用的版本，提供了丰富的DOM操作和...
jQuery二进制数字时钟代码.zip
09-22
《jQuery二进制数字时钟代码详解》 在IT领域，jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，极大地提高了开发效率。今天我们将深入探讨一个基于jQuery实现的二...
jQuery二维条形码识别代码.zip
10-10
【jQuery二维条形码识别代码.zip】是一个包含jQuery和CSS特效的资源包，主要用于实现网页上的二维条形码识别功能。这个压缩包的核心是帮助开发者在网页应用中集成二维码读取和解析的能力，使得用户可以通过扫描网页...
超市管理系统，基于javaweb.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
vue3面试题2023,84页，几十道vue面试题，准备vue的面试，这么一份文件就够了
08-15
vue3面试题2023： Vue 的优缺点  优点 1.创建单页面应用的轻量级Web应用框架 2.简单易用 3.双向数据绑定 4.组件化的思想 5.虚拟DOM 6.数据驱动视图 缺点 不支持IE8
【雷达跟踪】基于matlab雷达目标生成与跟踪【含Matlab源码 7220期】.zip
08-15
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
CTR2024中国广告主营销趋势调查报告.pdf
最新发布
08-15
【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2
jquery二级菜单
11-18
以下是一个简单的jQuery二级菜单的例子： HTML代码： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值