JQuery实例（草稿）

首先要有JQuery.js文件，可在官网上下
其次要引入js文件。如：

<script type="text/javascript" src="jquery-1.7.1.js"></script>

1、单击超链接弹出对话框

<script type="text/javascript">
		$(document).ready(function()
		{
			$("a").click(function()
			{
				alert("Hello World!");
			});
		});
	</script>

2、单击button按钮改变id为one的css样式……

<script type="text/javascript">
		$(document).ready(function()
		{
			$("#button1").click(function()
			{
				$("#one").css("background","red");
			});
			$("#button2").click(function()
			{
				$(".mini").css("background","blue");
			});
		});
	</script>

3、

 <script type="text/javascript">
    	$(document).ready(function()
    	{
    		//alert($("a")[0].href);
    		//alert($("a").text());
    		//alert($("a").html());
    		alert($("input[type=checkbox]").length);
    		var v1=parseInt($("input[type=checkbox]").length);
    		$("input[type=button]").click(function()
    		{
    			//$("#show~a").css("background","red");
    			//$("#show").nextAll("a").css("background","red");
    			//$("#show").siblings("a").css("background","red");
    			//$("#show").next("a").css("background","red");
    			//$("div:eq(1)").css("background","red");
    			//$('div:empty').css("background","red");
    			//$('div:has(a)').css("background","red");
    			//$('div:parent').css("background","red");
    			//$("div#show :nth-child(2)").css("background","red");
    			//$("div#show :first-child").css("background","red");
   			 	 // $("div.123 :last-child").css("background","aqua");
   			 	 //$("div.123 :only-child").css("background","fuchsia");
   			 	// var $v123=$("ul li:eq(2)")
				//$v123.html("<b>shigeren</b>");
				//var text = $v123.attr("title","ddddddd")
				//var text1=$v123.attr("title")
				//alert(text);
				//alert(text1);
				//str="";
				//for(var i=0;i<v1;i++)
				//{
				//	str+="<input type='text'/><br/>";
				//}
				//$("div#456").append(str);
    		});
    		$(":checkbox").click(function()
			{
				var str="";
				$("input:checked").each(function()
				{
					str += $(this).attr("value")+",";
				});
				$("div:first").html('<font color=\'red\'><b>'+"你共选择了"+$("input:checked").length+"部电影，他们分别是："+str+"</b></font>");
			});
    	});
    </script>

body里的，例子……
   

<a href="#"><b>看电影先：</b></a><br/>
    <input type="checkbox" name="movie" value="失恋33天">失恋33天<br/>
    <input type="checkbox" name="movie" value="青春失乐园">青春失乐园<br/>
    <input type="checkbox" name="movie" value="丁丁历险记">丁丁历险记<br/>
    <input type="checkbox" name="movie" value="白蛇传">白蛇传<br/>
    <input type="checkbox" name="movie" value="地心历险记">地心历险记<br/>
    <input type="checkbox" name="movie" value="死亡笔记">死亡笔记<br/>
    <input type="checkbox" name="movie" value="死神来了">死神来了<br/>
    <input type="checkbox" name="movie" value="速度与激情">速度与激情<br/>
    <input type="button" value=">>>>>>请选择你喜欢的电影">
    <div id="456"></div>
    <div id="show">
	    <a id="on2e">dddddddfffff</a>
	    <a id="two">dddddddfffff</a>
	    <a>qq</a>
	    <div>ddddwww</div>
	    <div>q</div>
	    <a class="three">dddddddfffff</a><br/>
    </div>
    <div id="123"><a>dddddddssssssssssssssssssssssssss</a></div>
    <a></a>
    <div id="one">ddddwww</div>
    <div>ddddwww</div>
    <ul>
    	<li title="rw">我</li>
    	<li title="rw1">是</li>
    	<li title="rw2">安</li>
    	<li title="rw3">徽</li>
    	<li title="rw4">人</li>
    </ul>

4、事件绑定

<script type="text/javascript">
		$(function()
		{
			//为span元素绑定click事件
	$("span").bind("click",function(event)
	{
		var txt = $("#msg").html()+"<p>内层span元素被点击</p>";
		$("#msg").html(txt);
		event.stopPropagation();//阻止事件冒泡
	});
	$("#content").bind("click",function(event)
	{
		var txt = $("#msg").html()+"<p>外层div元素被点击</p>";
		$("#msg").html(txt);
		event.stopPropagation();//阻止事件冒泡
	});
	$("body").bind("click",function(event)
	{
		var txt = $("#msg").html()+"<p>body元素被点击</p>";
		$("#msg").html(txt);
	});
		});
	</script>

body里的，例子……

<div id="content">
			外层DIV元素
			<span>内层span元素</span>
			外层DIV元素
	</div>
	<div id="msg"></div>

5、登录的简单验证

<script type="text/javascript">
		$(function()
		{
			$("#uname").bind("focus",function(event)
			{
				if($("#uname").val()=="请输入用户名")
				{
					$("#uname").val("");
				}
			});
			$("#uname").bind("blur",function(event)
			{
				if($("#uname").val()=="")
				{
					$("#uname").val("请输入用户名");
				}
			});
			//为span元素绑定click事件
			$("#sub").bind("click",function(event)
			{
				alert($("#psw").val());
				//return false;
				event.preventDefault();
			});
		});
	</script>

body里的，例子……

<form action="test.html" name="myForm" id="form1">
		用户名:<input type="text" name="uname" id="uname" value="请输入用户名"><br/>
		密码:<input type="password" name="psw" id="psw" value="password"><br/>
		<input type="submit" id="sub" value="登录">
<div id="123"></div>
  </form>

6、鼠标的移动坐标

<script type="text/javascript">
		$(function()
		{
			$(document).mousemove(function(e)
			{
			    $("#123").text(e.pageX + ", " + e.pageY);
			    $("#uname").val(e.pageX + ", " + e.pageY);
			});

		});
	</script>

body里的，例子……见上面
7、jquery的一些函数

<script type="text/javascript">
		$(document).ready(function()
		{
			$("input[type=button]").click(function()
			{
				//$("p").append("<b>Hello world</b>");
				//$("<b>Hello world</b>").appendTo("p");
				//$("p").prepend("<b>Hello world</b>");
				//$("<b>Hello world</b>").prependTo("p");
				$("<b>Hello world</b>").insertAfter("p");
			});
		});
	</script>

body里的，例子……

<div id="123">div id=123</div>
    <p title="456">p  id=456</p>
    <button id=789>button</button>
    <input type="text"><br/>
    <input type="button" value="点击我">

8、

<script type="text/javascript">
		$(document).ready(function()
		{
			$("input[type=button]").click(function()
			{
				var v1=$("<input type='file'/>");
			    var v2=$("<input type='button' value='删除'/>")
				var v3=$("<br/>");
				v2.click(function()
				{
					v2.remove();
					alert(v2.next().text());
					v2.prev().remove();					
				});
				$("#div1").append(v1);
				$("#div1").append(v2);
				$("#div1").append(v3);
			});
		});
	</script>

body里的，例子……

<input type="file" >
    <input type="button" value="更多的选择……">
    <div id="div1"></div>

>>>>>
就列举这么多。下面有个JQuery的API可以查看……