jQuery学习

jQuery编程学习笔记01

一、jQuery（helloworld）

<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //等待DOM元素加载完毕，类似window.onload
	alert("HelloWorld"); //弹出对话框显示HelloWorld
});

二、jQuery对象

1.jQuery 对象就是通过jQuery($())包装DOM对象后产生的对象

1. jQuery对象无法使用 DOM对象的任何方法 ,同样DOM对象也不能使用jQuery里的任何方法
   varvariable = DOM 对象
   $variable= jQuery对象

2. jQuery对象转成DOM对象
   •1)jQuery对象是一个数组对象, 可以通过 [index]的方法得到对应的DOM对象.
   •2)使用 jQuery 中的 get(index)方法得到相应的DOM 对象
   //获取一个jQuery的一个对象
   var btn = $(“button”);
   //2).jQuery对象是一个数组
   alert(btn.length);
   //3)1.可以通过数组的下标转为DOM对象
   alert(btn[1].firstChild.nodeValue);
   //2.可以通过数组的下标转为DOM对象
   alert(btn.get(0).firstChild.nodeValue);

3. DOM对象转成JQuery对象

    		//2.由DOM对象转为jQuery对象
    		var button=document.getElementById("button02");
    		alert(button);
    		var inp=document.getElementById("button02");
    		//2.1 选取一个DOM对象
    		alert($(inp).text());
    		alert($(inp).val());//得到的是button的值
   

三 jQuery选择器

//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")
		$(function() {
			$("#btn1").click(function() {
				$("#one").css("background", "#ffbbaa");
			});
			$("#btn2").click(function() {
				$(".mini").css("background", "#ffbbaa");//所有有的类
			});
			$("#btn3").click(function() {
				$("div").css("background", "#ffbbaa");//所有的div
			});
			$("#btn4").click(function() {
				$("*").css("background", "#ffbbaa");//所以元素
			});
			$("#btn5").click(function() {
				$("span,#two").css("background", "#ffbbaa");//span id为 two
			});


	});

	//