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 name="code"><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可以查看……