Head First JQuery学习笔记(一)

最新推荐文章于 2021-12-15 15:49:02 发布

J_array

最新推荐文章于 2021-12-15 15:49:02 发布

阅读量542

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u012769750/article/details/43406931

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一. jQuery入门

1. jQuery是一个专门用来动态改变Web页面文档的JavaScript库

2. 把<script>标记放在最下面，意味着有助于提高页面的加载速度

二. 选择器与方法

1. append动作：向一个已有元素插入内容

2. JavaScript中，“this”指示代码中要处理的DOM元素，在this外增加$()就得到了$(this)，利用这个选择器，我们可以使用jQuery方法与DOM元素交互。在很多面向对象编程语言中，this用来引用调用当前执行方法的那个对象

3. Math.floor方法将一个数取整为最接近的证书，并返回结果；Math.random方法返回一个介于0和1的随机数

三. jQuery事件与函数

1. 绑定事件：为元素增加一个事件。为元素绑定事件有两种方法。

便利方法：$("#myElement").click(function(){});
普通方法：$("#myElement").bind('click',function(){});

便利方法就是普通方法的一种快捷方式，不过只有当DOM已经存在时才可以使用

2. 函数的两种表达方式：函数声明，函数表达式。

函数声明：function myFunc1(){}

函数表达式：var myFunc2= function(){}

函数声明与函数表达式的主要区别在于调用的时间。

函数的返回类型可以是一个数，一个文本串，或者甚至可以是一个DOM元素（对象）

3. 作为一个处理函数调用时，函数不需要括号

4. $.contains是jQuery库中的一个静态方法，有两个参数。这个方法会检查第一个参数的所有子元素，查看其中是否包含第二个参数的内容

5. 代码实例：

<!-- index.html -->

<!DOCTYPE html>
<html>
	<head>
		<title>Jump for Joy</title> 
		<link href="styles/my_style.css" rel="stylesheet">
	</head> 
	<body>
		<div id="header">
			<h2>Jump for Joy Sale</h2>
		</div>
		<div id="main">
			<div class="guess_box"><img src="images/jump1.jpg"/></div>
			<div class="guess_box"><img src="images/jump2.jpg"/></div>
			<div class="guess_box"><img src="images/jump3.jpg"/></div>
			<div class="guess_box"><img src="images/jump4.jpg"/></div>
			<span id="result"></span>
		</div>
		
		<script src="scripts/jquery-1.6.2.min.js"></script>
		<script src="scripts/my_scripts.js"></script>
	</body>
</html>

/* my_style.css */

div{
	float:left;
	border: solid #000 3px;
	text-align:left;
}

.guess_box{
	height:245px;
}

#header{
 	width:100%;
 	border: 0px;
 	height:50px;
}

#main{
	background-color: gray;
	height: 500px;
}

.my_hover{
	border: solid #00f 3px;
}

.discount{
	border: solid #0f0 3px;
}

.no_discount{
	border: solid #f00 3px;
}

// my_scripts.js

$(document).ready(function() {

	$(".guess_box").click( checkForCode );
	
	function getRandom(num){
		var my_num = Math.floor(Math.random()*num);
		return my_num;
	}
	
	var hideCode = function houdini(){
	  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 = "<hr>Sorry, no discount this time!" ;
		}
		$(".guess_box").each(function() { 
			if($.contains(this, document.getElementById("has_discount") ) )
			{
				$(this).addClass("discount");		
			}else{
				$(this).addClass("no_discount");            
			}
			$(this).unbind();
		});
		$("#result").append(discount);   
	} // End checkForCode function 
	
	$(".guess_box").hover(
	  function () {
		$(this).addClass("my_hover");
	   },
	   function () {
		  $(this).removeClass("my_hover");
	   });  // End hover
});