11.20第13节课

一、jQuery基础

jQuery 的理念是：write less,do more。
jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。
1.jQuery优势
1. 轻量级。压缩后可以保持在30kb左右。
2. 强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
3. 出色的DOM操作的封装。
4. 可靠的事件处理机制。
5. 完善的Ajax。
6. 不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。
2.使用jQuery
jQuery 库文件一般有生产版和开发版。区别在于生产版经过了压缩，只有30kb左右，我们下载使用开发版就可以了。
使用时，在页面引入 jquery.js 库文件就可以使用了。

<script type="text/javascript"   src="js/jquery.js"><script>

简单编写jQuery:

$(document).ready(function(){ alert(‘Hello jQuery’); });

window.onload方法和$(document).ready(）方法的区别。 - window.onload必须等待网页中所有内容加在完毕才能执行。 -$(document).ready(）是网页中所有DOM结构绘制完成后就执行，可能DOM元素关联的东西并没有加载。

链式风格

//等待dom元素加载完毕.
$(document).ready(function(){
    $(".level1 > a").click(function(){
        $(this).addClass("current")   //给当前元素添加"current"样式
        .next().show()                //下一个元素显示
        .parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
        .next().hide();                //它们的下一个元素隐藏
        return false;//事件处理阻止了默认的事件行为并停止了事件通过dom向上冒泡
    });
});

二、jQuery对象和DOM对象

1.jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。拥有jQuery里面的方法。
例如：

lg($(‘#dd’));
lg(document.getElementById(‘dd’));

jQuery对象中无法使用DOM对象的任何方法。
DOM对象也不能使用jQuery里面的方法。
2.JQuery对象和DOM对象的相互转换。
1、jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。

 //第一种方法
lg($('#dd'));
lg($('#dd')[0]);
//第二种方法
lg($('#dd'));
lg($('#dd').get(0));

2、DOM对象转化成jQuery对象。
只需要把DOM对象包装起来，既可以获得一个jQuery对象了。

var dd = document.getElementById('dd');
    var $dd = $(dd);
    lg($dd);

三、jQuery选择器

1、基本选择器

2、层次选择器

3、过滤选择器

四、课堂练习
1、导航练习部分代码

<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.level1 a').click(function(){
            $(this).addClass('current').next().show().
            parent().siblings().children('a').removeClass('current').next().hide();
            return false;
        });
    });
</script>

2、品牌标签

<script type="text/javascript">
    $(function(){
        var $category = $('ul li:gt(5):not(:last)');
        $category.hide();
        var $toggleButton = $('div.showmore>a');
        $toggleButton.click(function(){
            if($category.is(':visible')){
                $category.hide();
                $(this).find('span').css('background','url(img/down.gif) no-repeat 0 0').text('显示全部品牌');

            }else{
                $category.show();
                $(this).find('span').css('background','url(img/up.gif) no-repeat 0 0').text('隐藏部分品牌');
            }
            return false;
        });
    });
</script>