jQuery

jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）

jQuery里面对我们原生js代码进行了封装，这样我们可以快速高效的使用这些封装好的功能了。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
jQuery的优点:
1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
版本介绍：
1x ：兼容 IE 678 等低版本浏览器， 官网不再
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

<!-- 1.引入jQuery文件 -->
 <script src="jquery.min.js"></script>

 <!-- 2.入口函数： -->
1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2. 相当于原生 js 中的 DOMContentLoaded。
    $(function() {
       $('div').hide();  // 此处是页面 DOM 加载完成的入口
    })
// 第二种: 繁琐，但是也可以实现
    $(document).ready(function(){
       ...  //  此处是页面DOM加载完成的入口
    });

<!-- jQuery中的顶级对象$     -->
1. $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
2. $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

<!-- jQuery 对象和 DOM 对象 -->
1. jQuery 方法获取的元素就是 jQuery 对象。
2. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
DOM对象转换成jQuery对象:
    var box = document.getElementById('box');  // 获取DOM对象
    var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象
jQuery 对象转换为 DOM 对象有两种方法：
    var domObject1 = $('div')[0]        //   2.1 jQuery对象[索引值]
    var domObject2 = $('div').get(0)    //   2.2 jQuery对象.get(索引值)

<!-- 3.jQuery 选择器 -->
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
// 基础选择器:
$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号   //$(".nav")

//层级选择器:
后代选择器和子代选择器。 //$("ul li")  $("ul>li")亲儿子

//筛选选择器:
$("ul li:first") 
$("ul li:last")     获取最后一个li
$("ul li:eq(2)")    获取li中索引为2的元素,索引号index从0开始 
$("ol li:odd")      获取到li元素,选择索引号为奇数的元素
$("ol li:even")     获取到li元素,选择索引号为偶数的元素

$("li").parent()           查找父级 
$("ul").children("li")     亲儿子
$("ul").find("li")         后代选择器
$(".first").siblings("li") 查找兄弟节点
$(".first").nextAll()      查找当前元素之后所有同辈元素
$(".first").preAll()       查找当前元素之前所有同辈元素
$("div").hasClass("protected") 检查当前元素是否包含某个特定的类.protected 如果有返回true
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <script>
        $(function() {
            $("ol .item").siblings("li").css("color", "red");  // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            // $("ul li:eq(2)").css("color", "blue");          // (1) 我们可以利用选择器的方式选择
            // $("ul li").eq(2).css("color", "blue");          // (2) 更推荐这种写法
            console.log($("div:first").hasClass("current"));   //  判断是否有某个类名
        });
    </script>

<!-- 4.jQuery 设置样式css -->
$('div').css('属性', '值')  
//A:操作 css 方法:
    1.参数只写属性名，则是返回属性值  
        //var strColor = $(this).css('color');
    2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
        $(this).css(''color'', ''red'');
    3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
        $(this).css({ "color":"white","font-size":"20px"});

//B:设置类样式方法:
    1.jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
       $("div").addClass("current");  // 1.添加类
       $("div").removeClass("current");  // 2.删除类
       $("div").toggleClass("current");  // 3.切换类
            <script>
                $(function() {
                    $("div").click(function() {
                        $(this).toggleClass("current");    // 切换类 toggleClass()
                    });
                })
            </script>

<!--5. jQuery 里面的排他思想 -->
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
    $(this).css(“color”,”red”);
    $(this).siblings(). css(“color”,””);

<!-- 6.隐式迭代 -->
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
    $('div').hide();  // 页面中所有的div全部隐藏，不用循环操作
        <script>
            $("ul li").css("color", "red"); // 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        </script>

<!-- 7.链式编程 -->
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', ''); 

####################操作################################################
<!--1. jQuery 属性操作 -->
jQuery 常用属性操作有三种：prop() / attr() / data() 

    <!-- A 元素固有属性值 prop() -->
prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
    prop("属性") //获取     prop("属性","属性值")

    <a href="http://www.taobao.com" title="都挺好">都挺好</a>
    设置元素本生自带属性:$("a").prop("title", "我们都挺好");

    <!-- B 元素自定义属性值 attr() -->
自定义属性。 比如给 div 添加 index =“1”
    attr("属性")             //获取属性
    attr("属性","属性值")    

    <div index="1" data-index="2">我是div</div>
    设置元素自定义属性: $("div").attr("index", 4);

    <!-- C  数据缓存 data() -->
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除
注意：同时，还可以读取 HTML5 自定义属性  data-index ，得到的是数字型
    data("name", "value") //向被选元素附加数据  
    date("name")          //向被选元素获取数据
        <script>
             $("span").data("uname", "andy");  //给span添加一个 uname = "andy" 属性
        </script>

