• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

day 30 jQuery

互联网 diligentman 3天前 6次浏览

1. 简介

jQuery是一个兼容多浏览器的javascript库(函数库),核心理念是write less, do more(写得更少,做的更多)。

JQuery,顾名思义,就是JavaScript和查询 (Query),即是辅助JavaScript开发的库。

特点:

Query 是一个快速的简洁的javascript框架,可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

  • 提供了强大的功能函数
  • 解决浏览器兼容性问题
  • 纠正错误的脚本知识
  • 体积小,使用灵巧(只需引入一个js文件)
  • 易扩展、插件丰富

作用:

程序员的角度:简化JavaScript和Ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

用户体验的角度:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。

  • 方便地选择页面元素(模仿CSS选择器更精确、灵活)
  • 动态更改页面样式/页面内容(操作DOM,动态添加、移除样式)
  • 控制响应事件(动态添加响应事件)
  • 提供基本网页特效(提供已封装的网页特效方法)
  • 快速实现通信(ajax)

    如何引入jQuery包:

jQuery库文件不需要安装,只需使用 < script >标签引入到HTML文件中,拿到jQuery的库文件后,就跟自己写的JS文件同样的引入方式,即可,以下是几种引入方式:

1) 引入本地的Jquery

2) 引入cdn在线提供的库文件(稳定可靠高速)

2. 用法

$(function(){})

  • $是jQuery核心函数, 是jQuery的简写 jQuery == $
  • jQuery有自己的语法,它和原生是两套语法
  • $方法:是一个工厂模式的函数
  • $()相当于页面初始化函数,当页面加载完毕,会执行$(),即jQuery()
  • $(function(){ }) 是$(document).ready(function(){});的简写
  • $(document).ready(function(){})和window.onload 的区别:

    • ready表示文档已加载完成(不包含图片等非文字媒体文件)
    • onload 是指页面包含图片在内的所有元素都加载完成
    • $(document).ready(function(){})要比 window.onload先执行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">123123</div>
    </body>
</html>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
    // 类似于延迟加载
    $(function() {
        console.log("xixi");
    });

    //完全体
    $(document).ready(function() {
        // 原生dom
        let oBox = document.getElementById("box");
        console.log(oBox.innerHTML);

        //jQueryDom
        console.log($("#box").html());
    });
</script>

包装集

jQuery所获取的所有dom元素无论是一个还是一组,都封装成一个jQuery包装集,即集合。

  • jQuery包装集与DOM 对象的互转:

    • 原生Dom -> jQueryDom

      • 将原生对象放入 $(原生Dom) 如:document —> $(document)
      let oBox = document.getElementById("box");
      console.log($(oBox).html());
    • jQueryDom -> 原生Dom

      // 方法1:
      let oBox = $("div").get(0);
      // 方法2:
      let oBox = $("div")[0];
      console.log(oBox.innerHTML);

1) 基础选择器

id选择器
// 方法1:
// $("#box1").css("backgroundColor", "red");
// 方法2: 类似css代码
$("#box1").css({
    backgroundColor: "red"
});
类选择器
$(".box").css({backgroundColor: "red"});
标签选择器
$("p").css({color: "red"});
群组选择器
$("p,span,strong").css({color: "red"});
通用选择器

(这是选择全部元素)

$("*").css({backgroundColor: "green"});

day 30 jQuery

2) 层次选择器

后代选择器

空格

后代:不只是子代

$("body div").css({backgroundColor: "red"});
子代选择器

大于号

$("body>div").css({backgroundColor: "red"});
相邻选择器

加号

$("#box1+div").css({backgroundColor: "red"});
兄弟选择器

波浪号~

$("#box2~div").css({backgroundColor: "red"});

3) 属性选择器

[属性名/属性名=属性值…]

<script type="text/javascript">
    // div带有class属性的选择器
    $("div[class]").css({backgroundColor:"red"});
    
    // div同时带有多个属性的选择器
    $("div[class][id]").css({backgroundColor:"red"});
    
    // 通过指定的属性值来获取元素
    $("div[id='box1']").css({backgroundColor:"red"});
</script>

4) 伪类选择器

  • :even 获取所有偶数行的元素

    // 注意:从第0行开始
    $("div:even").css({backgroundColor:"red"});
  • :odd 获取所有奇数行的元素

    $("div:odd").css({backgroundColor:"red"});
  • :first 获取第0个元素

    $("div:first").css({backgroundColor: "red"});
  • :last 获取最后一个元素

    $("div:last").css({backgroundColor:"red"});
  • :eq(下标) 根据下标获取某个特定的元素

    //写法1:
    $("div:eq(2)").css({backgroundColor: "red"});
    //写法2:
    let n = 3;
    $("div").eq(n).css({backgroundColor: "red"});
  • :not(目标元素) 除了某个元素

    //写法1:
    $("div:not('#box3')").css({backgroundColor: "red"});
    //写法2:
    $("div").not("#box3").css({backgroundColor: "red"});
  • :gt(n) 获取大于n的元素

    $("div:gt(2)").css({backgroundColor:"skyblue"});    
  • :lt(n) 获取小于n的元素

    $("div:lt(2)").css({backgroundColor:"red"});

5) 内容选择器

  • :contains(内容) 根据元素的内容,获取元素

    $("div:contains('hello world')").css({backgroundColor: "red"});
  • :empty 选中内容为空的元素,空格换行都不能有

    $("div:empty").css({backgroundColor:"red"});
  • :has(选择器) 根据包含的元素来进行选择

    $("div:has('span')").css({backgroundColor:"red"});

