首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery总结

2012-08-27 
JQuery小结一. JQuery概述Jquery是一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS

JQuery小结
一. JQuery概述
Jquery是一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML,documents、events、实现动画效果,并且方便地为网站提供AJAX交互,jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

二. JQuery初步
1.如果在<body onload=””>中有onload事件那么不在自动执行ready事件
2.Dom对象不能使用jquery的方法,JQuery对象不能使用DOM中的方法,但他们之间可以相互转化
3.DOM对象和JQuery对象的转化
(1).DOM对象转化成JQuery对象的方式 :
    $(DOM对象)--------->JQuery对象
    var dom=window.document;//DOM对象
    var $dom=$(dom);//JQuery对象
(2).JQuery对象转化成DOM对象
    JQuery对象返回的是一个数组对象:JQuery对象[index] 或 JQuery对象.get(index)
示例:
alert($("#thead")[0].innerHTML);//获取标签和文本内容  先转化成DOM对象
或 Var dom=$("tr")[$(tr).size()-1]  (最后一个值) 或
Var dom=$(".rdc").get(0)

三. JQuery案例+讲解:
1.页面载入事件:
    /** JQuery对象处理匿名函数 */
    $(document).ready(function(){
        alert("JQuery的第一个入门案例");//加载HTML,不需等待,立即加载
     });
2.选择器:
<script type="text/javascript">       
    $(document).ready(function(){    
       alert($("#thead"));//ID选择器JQuery对象            
        alert($(".rdc"));//Class选择器JQuery对象      
        alert($("*"));//匹配所有元素选择器的JQuery对象       
        alert($(".rdc").get(0).innerHTML);    
       alert($("tr"));//根据给定的元素名称获取所有的jquery对象  匹配所有的tr标签    
        alert($("tr,tr.rdc"))//匹配所有选择器的JQuery组合对象 匹配所有的tr及tr下的rdc
     });      
</script>

页面源码:
<table border="1px">
      <thead>
        <tr id="thead">
           <th>姓名</th>       
           <th>密码</th>       
           <th>邮箱</th>       
        </tr>
      </thead>
      <tbody>
        <tr class="rdc">
          <td>zhang sansan1</td>
          <td>zhang sansan1</td>
          <td>zhang sansan1@163.com</td>
        </tr>
        <tr
          <td>zhang sansan2</td>
          <td>zhang sansan2</td>
          <td>zhang sansan2@163.com</td>
        </tr>
      </tbody>
</table>

热点排行