<!--2. jQuery内容文本值 -->
html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
        <div>
            <span>我是内容</span>
        </div>
        <input type="text" value="请输入内容">
    <!-- A. 获取设置元素内容 html() -->
    html()  //获取元素内容   //$("div").html()              //结果:<span>我是内容</span>
    html("内容")  //设置元素内容  //$("div").html("123")

    <!-- B.获取设置元素文本内容 text() -->
    $("div").text()  //获取元素文本内容                  //结果:我是内容
    $("div").text("123");  //设置元素文本内容

    <!-- C.获取设置表单值 val() -->
    $("input").val()  //获取设置表单值                  //结果:请输入内容
    $("input").val("123");  //设置表单值 

    <!-- D.outerHTML -->
    利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
    jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码，
    然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。
    
        1.jquery获取outerhtml
        <div class="test"><p>hello，你好！</p></div>
        <script>
        $(".test").prop("outerHTML");
        </script>

        2.jquery设置outerhtml
        $('.test').prop('outerHTML', '<input>');

<!-- 3.jQuery 元素操作 -->
A. 遍历元素 .each()
    给同一类元素做不同操作，就需要用到遍历。
$("div").each(function (index,domEle) {})
    1.each()方法遍历匹配每一个元素,主要用DOM处理
    2.index是每个元素索引,domEle是每个Dom元素对象,不是jquery对象
    3.想要使用jquery方法,需转换$(domEle)

$.each(object,function (index,element) {})
    1.$.each()方法可用于遍历任何对象,主要处理数据,数组.对象
    2.index索引,element遍历内容

        <div>1</div>
        <div>2</div>
        <script>
            $(function() {
                // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
                var arr = ["red", "green", "blue"];
                // 1. each() 方法遍历元素 
                $("div").each(function(i, domEle) {
                    // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                    // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                     // 使用jQuery方法需要转换 $(domEle)
                    $(domEle).css("color", arr[i]);
                })
                // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
                // $.each($("div"), function(i, ele) {
                //     console.log(i);
                //     console.log(ele) });
                $.each({
                    name: "andy",
                    age: 18
                }, function(i, ele) {
                    console.log(i); // 输出的是 name age 属性名
                    console.log(ele); // 输出的是 andy  18 属性值
                })
            })
        </script>

<!-- 4. 创建、添加、删除 -->
A. 动态创建:
    $("<li></li>") 

B. 内部添加:  父子关系
    element.append("内容")    //追加元素最后面
    element.prepend("内容")   //放在最前面

C. 外部添加:  兄弟关系
    element.after("内容")   //把内容放入目标元素后面
    element.before("内容")  //把内容放入目标元素前面

D. 删除元素:
    element.remove()   //删除匹配的元素(本身)
    element.empty()   //删除匹配的元素集合中所有子节点
    element.html("")  //清空匹配的内容

        <ul> <li>原先的li</li> </ul>
        <div class="test">我是原先的div</div>
        <script>
            $(function() {
                var li = $("<li>我是后来创建的li</li>");   // 1. 创建元素
                //  2.1 内部添加
                // $("ul").append(li);  内部添加并且放到内容的最后面 
                $("ul").prepend(li); // 内部添加并且放到内容的最前面
                //  2.2 外部添加
                var div = $("<div>我是后妈生的</div>");
                // $(".test").after(div);
                $(".test").before(div);
                // 3. 删除元素
                // $("ul").remove(); 可以删除匹配的元素 自杀
                // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
                $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
            })
        </script>

<!-- 5.jQuery 尺寸操作 -->
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

A. width() / height() 获取设置元素 width和height大小 
    $("div").width()
    $("div").width(300);

B. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
    $("div").innerWidth()

C. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
    $("div").outerWidth()

D. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
    $("div").outerWidth(true)

<!-- 6.jQuery 位置操作 -->
jQuery的位置操作主要有三个：
A. offset()
    $(".son").offset()    //1. 获取设置距离文档的位置（偏移
    $(".son").offset().top
    $(".son").offset({top: 200,left: 200});
           
B. position()
    获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准, 这个方法只能获取不能设置偏移
    $(".son").position()   //position().left 和 position().top 获取到左侧,顶部距离
           
C. scrollTop()/scrollLeft() 
    设置或获取元素被卷去的头部和左侧
    $(document).scrollTop()

<!-- 7,$(window).height() 和 $(document).height()的区别 -->
$(window).height()代表了当前可见区域的大小，
$(document).height()则代表了整个文档的高度，可视具体情况使用.

当浏览器窗口大小改变时(如最大化或拉大窗口后) ，
$(window).height() 随之改变，但是 $(document).height()是不变的。
 
 
 
##############################事件###########################################
 
