Jquery是一套Javascript脚本库，包括：jquery核心组件、Jquery UI组件、Jquery扩展组件
兼容目前市面上各种主流浏览器
<script type="text/javascript"> <!-- $( function (){ alert("相当于onload事件 "); } ); //--> </script>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script type="text/javascript" src="jquery-1.3.2.js"> </script> </head> <body> <script type="text/javascript"> <!-- $( function (){ // alert("相当于onload事件 "); } ); //--> </script> <table border="1" class="mytable" style="display:none"> <tr> <td>dffd</td> <td>dfffffff</td> <td>dffffff</td> </tr> <tr> <td>dffd</td> <td>dfffffff</td> <td>dffffff</td> </tr> <tr> <td>dffd</td> <td>dfffffff</td> <td>dffffff</td> </tr> <tr> <td>dffd</td> <td>dfffffff</td> <td>dffffff</td> </tr> </table> <input type="button" value="进入" class="enter"> <input type="button" value="退出" class="exit"> <script type="text/javascript"> <!-- //$(".mytable").show(); $(".enter").bind("click",function(){ $(".mytable").fadeIn(1000);//;show(); }) $(".exit").bind("click",function(){ $(".mytable").fadeOut()//hide(); }) //--> </script> </body> </html>
$(".exit")函数就是选择一个html文档中的html元素，是一个jquery对象。选择的参数为css选择器的名称。
Jquery对象和dom对象
Jquery对象称为jquery对dom的包装集。
用jquery函数得到的对象都是jquery包装集对象。只有jquery对象能够调用jquery库中的函数；
Dom对象只能使用传统的dom函数
两个对象之间可以转换
Dom对象转换为jquery包装集对象：
$(dom对象)
<script type="text/javascript"> <!-- var mytable=document.getElementById("mytable"); //alert(mytable.nodeName); $(mytable).show(); //--> </script>
Jquery对象转换为dom对象方法：
Jquery对象[0]
<script type="text/javascript"> <!-- var mytable=document.getElementById("mytable"); //alert(mytable.nodeName); var jqueryObject=$(mytable); jqueryObject.show(1000); var domObject=jqueryObject[0]; alert(domObject.nodeName); //--> </script>
Jquery对html的操作
|
<div id="mydiv"></div>
<script type="text/javascript"> <!-- //<p>lasdf<b>jadf</b>asdfasdf</p> /* var mydiv=document.getElementById("mydiv"); var pele=document.createElement("p"); pele.appendChild(document.createTextNode("lasdf")); var bele=document.createElement("b"); bele.appendChild(document.createTextNode("jadf")); pele.appendChild(bele); pele.appendChild(document.createTextNode("asdfasdf")); mydiv.appendChild(pele); */ // $("<p>lasdf<b>jadf</b>asdfasdf</p>").appendTo("#mydiv"); //$("#mydiv").append("<p>lasdf<b>jadf</b>asdfasdf</p>");
/* var pele=$("<p>"); pele.append("lasdf"); var bele=$("<b>"); bele.append("jadf"); pele.append(bele); pele.append("asdfasdf"); $("#mydiv").append(pele); */
var pele=$("<p>") pele.append("lasdf").append("<b>jadf</b>").append("asdfasdf");; $("#mydiv").append(pele);
//--> </script> |