1. Jquery基本功能
* 访问和操作Dom元素
* 控制页面样式
* 对页面事件进行处理
* 提供大量插件
* 与ajax技术完美结合
2. 小入门
* $(document).ready(function(){})<==>$(function(){})
类似于javascript的功能:window.οnlοad=function(){}
* 事件操作链式书写
当用户点击Class名为divTitle的元素时,自己增加名称为divCurrColor的样式,同时,接下来的Class名称为divContent的元素显示出来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery事件的链式写法</title> <script language="javascript" type="text/javascript" src="Jscript/jquery.js"></script> <style type="text/css"> .divFrame{width:260px;border:solid 1px #666;font-size:10pt} .divTitle{background-color:#eee;padding:5px} .divContent{padding:5px;display:none} .divCurrColor{ background-color:Red} </style> <script type="text/javascript"> $(function(){ $(".divTitle").click(function(){ $(this).addClass("divCurrColor").next(".divContent").css("display","block"); }); }); </script> </head> <body> <div class="divFrame"> <div class="divTitle">主题</div> <div class="divContent"> <a href="#">链接一</a><br /> <a href="#">链接二</a><br /> <a href="#">链接三</a> </div> </div> </body> </html>
* jquery 访问Dom对象
jQuery代码: var tDiv = $("#divTmp");//获取jQuery对象 var oDiv = $("#divOut"); var cDiv=tDiv.html();//获取jQuery对象中的内容 oDiv.html(cDiv);//设置jQuery对象的内容 对应的javascript代码: var tDiv = document.getElementById("divTmp");//获取jQuery对象 var oDiv =document.getElementById("divOut"); var cDiv=tDiv.innerHTML;//获取jQuery对象中的内容 oDiv.innerHTML=cDiv;//设置jQuery对象的内容
$("#text1").val()<==>document.getElementById("text1").value
$("#divTip").css("display","block").html("test")
<==>
document.getElementById("divTip").style.display="block";
document.getElementById("divTip").innerHTML="test";