zoukankan      html  css  js  c++  java
  • 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 
    
    
    
  • 相关阅读:
    《Programming WPF》翻译 第8章 1.动画基础
    一些被遗忘的设计模式
    《Programming WPF》翻译 第4章 数据绑定
    《Programming WPF》翻译 第3章 控件
    《Programming WPF》翻译 第5章 样式和控件模板
    《Programming WPF》翻译 第7章 绘图
    《Programming WPF》翻译 第9章 自定义控件
    《Programming WPF》翻译 第7章 绘图 (2)
    《Programming WPF》翻译 第8章 前言
    关于Debug和Release之本质区别
  • 原文地址:https://www.cnblogs.com/xm0328/p/13783028.html
Copyright © 2011-2022 走看看