jQuery笔记三--事件与函数

确保用户只能点击一次：

删除事件：元素绑定到一个事件之后，可以从元素将这个事件删除，是事件不再触发。达到只能点击一次。

$("#myElement").bind('click', function(){});

$("#myElement").unbind('click',function(){});

$(document).ready(function() {
$(".guess_box").click(function() {
var discount = Math.floor((Math.random()*5) +5);
var discount_msg = "<p>You discount is " + discount + "%</p>";
$(this).append(discount_msg);

$(".guess_box").each(function(){
$(this).unbind('click');
}); // end each function
}); // end click function
}); //end doc ready

 

点击事件：

绑定事件：为元素添加一个事件时，称为为这个元素绑定一个事件。

触发事件：键盘、鼠标、表单、文档加载、浏览器事件

键盘事件：keydown/keypress/keyup

浏览器事件：error/resize/scroll

 

页面加载时为元素增加事件：

$("#myElement").click(function(){});

页面加载之后为元素增加事件，

$("#myElement").bind('click', function(){});

 

函数：

创建函数把折扣吗隐藏在一个随机的方框中，创建函数为折扣吗本身生成一个随机数：

 addClass/removeClass添加、删除css类

hover事件处理两个函数参数：mouseenter/mouseleave事件

 

$(document).ready(function() {
$(".guess_box").click(checkForCode);

function getRandom(num) {
var my_num = Math.floor(Math.random() * num);
return my_num;
}

var hideCode = function () {
var numRand = getRandom(4);
$(".guess_box").each(function(index, value) {
if (numRand == index) {
$(this).append("<span id='has_discount'></span>");
return false;
}

});
}

hideCode();

function checkForCode () {
var discount;
if($.contains(this, document.getElementById("has_discount"))){
var my_num = getRandom(100);
discount = "<p>Your Code: CODE" + my_num +"%</p>";
} else {
discount = "<p>Sorry, no discount this time!</p>";
}

$(".guess_box").each( function() {
if($.contains(this, document.getElementById("has_discount"))){
$(this).addClass("discount");
}else{
$(this).addClass("no_discount");
}

$(this).unbind();
});

$("#result").append(discount);
}

$(".guess_box").hover(
function() {
$(this).addClass("my_hover");

},
function(){
$(this).removeClass("my_hover");
});

});

转载于:https://www.cnblogs.com/sky-zhao/p/5064633.html