初识jQuery

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的操作

<!--

//<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>

posted @ 2014-08-07 23:08 淡无心阅读(205) 评论(0) 编辑收藏举报

淡无心

初识jQuery

Jquery对象和dom对象

Jquery对html的操作

公告