首页 > 代码库 > 初识jQuery

初识jQuery

2024-07-16 09:20:37   225人阅读

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=http://www.mamicode.com/"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=http://www.mamicode.com/"进入" class="enter">     <input type="button" value=http://www.mamicode.com/"退出" 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>

 

 

 

 

 


联系
我们