jQuery_ 绑 定事件处理器上|学习笔记

开发者学堂课程【jQuery 开发教程:jQuery_ 绑定事件处理器上】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://dejavascriptveloper.ali开发者模式怎么关闭yun.com/learning/course/362/detail/4287

jjavascript:void(0)Query_ 绑定事件处理器上

一、.bind()

.bind():为元素绑定一个事件处理器。

(1)绑定事件 .bind(),现在已经不推荐使用

<!DOCTYPE h开发者选项怎么关闭tml>

<html开发者大会>

<head>

​​<meta charset=javascript download"utf-8">

​​<title></title>

// 引用 jQuery

​​<script src="jquerjavascript百炼成仙y-2开发者模式有什么用.2.1.min.js"></sjavascriptcript>javascript菜鸟教程

</head>

<body>

​​<button id="btn">按钮</button>

<script>

​​$(function()javascript什么意思{

// 可以有第三个开发者模式打开好还是关闭好参数,第三个参数为布尔开发者选项在哪类型,为 false 时是为阻止冒泡事件、默认事件,为 true 时则为冒泡事件。

// 默认事件是指浏览器会有一个自动的事件处理,比如说a链接,点击将会跳转。

$("#btnjavascript百炼成仙免费阅读").bind("click&javascript download#034;,function(){

alert(haha);

});

})

</script>

</body>

</html>

效果截图:开发者模式有什么危害;

点击将会跳出窗口。

jQuery_ 绑 定事件处理器上|学习笔记

(1)可以绑定两个事件,而且javascript download互相不会覆盖

鼠标略过或点击都会触发。

<!DOCTYPE html>

<html>

<head>javascript菜鸟教程;

​​<me开发者选项怎么设置最流畅ta charset="utf-8">

<title><javascript;/title>

​​<script src="jquery-2.2.1.min.js"></script开发者选项在哪>

</head>开发者大会

<body>

​​<button id="javascript百炼成仙免费阅读;btn">开发者模式打开好还是关闭好按钮</button>

<script>

​​$(function(){

​​$("#btn").bind("click mousever",function(){

alert(haha)javascript什么意思;

​​})开发者模式怎么关闭;

​​​})

</script>

</body>

</html>

效果截图:

鼠标略过会弹出一个弹出框,点击开发者选项怎么设置最流畅也会弹出弹出框。

ÿjavascript09;让每个事件弹出不一javascript download样的内容

<!DOCT开发者模式有什么用YPE ht开发者模式怎么关闭ml开发者选项开启好还是关闭好>

<javascript;h开发者选项怎么设置最流畅tml>

<head>

​​<meta charset&#开发者模式打开好还是关闭好061;"u开发者选项在哪tf-8">

​​<title></tit开发者选项开启好还是关闭好le>开发者

<script src="jquejavascript怎么读ry-2.2.1.min.js"></script&gjavascript:void(0)t;

</head>

<body开发者大会>

&javascript downloadlt;button id="btjavascript百炼成仙n">按钮<javascript download;/button>

<script>

​​$(function(){

​​$(javascript百炼成仙"#btn").bind({

​​​click:function(){

​​alert("click");

​​},​​​​​​// 对象之间要开发者选项怎么设置最流畅用逗号分开

mouseover:function(){

alert("mouseover");

​​},

})

})

</script>

</body>

</html>

效果截图:

鼠标滑过

jQuery_ 绑 定事件处理器上|学习笔记

鼠标点击

jQuery_ 绑 定事件处理器上|学习笔记

pbtn实现按钮效果

转到百度的页面,当鼠标在按钮滑进滑出会javascript百炼成仙免费阅读看到不同的效果javascriptf0c;可以用 jQuery 实现这样的效开发者选项怎么关闭果。

代码一

<!DOCTYjavascript是干什么的PE html>

<html>

<head>

​​<meta c开发者选项怎么关闭harset=javascript什么意思4;utf-8">

​​<title></title>

​​<styljavascripte>

​​p{

​​width: 100px;

​​height: 50px;开发者大会

​​background-color: dajavascript downloadrkgreen;

​​border-radius: 5px;

​​text-align: center;​​​​// 文字水平居中

​​ljavascript是干什么的ine-height: 50px;​​​​// 垂直居中

​​margin: 0 auto;​​​​// 居于浏览器中间

​​color:javascript怎么读 #fffffjavascript百炼成仙免费阅读f;

font-size: 20px;javascript download

}

.pbtn{

background-color: green;

}

<javascript怎么读/style&gjavascript什么意思t;

// 引入 jQuery

​​<script src="jquery开发者模式有什么危害-2.2.1.min.js"></script>

</head>

<body>

<p>按钮</p&开发者模式有什么用gt;

<script>

​​$(function(){

​​$(&#javascript:void(0)034;p").bind({

​​mouseover:function(){

// 实现当前对象

​​$(this).addClass("pbtn");

},

// 鼠标滑出

​​mouseout:function(){开发者模式打开好还是关闭好

// 当前对象javascript百炼成仙免费阅读的类移除

$(this).remojavascript是干什么的veClass("pbtn");

​​}

​​})

})

</script>

</body>

</html>

2、代码二(减少代码量)

<!DO开发者模式有什么危害CTYPE html>

<html>

<head>

​​<meta charset=javascript什么意思"utf-8">

​​<title></title>

​​&开发者选项怎么关闭lt;stjavascriptyle>

​​p{

​​​width: 100px;

​​height: 50px;

​​background-color: darkgreen;

​​b开发者模式打开好还是关闭好order-radius: 5px;

javascript downloadtext-align: center;

​​line-height: 50px;

​​margin: 0 auto;

​​color: #ffffff;

​​javascriptfont-size: 20px;

​​}

​​​.javascript是干什么的pbtn{

​​​background-color: green;

​​}开发者模式打开好还是关闭好

</st开发者ylejavascript菜鸟教程>

​​javascript什么意思<script src="jquery-2.2.1.min.js"></script>

</head>

<body>

​​<p>按钮</p>

<scriptjavascript download>

​​$(function(){

​​$("p").bind("mouseover mouseout",funjavascript菜鸟教程ctio开发者选项开启好还是关闭好n(){

// 获取当前指针javascript百炼成仙txt开发者大会f0c;toggleClass :在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在开发者模式打开好还是关闭好,或开发者模式怎么关闭只交换属性。

// 检测这个 p 标签是否有这个 pbtn 类名,如果有就删掉,如果没有就添加上。开发者选项在哪

$(this).toggleClass("pbtn");

​​})

})

</script>

&javascript百炼成仙txtlt;/body>

</html>