6) 可见性选择器

  • :hidden 选中隐藏的元素
  • :visible 改变可见元素的样式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <table>
                <tr style="display:none">
                    <td>Value 1</td>
                </tr>
                <tr>
                    <td>Value 2</td>
                </tr>
            </table>
        </body>
    </html>
    <script class="lazy" data-src="js/jQuery.js"></script>
    <script type="text/javascript">
        // :hidden 选中隐藏的元素
        $("tr:hidden").css({backgroundColor:"red"});
        // :visible 改变可见元素的样式
        $("tr:visible").css({backgroundColor:"green"});
    </script>

7) jQuery的遍历

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历

图示解释:

day 30 jQuery

兄弟节点之间的遍历
  • next() 下一个兄弟
  • nextAll() 下面所有兄弟
  • prev() 上一个兄弟
  • prevAll() 上面所有
$("#box1").next().css({backgroundColor: "red"});//连缀模式
$("#box1").nextAll().css({backgroundColor: "red"});
父子节点间的遍历
  • parent() 找父节点

    $("p").eq(1).parent().css({backgroundColor:"red"});
  • 找子节点

    • find (必须写参数)
    • children (可以不写参数)

      $("body").find("span").css({backgroundColor: "red"});
      $("body").children().css({backgroundColor: "red"});//body的孩子(父子关系)

3. 文本

jQuery特点:关于读写的函数,通常都是一个,无参为读,有参为写。

  • innerHTML == html()
  • value == val()
<script type="text/javascript">
    // 读
    console.log($("div").html());
    // 写
    $("div").html(567);
    
    // 读
    console.log($("input").val());
    // 写
    $("input").val(888);    
</script>

4. 事件

Query的事件:

  • 事件不需要带on;
  • 可以传参数;
  • 不用考虑兼容性;
  • this转jQuery的this this==$(this)
    $("#box").click(function(){
        //this要转成jQueryDom的this
        $(this).css({backgroundColor: "red"});
    })

传参:

    $("#box").click({name:"小明",age:18},function(evt){
        console.log(evt.data);//{name:"小明",age:18}
    })

5. 动画

jQueryDom对象.show([speed,[easing],[fn]);

等价于:jQueryDom对象.hide([时间],[切换效果],[回调函数]);

  • 参数speed

    • 即动画所需时间;
    • 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如:1000);
  • 参数easing

    • 用来指定切换效果,默认是”swing 摇摆”,可用参数“linear 线性”;
  • 参数fn回调函数

    • 在动画完成后执行的函数,每个元素执行一次;

举例:

    $('button').eq(0).click(function() {
        // 用1000毫秒将box元素隐藏,动画完成后执行回调,打印heihei
        //注意:动画需要时间,是异步,异步完成后再执行回调函数
        $("#box").hide(1000, function() {
            console.log('heihei');
        })
    });

//做一些奇奇怪怪的事情
    $("button").eq(2).click(function() {
        // 回调
        $("#box").fadeToggle(1000, arguments.callee);
    });

基本动画:show hide toggle

滑块:slideDown slideUp slideToggle

淡入淡出:fadeIn fadeOut fadeToggle

自定义动画

  • animate(params,[speed],[easing],[fn]) 等价于animate(数据,时间,[切换效果],回调函数)
  • stop([clearQueue],[jumpToEnd])

    • clearQueue: 如果设置成true,则清空队列。可以立即结束动画
    • jumpToEnd: 如果设置成true,则完成队列。可以立即完成动画
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 200px;
                height: 200px;
                background-color: pink;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button type="button">变形</button>
        <button type="button">停止</button>
        <div id="box">

        </div>
    </body>
</html>
<script class="lazy" data-src='jQuery.js'></script>
<script type="text/javascript">
    $("button").eq(0).click(function() {
        //连缀模式
        $("#box").animate({
            height: 100,
            width: "300px",
            left: 1000
        }, 1000, function() {
            console.log(1);
        }).animate({
            top: 600
        }, 2000, function() {
            console.log(2);
        }).animate({
            left: 0
        }, 2000, function() {
            console.log(3);
        }).animate({
            top: 50
        }, 2000, function() {
            console.log(4);
        });
    });

    $("button").eq(1).click(function() {
        // 结束当前动画,其他动画正常执行 
        // $("#box").stop();//无参默认为两个false

        // 停止所有动画队列
        // $("#box").stop(true,false);

        //立即执行完当前动画,其他动画正常执行 
        // $("#box").stop(false,true);

        //立即执行完当前动画,并清空动画队列
        $("#box").stop(true, true);
    });
</script>

案例:手风琴

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                width: 500px;
                height: 150px;
                background-color: #FFC0CB;
                margin: auto;
                /* position: relative; */
            }

            li {
                list-style: none;
                float: left;
                width: 40px;
                height: 150px;
                overflow: hidden;
                border: 1px solid black;


            }

            img {
                height: 150px;
                width: 240px;
                background-size: 240px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                ![](img/1.jpg)
            </li>
            <li>
                ![](img/2.jpg)
            </li>
            <li>
                ![](img/3.jpg)
            </li>
            <li>
                ![](img/4.jpg)
            </li>
            <li>
                ![](img/5.jpg)
            </li>
        </ul>
    </body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
    $('li').mouseover(function() {
        $(this).stop().animate({
            width: 240
        }).siblings('li').stop().animate({
            width: 40
        });
    });
</script>

程序员灯塔
转载请注明原文链接:day 30 jQuery
喜欢 (0)