DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
<script type="text/javascript">
var itBooks = [{"bookid":"BK100","title":"Java核心基础","price":69},
{"bookid":"BK110","title":"Oracle应用","price":90},
{"bookid":"BK120","title":"C#语言入门","price":60},
{"bookid":"BK130","title":"Ajax异步处理","price":58},
]
/* 文档加载完成后给第一个按钮添加鼠标单击事件,如果价格小于60购买此书 */
$(function(){
$('p button:first').on('click',{'books':itBooks},function(e){
var bookArr = e.data.itBooks;
$(bookArr).each(function(i){
if(this.price <= 60)
alert(this.title+" 比较便宜 价格是 "+this.price+" 我要买");
else
alert(this.title+" 比较贵 价格是 "+this.price+" 买不起");
})
});
})
/* 文档加载完成后为p段落中第二个按钮添加鼠标单击事件
计算传入两个整数的和
和键盘按下事件,计算传入两个整数的积 */
var f1 = function sum(e){
alert('和的结果是 '+(e.data.n + e.data.m))
}
var f2 = function ji(e){
alert('积的结果是 '+(e.data.n * e.data.m))
}
$(function(){
//$('p button:eq(1)').on({'click':f1,'keydown':f2},{n:45,m:55});
$('p button:eq(1)').on({'click':function(e){
alert('和的结果是 '+(e.data.n + e.data.m));
},'keydown':function(E){
alert('积的结果是 '+(E.data.n * E.data.m));
}},{n:45,m:55});
})
script>
head>
<body id="body_">
<p class="c_1">
<button>点击遍历数组button>
<button>测试绑定多个事件button>
<button>按钮三button>
p>
<label onclick="removeEven()" >移除事件label>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script type="text/javascript" src="../js/jquery-3.6.0.js">script>
<script type="text/javascript">
/* 当提交表单时,如果用户名文本框值为空则禁止提交表单 */
$(function(){
$('form').bind('submit',function(){
if($('#a').val() === ''){
alert('用户名称必需填写');
return false;
}
return true;
});
});
/*为按钮1注册一个一次性鼠标单击事件,改变按钮的文本*/
var content ="一次性点击事件";
$(function(){
$('p button:first').one('click',{content},function(e){
alert("单击事件发生,函数被调用");
this.innerText = e.data.content;
});
});
script>
head>
<body id="body_">
<p class="c_1">
<button>按钮一button>
<button>按钮二button>
<button class="b_1">按钮三button>
p>
<label>移除事件label>
<form action="http://www.baidu.com">
用户名:<input name="java" value="" id="a" />
<input type="submit" value="提 交">
form>
body>
html>