Jquery 基础知识 第一章

 01-JQUERY入门导读
    02-JAVASCRIPT库
    什么是js库？
    JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）
    03-jQuery概述
    jQuery优点有哪些？
    1．轻量级。核心文件才几十kb，不会影响页面加载速度。
    2．跨浏览器兼容，基本兼容了现在主流的浏览器。
    3．链式编程、隐式迭代。
    4．对事件、样式、动画支持，大大简化了DOM操作。
    5.支持插件扩展开发。有着丰富的第三方的插件，例如:树形菜单、日期控件、轮播图等。6．免费、开源。

    04-jQuery基本使用-入口函数
    如何下载jquery？
    https://jquery.com/
    jquery入口函数的两种写法？
    //第一种:简单易用。
    $ ( function ( ) {
    ... l/此处是页面DOM加载完成的入口
    }) ;
    //第二种:繁琐，但是也可以实现
    $ ( document ) .ready ( function ( ){
    ... 1l此处是页面pOM加载完成的入口
    } );

    05-jQuery顶级对象$
    $和jQuery有什么区别和联系？
    $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $
    $在jQuery中的作用是什么？
    $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
    06-DOM对象和jQuery对象
    DOM对象和jQuery对象有什么区别？
    07-DOM对象和jQuery对象相互转换
    如何将DOM对象转为jQuery对象？
    $(DOM对象)
    如何将jQuery对象转为DOM对象？
    jQuery对象[索引值]
    jQuery对象.get(索引值)
    08-jQuery常用API导读
    09-jQuery基本和层级选择器
    jQuery中选择器的基本写法是什么？
    $("选择器")
    名称 用法 描述
    ID选择器 $(""#id") 获取指定ID的元素
    全选选择器 $('*') 匹配所有元素
    类选择器 $(".class") 获取同一类class的元素
    标签选择器 $("div") 获取同一类标签的所有元素
    并集选择器 $("div,p,li") 选取多个元素
    交集选择器 $("li.current") 交集元素


    10-jQuery隐式迭代
    什么叫做隐式迭代？
    简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
    11-jQuery筛选选择器
    如何选择第一个元素？
    :first
    如何选择某个位置的元素？
    :eq(index)
    index从0开始
    奇偶数位置的元素如何选择？
    :odd
    :even
    12-jQuery筛选方法-选取父子元素
    如何筛选父级元素？
    parent()
    如何筛选子级元素？
    children(选择器)
    如何筛选元素内部任意层级的元素（儿子，孙子..）？
    find(选择器)
    13-新浪下拉菜单
    14-jQuery其他筛选方法
    如何选择除了自身元素之外的所有亲兄弟？
    siblings(选择器)
    如何选择特定位置的元素？
    eq(index)
    判断是否有某个类名?
    hasClass(类名)
    15-jQuery排他思想
    排他思想：当前元素设置样式，其余的兄弟元素清除样式
    $(this).css(“color”,”red”);
    $(this).siblings(). css(“color”,””);
    16-淘宝服饰精品案例
    如何获取当前元素的索引号？
    $(this).index()
    17-jQuery链式编程
    链式编程的好处是什么？
    链式编程是为了节省代码量，看起来更优雅
    18-jQuery修改样式css方法
    修改样式css方法有哪些常见形式？
    1.参数只写属性名，则是返回属性值
    var strColor = $(this).css('color');
    2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
    $(this).css(''color'', ''red'');
    3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
    $(this).css({ "color":"white","font-size":"20px"});
    19-jQuery修改样式操作类
    如何添加类？
    $("div").addClass("current");
    如何删除类？
    $("div").removeClass("current");
    如何切换类？
    $("div").toggleClass("current");
    20-tab栏切换案例
    21-jQuery类操作和className区别
    jQuery类操作和className有什么区别？
    className会将之前的类名覆盖
    jQuery类操作不会影响以前的类名
    22-jQuery显示与隐藏效果
    如何显示元素？
    show()
    show([speed,[easing],[fn]])
    speed：定义时间
    easing：设置动画加速度
    fn：动画结束的回调函数
    如何隐藏元素？
    hide()
    hide([speed,[easing],[fn]])
    如何切换元素的显示和隐藏？
    toggle()
    toggle([speed,[easing],[fn]])
    23-jQuery滑动效果以及事件切换
    如何上滑？
    slideUp()
    如何下滑？
    slideDown()
    如何切换滑入滑出？
    slideToggle()
    hover事件有什么作用？
    能够同时监听鼠标移入和移出事件
    hover([over,]out) // 其中over和out为两个函数
    如果只写一个函数，则鼠标经过和离开都会触发它
    24-jQuery停止动画排队stop
    如何停止上一次的动画？
    stop()
    每次使用动画之前，先调用 stop() ,在调用动画
    25-jQuery淡入淡出以及突出显示案例
    如何淡入？
    fadeIn()
    如何淡出？
    fadeOut()
    如何切换淡入淡出？
    fadeToggle()
    如何调整到指定透明度？
    fadeTo()
    26-jQuery自定义动画animate方法
    自定义动画的语法规范是什么样子的？
    animate(params, [speed], [easing], [fn])

    27-王者荣耀手风琴案例布局分析
    28-王者荣耀手风琴案例制作
    <script type="text/javascript">
        $(function () {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function () {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })

        });