- 优点: 操作简单，且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
<!-- 1.jQuery 事件注册 -->
element.事件(function(){})
$("div").click(function() {事件处理程序} //其它事件同原生

$("div").click(function() {
$(this).css("background", "purple");
});

<!-- 2. jQuery 事件处理 -->
因为普通注册事件方法的不足，jQuery又开发了多个处理方法:
- on(): 用于事件绑定，目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发

<!-- A.事件处理 on() 绑定事件 -->
on()方法优势1: 可以绑定多个事件
$("div").on({
mouseover: function(){},
mouseout: function(){}
})
如果事件处理程序相同
$("div").on("mouseover mouseout",function(){
$(this).toggleClass("current")
})

on()方法优势2: 可以事件委派,把原来加给子元素事件绑定在父元素上
$('ul').on('click','li',function(){
alert('abc')
})

on()方法优势3: 可以给动态生成的元素绑定事件
$("div").append($("<p>我是动态创建的p</p>"))
$('div').on("click","p",function(){
console.log(123)
})

<!-- B. 事件处理 off() 解绑事件 -->
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑
off()方法可以移除on()方法添加的事件处理程序

$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click","li") //解绑事件委托

<!-- C. one()方法  只能触发事件一次 -->
$("p").one("click", function() {
alert(11);
})

<!-- D.trigger() 自动触发事件 -->
jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler()
第一种:
element.click() //自调用,立即执行 会触发元素的默认行为 // $("div").click();会触发元素的默认行为
第二种:
element. trigger("type") //$("input").trigger("focus"); 自动获取焦点
第三种:
element.triggerHandler(type) //不会触发元素默认行为 input框不能自动获取焦点 // $("div").triggerHandler("click");

<!-- 3.jQuery 事件对象 -->
​jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event){})
阻止默认行为: event.preventDefault(); 或者return false
阻止冒泡: event.stopPropagation()

<body>
    <div></div>
    <script>
        $(function () {
            $(document).on("click", function () {
                console.log("点击了document");
            })
            $("div").on("click", function (event) {
                // console.log(event);    事件对象e
                console.log("点击了div");
                event.stopPropagation(); //阻止了冒泡行为,只弹出一次
            })
        })
    </script>
</body>

<!-- 4.jQuery 拷贝对象 -->
把一个对象(合并)拷贝给另一个对象使用
$.extend([deep],target,obj1,[objN])
1.deep:为true深拷贝,false浅拷贝
2.target:要拷贝的目标对象
3.obj1待拷贝到的对象, objN待拷贝到的N个对象
4.浅拷贝修改目标对象会影响被拷贝对象,深拷贝则不会

// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);

<!-- jQuery 插件 -->
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入
1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：
1. 引入相关文件。（jQuery 文件 和 插件文件）
2. 复制相关html、css、js (调用插件)。
注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

图片懒加载插件: 当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。
全屏滚动插件: 全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站

<!-- dom动态生成的html代码操作 -->
$(document).on("click",".test",function(){//修改成这样的写法
$(".test").css("background-color","pink");
});

<!-- js比较年月日或者日期年月日时分秒大小 -->
// 直接传进开始时间很结束时间
function compareTime(startTime,endTime) {
// var start_time=startTime.replace(/-|s|:|//g,'').replace(' ', ''); //用这个加强版也可以
var start_time = startTime.replace(/-|s|:|//g,'');
var end_time = endTime.replace(/-|s|:|//g,'');
if (start_time < end_time) { return true; } else { return false; }
 
 
#################################效果################################################
 
<!-- ​jQuery 给我们封装了很多动画效果，最为常见的如下： -->
- 显示隐藏：show() / hide() / toggle() ;
- 划入画出：slideDown() / slideUp() / slideToggle() ; 
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 
- 自定义动画：animate() ;
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

<!-- 1. 显示隐藏 -->
show([speed,[easing],[fn]]) 
hide([speed,[easing],[fn]]) 
toggle([speed,[easing],[fn]]) 
    1.参数都可以省略,无动画直接显示 
    2.speed可以是 "slow","normal","fast",或者动画时长毫秒数 1000
    3.easing是切换效果,默认 "swing",可选 "linear"
    4. fn回调函数,动画完成时执行,每个元素执行一次
    5.一般情况下,不带参数直接显示与隐藏

        $("button").eq(0).click(function() {
            $("div").show(1000, function() {
                alert(1);
            });
        })

<!-- 2. 滑入滑出 -->
下滑/上滑   用法同上
slideDown([speed,[easing],[fn]]) 
slideUp([speed,[easing],[fn]]) 
slideToggle([speed,[easing],[fn]]) 

$("div").stop().slideToggle(500);   //阻止上一个动画,防止动画队列
    $("button").eq(2).click(function() {
        // 滑动切换 slideToggle()
        $("div").slideToggle(500);
    });

<!-- 3. 淡入淡出 -->
用法同上
fadeTo([speed],opacity,[easing],[fn]) 
    //opacity 透明度必须写,取值0~1之间
    
<!-- 4.自定义动画animate()  -->
自定义动画非常强大，通过参数的传递可以模拟以上所有动画
slideDown(params,[speed],[easing],[fn]) 
    params想要更改的样式属性,以对象形式传递,必须写. 属性名可以不用 ""  驼峰命名式  其余参数可省

    $(function() {
        $("button").click(function() {
            $("div").animate({
                left: 500,
                top: 300,
                opacity: .4,
                 500
            }, 500);
        })
    })

<!-- 5 停止动画排队 -->
    总结: 每次使用动画之前，先调用 stop() ,在调用动画。

<!--6. 事件切换 hover() -->
事件切换 hover() 就是鼠标经过和离开的复合写法   //功能类似 css 中的伪类 :hover