jQuery初步

一、jQuery的特点

(1)轻量级

(2)强大的选择器

(3)出色的DOM封装

(4)可靠的事件处理机制

(5)完善的Ajax（$.Ajax）

(6)出色的浏览器兼容性

(7)丰富的插件支持

(8)完善的文档

二、jQuery的环境配置

可以通过官方网站获取最新的jQuery的库

http://www.jquery.com/download/

Paste_Image.png

三、jQuery对象和DOM对象

Paste_Image.png

四、jQuery对象和DOM对象转换

Paste_Image.png Paste_Image.png Paste_Image.png

五、jQuery对象和DOM对象的应用

1.引入jquery库

<!--引入Jquery库-->
       <script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>

2.创建函数

        <script type="text/javascript">
            jQuery(document).ready(function(){
                var span = document.getElementById("show").firstChild.nextSibling;
                alert(span.innerHTML);
                alert($(span).html());
                
                获得一个span的数组元素
                var $span = $("span");
                alert($span.html());
                var span = $span.get(0);
                alert(span.innerHTML);
                var span1 = $span[0];
                alert(span1.innerHTML)
            });
            
            $(function(){
                var span = document.getElementById("show").firstChild.nextSibling;
                alert(span.innerHTML);
                alert($(span).html());
            
                获得一个span的数组
                var $span = $("span");
                alert($span.html());
                var span = $span.get(0);
                alert(span.innerHTML);
                var span = $span[1];
                var span = $span.get(1);
                alert(span.innerHTML);
            
            });
        </script>   

3.DIV

<div id ="show">
            <span>要显示的内容1；</span>
            <span>要显示的内容2；</span>
            <span>要显示的内容3；</span>
</div>