4. jQuery

最新推荐文章于 2022-11-04 14:57:24 发布

含低调

最新推荐文章于 2022-11-04 14:57:24 发布

阅读量170

点赞数

分类专栏：前台开发

本文链接：https://blog.csdn.net/hanzong110/article/details/108875872

版权

前台开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 jQuery函数库简介

学习手册：http://jquery.cuishifeng.cn/
jQuery是一个JavaScript函数库

2 jQuery函数库基本使用

jquery-2.0以上版本不再支持IE 6/7/8
使用前需要先下载其源码：http://www.jq22.com/jquery-info122，然后在页面中，通过script标签的src属性引入外部js库来进行使用
也可以直接引入互联网上的js库进行使用
一般情况下单位px可以省略
中间带有横杠的样式(font-size、padding-left)可以变为驼峰写法
jQuery函数库支持我们曾经学习过标签选择器、ID选择器、class选择器等来获取标签对象

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--1. 引入外部的一个javascript函数库，也称为引包-->
    <script src="./jquery-3.5.1.min.js"></script>
  </head>

  <body>
    <ul>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>打豆豆</li>
    </ul>
    <div id="box">
      我爱你祖国
    </div>
    <p class="cur">
      我是祖国的花骨朵
    </p>
  </body>

</html>
<script>
  //1. 当html中引入jQuery的包后，就可以使用$(也可以写作jQuery)函数
  //2. 通过$函数可以获得节点树上的标签对象，并操作他们的样式。注意该对象和javascript中通过getElementById获取的对象不同

  //1. 获得标签对象
  //a. 标签选择器
  console.log($("li"));
  //b. id选择器
  console.log($("#box"));
  console.log(document.getElementById("box"));
  //c. 类选择器
  console.log($(".cur"));
  console.log(jQuery(".cur"));

  //2. 可以连续.css，多次设置样式
  $("p").css({
    "color": "red",
    //驼峰写法
    "fontSize": 30,
    "background": "cyan",
    "textAlign": "center"
  })
</script>

3 jQuery函数库中独有选择器

这些选择器只能在引入了jQuery函数库的地方使用，因为它们是jQuery函数库中独有的

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./jquery-3.5.1.min.js"></script>
  </head>

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </body>

</html>
<script>
  //下面这些都是JQ函数库独有选择器
  //1. :first：获取匹配标签的第一个元素
  $("div:first").css({
    "background": "red"
  });
  //2. :last：获取匹配标签的最后一个元素
  $("div:last").css({
    'background': "cyan"
  });
  //3. :even：偶数选择器
  $("div:even").css({
    'background': "skyblue"
  });
  //4. :odd：奇数选择器
  $("div:odd").css({
    'background': "pink"
  })

  //5. :gt(index)：大于选择器
  $("div:gt(6)").css({
    'background': "red"
  });

  //6. :lt(index)：小于选择器
  $("div:lt(6)").css({
    'color': "yellow"
  })
</script>

4 操作标签文本

表单元素：也就是input标签，通过val方法操作文本
非表单元素：需要通过html方法操作文本

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
  </head>

  <body>
    <p>
      <input type="text" value="我是一个输入文本地方">
    </p>
    <div>我是一个粉霜将，粉霜本领强</div>
  </body>

</html>
<script>
  //1. 操作表单元素文本：利用val方法
  //a. 获取表单元素文本
  console.log($("input").val());
  //b. 重新设置表单元素文本
  $("input").val("我修改了表单元素文本");

  //2. 操作非表单元素文本：利用的html方法
  console.log($("div").html());
  $("div").html("修改非表单元素文本啦么么打~~~~")
</script>

5 事件

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
  </head>

  <body>
    <div>我是中国人我很自豪</div>
  </body>

</html>
<script>
  var f = 16;
  //1. 使用js原生的函数时，是用onclick，jQ中使用click
  $("div").click(function () {
    f++;
    //2. 修改div的字号大小，因为事件函数中，this代表该事件发生所在的标签，所以就是div标签自身
    $(this).css({
      "fontSize": f
    })
  });
</script>

6 特效函数

jQuery函数提供一些特效函数，可以给匹配元素添加一些动画效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button id="box1">slideUp</button>
    <button id="box2">slideDown</button>
    <button id="box3">fadeOut</button>
    <button id="box4">fadeIn</button>

    <div></div>
</body>

</html>
<script>
    $("#box1").click(function () {
        //1. slideUp：可以让元素向上卷起，2000代表动画时间(ms)，其实就是动态改变了div的高度，造成了向上卷起的效果
        $("div").slideUp(2000);
    });
    $("#box2").click(function () {
        //2. slideDown：让元素向下展开
        $("div").slideDown(2000);
    });
    $("#box3").click(function () {
        //fadeOut:可以让元素淡出，其实就是改透明度

        $("div").fadeOut(2000);
    });
    $("#box4").click(function () {
        //fadeIn:可以让元素淡入
        $("div").fadeIn(2000);
    });
</script>

7 jQueryUI插件使用

学习手册：https://jqueryui.com/
jQueryUI是jQuery函数库的一个插件，其使用必须依赖jQuery，所谓插件其实就是在jQuery已有的功能基础之上，在添加其他新功能
下载：新建文件夹执行npm install jqueryui
复制官网提供的案例：官网–Interactions–选中其中一个后view source–此时可以看见官网对该功能的实现代码，复制即可

7.1 拖拽

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1. 必须先引入jQuery -->
    <script src="./jquery-3.5.1.min.js"></script>
    <!-- 2. 引入jQuery-UI插件 -->
    <script src="./jquery-ui.min.js"></script>
  </head>

  <body>
    <div>
      <p>我是你的孩子~~~要拖拽</p>
    </div>
    <ul>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>打豆豆</li>
      <li>么么打</li>
    </ul>
  </body>

</html>
<script>
  //拖拽
  $("div").draggable();
  //排序拖拽
  $("ul").sortable();
</script>

7.2 日历

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./jquery-ui.min.js"></script>
    <!--引入jQuery-ui中提供的外部样式-->
    <link rel="stylesheet" href="./jquery-ui.min.css">

  </head>

  <body>
    <p>
      <input type="text">
    </p>
  </body>

</html>
<script>
  $("input").datepicker();
</script>

8 节点关系函数

jQ中可以通过$函数获取到某个节点，我们可以通过该节点的节点关系函数，来获取与当前节点具有父、兄、子关系的其他节点

8.1 parent

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 500px;
        height: 100px;
        border: 1px solid black;
        margin: 100px auto;
      }

      p {
        float: left;
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-right: 10px;
      }
    </style>
  </head>

  <body>
    <div>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </body>

</html>
<script>
  //1. 给p标签绑定单击事件，单击时，其父元素div背景颜色为青色
  $("p").click(function () {
    $("p").parent().css({
      "background": "cyan"
    })
  })
</script>

8.2 this

this不是节点关系函数，是javascript自带的，事件函数中，this表示触发该事件的标签

代码

//给全部P标签绑定单击事件
$("p").click(function () {
  //单击p标签，当前被单击的这个p标签背景颜色为天蓝色
  $(this).css({
    "background": "skyblue"
  })
});

8.3 siblings

代码

//siblings：获取兄弟元素
//单击p标签，让他的背景颜色为黄色，他的其余兄弟元素们为绿色
$("p").click(function () {
  //链式语法
  $(this).css({"background": "yellow"}).siblings().css({"background": "green"})
});

8.4 children

代码

//将div下4个p标签背景颜色为黑色
$("div").children().css({
  "background": "black"
});
//等同于如下写法
$("p").css({
  "background": "black"
});

8.5 折叠卡片特效

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            border: 1px solid black;
            margin: 0px auto;
            list-style: none;
        }

        li {
            border-bottom: 1px dashed black;
            text-align: center;
            cursor: pointer;
        }

        p {
            background-color: cyan;
            color: red;
            /*p标签默认不显示*/
            display: none;
        }

        .open {
            /*第一个p标签下的内容，默认是显示的*/
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <h4>标题1</h4>
            <p class="open">内容1</p>
        </li>
        <li>
            <h4>标题2</h4>
            <p>内容2</p>
        </li>
        <li>
            <h4>标题3</h4>
            <p>内容3</p>
        </li>
        <li>
            <h4>标题4</h4>
            <p>内容4</p>
        </li>
    </ul>
</body>

</html>
<script>
    $("h4").click(function () {
        $(this).siblings().slideDown(100).parent().siblings().children("p").slideUp(100);
    })
</script>

9 animate函数

animate是jQuery函数库提供一个动画函数，可以为元素添加一些2D动画效果

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <div>中国</div>
  </body>

</html>
<script>
  $("div").animate({
    //1. left、top是定位元素才拥有的属性，如果元素没有定位修改left和top不生效
    //2. 参数一：是animate动画过后，最后的样式，从开始到最后，会以动画的方式呈现
    //3. 参数二：从初始样式到最后的样式，整个动画共用时5000ms，但注意animate动画无法修改颜色
    //4. 参数三：动画结束后的回调函数
    "left": 1000,
    "top": 100,
    "width": 150,
    "height": 50,
    "background": "cyan",
    "color": "white",
    "border": "20px solid red"
  }, 5000, function () {
    //让div遍椭圆
    $(this).css({
      "borderRadius": "50%",
      "textAlign": "center"
    })
  });
</script>

10 动画积累问题

例如单击事件触发一个动画，当鼠标已经不继续单击了，但动画没完事，还在不断的执行动画
可以调用标签的stop方法，将之前的动画清除，样式保留在当前状态

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <button class="btn1">去北京</button>
    <button class="btn2">去东京</button>
    <div></div>
  </body>

</html>
<script>
  
  $(".btn1").click(function () {
    //stop（“true”）表示将之前该元素上积累的动画全部清除，只执行stop true后面的动画
    $("div").stop(true).animate({
      "left": 1000
    }, 2000);
  });
  
  $(".btn2").click(function () {
    $("div").stop(true).animate({
      "left": 0
    }, 2000)
  })
</script>

11 jQuery实战

11.1 三位轮播图

前端工程师经常将轮播图叫做三位轮播或传统轮播，因为涉及三个位置的变化
swiper：轮播图插件，一行代码就可以搞定轮播图
需求
1. 自动轮播：每隔一段时间换一张图
2. 鼠标放上时轮播自动停止，鼠标移出后自动轮播自动开始
3. 单击左右按钮切换图片
4. 单击不同的分页器，显示不同图片

html代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./default.css">
    <script src="./jquery-3.5.1.min.js"></script>
  </head>

  <body>
    <div>
      <ul>
        <li class="current"><img src="./1.jpeg" alt=""></li>
        <li><img src="./2.jpeg" alt=""></li>
        <li><img src="./3.jpeg" alt=""></li>
        <li><img src="./4.jpeg" alt=""></li>
        <li><img src="./5.png" alt=""></li>
      </ul>
      <button class="lbtn">&lt;</button>
      <button class="rbtn">&gt;</button>
      <ol>
        <li class="cur">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ol>
    </div>
  </body>

</html>
<script>
  //右侧按钮单击事件
  //idx：控制某一个li运动
  var idx = 0;
  //右侧按钮的代码进行封装
  function rhandle() {
    //当前显示这张图片从left为0位置运动到left为-600
    //eq方法用于确定是ul下的第几个li
    $("ul li").eq(idx).css({
      "left": 0
    }).stop(true).animate({
      "left": -600
    }, 500);
    //全局变量累加1【下一张图要进入容器里面】
    idx++;
    idx = idx > 4 ? 0 : idx;
    //下一张图进入
    $("ul li").eq(idx).css({
      "left": 600
    }).stop(true).animate({
      "left": 0
    }, 500);
    //底下分页器也跟着变化，通过移除和加上class，来添加或删除样式
    $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    //addClass代表给标签添加class属性，removeClass代表给标签移除class属性
  }
  $(".rbtn").click(rhandle);
  //开启定时器让轮播图自动轮播
  var timer = setInterval(rhandle, 1500);
  //鼠标放在上面时的事件，鼠标进入对应的元素中时，就发生的事件
  $("div").mouseenter(function () {
    //清除定时器
    clearInterval(timer);
  });
  //鼠标离开事件
  $("div").mouseleave(function () {
    timer = setInterval(rhandle, 1500);
  });

  //左侧按钮的单击事件
  $(".lbtn").click(function () {
    //当前显示图片运动的动画
    $("ul li").eq(idx).css({
      "left": 0
    }).stop(true).animate({
      "left": 600
    }, 500);
    //全局变量需要累减
    idx--;
    idx = idx < 0 ? 4 : idx;
    //下一张图片动画
    $("ul li").eq(idx).css({
      "left": -600
    }).animate({
      "left": 0
    }, 500);
    //底下分页器也跟着变化
    $("ol li").eq(idx).addClass("cur").siblings().removeClass();
  });
  
  //下方分页器功能
  $("ol li").click(function () {
    //获取单击的那个分页器li索引值
    var index = $(this).index();
    //分两种情况讨论
    if (index > idx) {
      //当前显示这张图片动画
      $("ul li").eq(idx).css({
        "left": 0
      }).stop(true).animate({
        "left": -600
      }, 500);
      //单击那个分页器对应的图片动画
      $("ul li").eq(index).css({
        "left": 600
      }).stop(true).animate({
        "left": 0
      }, 500);
      //全局变量idx重新赋值
      idx = index;
      //底下分页器也跟着变化
      $("ol li").eq(idx).addClass("cur").siblings().removeClass();
      //addClass代表给标签添加类名、removeClass代表给标签移出类名
    } else {
      //没看懂这个位置，为啥要整else，直接一个逻辑下来应该就可以，应该确实没用，老师的意思就是可以分类讨论方案此处可以省略

      //当前显示这张图片动画
      $("ul li").eq(idx).css({
        "left": 0
      }).stop(true).animate({
        "left": -600
      }, 500);
      //单击那个分页器对应的图片动画
      $("ul li").eq(index).css({
        "left": 600
      }).stop(true).animate({
        "left": 0
      }, 500);
      //全局变量idx从新赋值
      idx = index;
      //底下分页器也跟着变化
      $("ol li").eq(idx).addClass("cur").siblings().removeClass();
      //addClass代表给标签添加类名、removeClass代表给标签移出类名
    }
  })
</script>

css代码

*{
    margin:0;
    padding:0;
}
div{
    position:relative;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    margin:50px auto;
    overflow: hidden;
}
ul{
    position: absolute;
    width: 600px;
    height: 400px;
    list-style: none;
}
img{
    width:600px;
    height: 400px;
}
ul li{
    position: absolute;
    width: 600px;
    height: 400px;
    left: 600px;
}
.current{
    left: 0px;
}
.lbtn{
    position: absolute;
    width: 35px;
    height: 35px;
    left:0px;
    top:40%;
}
.rbtn{
    position: absolute;
    width: 35px;
    height: 35px;
    right:0px;
    top:40%;
}
ol{
    position: absolute;
    width: 150px;
    height: 25px;
    left:38%;
    bottom:5px;
    list-style: none;
}
ol li{
    float:left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background:black;
    color:white; 
    text-align: center;
    line-height: 25px;
    margin-right: 3px;
}
.cur{
    background-color: green;
    transform:scale(1.2);
}

11.2 新闻导航

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./jquery-3.5.1.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      position: relative;
      width: 100%;
      height: 40px;
      background-color: #01204f;
    }

    ul {
      position: absolute;
      width: 100%;
      height: 40px;
      list-style: none;
    }

    ul li {
      float: left;
      /*每个li宽度应该不同，就为每个li都加上padding，这样就能很简单的保证每个li不同*/
      padding: 10px;
      color: white;
    }

    /*设置红色的滑块的样式*/
    div.slider {
      position: absolute;
      width: 52px;
      height: 41px;
      background: red;
      opacity: .8;
    }
  </style>
</head>

<body>
  <div>
    <!--div要在li上面，不然div组件会将li完全覆盖住-->
    <div class="slider"></div>
    <ul>
      <li>首页</li>
      <li>国内</li>
      <li>国际</li>
      <li>军事</li>
      <li>财经</li>
      <li>娱乐</li>
      <li>体遇</li>
      <li>互联网</li>
      <li>科技</li>
      <li>科技</li>
      <li>游戏</li>
      <li>女人</li>
      <li>汽车</li>
    </ul>

  </div>
</body>

</html>
<script>
  //全部li添加鼠标移上事件
  $("li").mouseenter(function () {
    //1. prevAll：获取某一个元素前面全部兄弟元素
    var sum = 0;
    //2. each：可以遍历每一个节点
    $(this).prevAll().each(function () {
      //获取每一个兄弟元素宽度
      sum += $(this).innerWidth();
    });
    //让红色滑块运动起来
    $(".slider").stop(true).animate({
      "left": sum,
      //3. innerWidth：获取某个标签宽度(包含内边距)
      //因为有些li上面是3个字，所以红色滑块的宽度也要变化来匹配li的宽度
      "width": $(this).innerWidth()
    }, 500);
  });

  //鼠标移出，红色滑块归还原始位置
  $("div").mouseleave(function () {
    $(".slider").stop(true).animate({
      "left": 0,
      "width": $("ul li").eq(0).innerWidth()
    }, 500);
  })
</script>

12 AJAX

AJAX一门前端技术(不是一门语言)，可以在页面没有重新加载情况下实现页面局部更新
传统的网页(不使用 AJAX)如果需要更新内容，必须重新加载整个页面
JavaScript中AJAX技术是由内置构造函数XMLHttpRequest实现的，但在实际工作中一般都使用jQuery中的实现，因为jQuery对原生AJAX技术进行封装，用起来更方便

12.1 使用流程

创建springboot上的web项目

HelloController

package com.mashibing.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String hello() {
        return "aaa.html";
    }
}

aaa.html(resources/static)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 使用JQ务必引包 -->
    <script src="./js/jQuery.min.js"></script>
</head>

<body>
    <h1>今天课程重点就是AJAX技术</h1>
    <button>单击我向服务器端----悄悄发起上行请求（GET）</button>
</body>

</html>
<script>
    $("button").click(function () {
        //发送GET请求
        //参数一：请求路径
        //参数二：传递参数
        //参数三：服务器响应成功后的回调函数，data为响应数据
        //最终发送请求格式为："http://localhost:8080/data.txt?name=小明&ps=123"，前面部分实际上是当前aaa.html在服务器上的路径"http://localhost:8080/aaa.html"，所以其实能看出来AJAX只能请求aaa.html所在服务器上的内容，无法请求其他服务器上的内容
        $.get("./data.txt", {
            "name": "小明",
            'ps': 123
        }, function (data) {
            //data:就是服务器端响应数据
            //修改H1标题
            $("h1").html(data);
        });
    });
    
   
    // $("button:eq(1)").click(function () {
  	//     //发送post请求
    //     $.post("./data.txt", function (data) {
    //         $("h1").html(data);
    //     });

    // });

    // $("button:eq(2)").click(function () {
    //     //发送GET或POST请求，请求参数必是一个JSON数据格式
    //     $.ajax({
  	//。       //请求路径
    //         "url": "./data.txt",
    //         //请求方式：GET、POST
    //         "type": "post",
    //         //传递参数
    //         "data": {
    //             "a": 1
    //         },
    //         //服务器响应后回调函数
    //         "success": function (data) {
    //             $("h1").html(data);
    //         }
    //     });
    // });
</script>

jquery-3.5.1.min.js(resources/static)
data.txt(resources/static)
```
这是新的内容
```
启动AjaxtestApplication
访问http://localhost:8080/hello，点击按钮后，第一行标题文字变为data.txt中文字

13 原生AJAX

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<h1>我是默认文本</h1>
<button>单击我悄悄发起上行请求----GET</button>
</body>

</html>
<script>
    //获取标签
    var h1 = document.querySelector("h1");
    var btn = document.querySelector("button");
    //单击按钮发起上行请求
    btn.onclick = function () {
        //悄悄发起上行请求
        if (window.XMLHttpRequest) {
            //高级浏览器写法
            var xhr = new XMLHttpRequest();
        } else {
            //IE低版本写法
            var xhr = new ActiveXObject("msxml2.0xmlhttp");
        }
        //设置请求方式
        xhr.open("get", "./data.txt", true);
        //发送请求
        xhr.send();
        //监听就绪状态
        xhr.onreadystatechange = function () {
            if (xhr.status == 200 && xhr.readyState == 4) {
                //在页面没有重新加载情况下实现页面局部跟新
                h1.innerHTML = xhr.responseText;
            }
        }

    }
</script>

14 JSONP跨域

跨域：用户在服务器A提供的页面中，向服务器B发送请求就称为跨域

AJAX技术遵守"同源策略"，因此不支持跨域请求数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./jquery-3.5.1.min.js"></script>
</head>

<body>
<h1>我是来源于127.0.0.1服务器页面</h1>
<button>拉去127.0.0.2服务器上面数据</button>
</body>

</html>
<script>
    //AJAX技术不能跨域请求数据
    $("button").click(function () {
        //请求第二个服务器上面数据，单击按钮后，控制台会显示报错
        $.get("http://127.0.0.1:8081/data.txt", function () {

        })
    });
</script>

跨域原理
1. 拥src属性的标签都拥有跨域的能力，例如通过script标签的src引入互联网上的js文件时，客户端会执行js文件中的所有代码，这其实就完成了跨域
2. 因此可以在远程服务器上设法把数据装进js格式的文件里，这样客户端就可以通过src属性获取到这些数据
3. js原生支持jason格式的处理，因此可以考虑以jason格式封装这些数据
JSONP：是一种非正式传输协议，允许客户端传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <select></select>
  </body>

</html>
<script>
  //获取下拉框
  var select = document.querySelector("select");
  //声明一个同名函数
  function jQuery4494404(arr) {
    //遍历数组
    for (var i = 0; i < arr.length; i++) {
      //创建节点
      var op = document.createElement("option");
      op.innerHTML = arr[i].name;
      select.appendChild(op);
    }
  }
</script>
<!-- 将京东服务器调用部分引入 -->
<script src="https://fts.jd.com/area/get?fid=72&callback=jQuery4494404&_=1578732186910"></script>

15 bootstrap

是一个前端框架，可以用来方便地布局，写样式
教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
  </head>

  <body>
    <!--1. class必须叫container-->
    <div class="container">
      <!--2. class为row表示一行，col表示一列-->
      <div class="row">
        <!--3. xs表示水平排列，两个都是6，表示占用6份，因为都是6，所以表示一人占一半-->
        <div class="col-xs-6">么么哒</div>
        <div class="col-xs-6">哈哈哈</div>
      </div>
      <div class="row">
        <div class="col-xs-2">小明</div>
        <div class="col-xs-10">小123131</div>
      </div>
      <!--4. 想引用图标时，直接将class属性指定为官网中class值，即可使用该图标-->
      <span class="glyphicon glyphicon-fullscreen"></span>
      <!--5. 可以在w3c教程中直接copy过来，此处为分页图标-->
      <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>
    </div>
  </body>

</html>

16 node平台

官网：http://nodejs.cn/
node是一款软件，并不是一门语言，JS在node软件上运行
node软件诞生初期是为了方便服务器端开发，但现在前端工程师使用node软件目的不是为了开发服务器，我们下载node只为了使用其内置的npm工具，该工具类似springboot+maven的功能，可以作为前端开发当中"脚手架"
node软件支持JS全部核心语法(ES6、7、8、9、10)
node平台没有DOM、BOM概念，执行console.log(document)、console.log(window)会报错
mac上可以通过Homebrew安装node，安装成功后， node -v可以显示版本号

16.1 node基本使用

执行js文件：node js文件路径

代码

//node平台支持JS全部核心语法
//变量
var a = 100;
var b = 200;
console.log(a + b);
//运算符[数学运算符、比较运算符、逻辑运算符]都支持
console.log(3 > 8 ? 6 : 9);
//流程控制语句
for (var i = 1; i <= 100; i++) {
  if (i % 2 == 0) console.log(i);
}
//函数
function sum(a, b) {
  return a + b;
}
console.log(sum(11, 11));
//数组
var arr = ["吃饭", "睡觉", "打豆豆"];
console.log(arr.reverse());
//构造函数
function People(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
//原型对象方法
People.prototype.eat = function() {
  console.log("我可以吃八斤米饭");
};
//创建小明
var xiaoming = new People("小明", 18, "男");
xiaoming.eat();

16.2 node内置模块使用

node提供了一些内置模块，扩展了传统JS的功能

16.2.1 fs模块

可以操作文件

代码

//1. require：node提供的内置函数，可以引入指定模块
//2. fs：该模块可以操作文件
var fs = require("fs");
//3. writeFile：写入数据，参数一：写入的文件路径，参数二：回调函数
fs.writeFile("./jch.txt", "老师是祖国的老花骨朵把", function () {
  console.log("数据写入......");
});
//4. readFile：读取数据
fs.readFile("./jch.txt", function (err, data) {
  //toString将字节码转为字符
  console.log(data.toString());
})

16.2.2 queryString模块

queryString指url中，形为a=1&b=2的字符串

代码

//queryString模块：可以将JSON数据格式转换为queryString字符串
var querystring = require("querystring");

//stringify：将JSON转换为queryString字符串
console.log(querystring.stringify({
  "a": 1,
  "b": 2
}));


//http模块：用于创建一个服务器
var http = require("http");
//创建服务器对象
var app = http.createServer(function (req, res) {
  res.setHeader('Content-Type', 'text/html;charset=utf-8');
  //设置返回的状态码
  res.statusCode = 500;
  //当有请求进入时，服务器响应数据
  res.end("老师自己开发的服务器");
});
//端口号设置
app.listen(3000);

16.3 NPM工具使用

npm社区网站：https://www.npmjs.com/
可以利用npm工具下载社区网站中其他人开发的模块(Vue、React)
使用流程
1. 到社区网站搜索需要引入的模块
2. 在命令行中通过npm install 自定义模块名下载模块到./node_modules/自定义模块名路径下
3. 通过require引入新下载的模块并使用

16.3.1 colors模块

可以在控制台打印彩色文字
下载：npm install colors

代码

//引入社区自定义模块colors
//可以改变文字颜色
var colors = require("colors");
console.log("我非常喜欢贾成豪,因为贾成豪只是深渊".green);
console.log("我很喜欢小明".rainbow);

16.3.2 solarlunar模块

可以实现公历、农历转换
下载：npm install solarlunar

代码

//引入社区自定义模块solarLunar
var solarLunar = require("solarLunar");
var solar2lunarData = solarLunar.solar2lunar(1996, 3, 8);
console.log(solar2lunarData);
console.log(solar2lunarData.animal);

含低调

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4. jQuery

1 jQuery函数库简介学习手册：http://jquery.cuishifeng.cn/jQuery是一个JavaScript函数库2 jQuery函数库基本使用jquery-2.0以上版本不再支持IE 6/7/8使用前需要先下载其源码：http://www.jq22.com/jquery-info122，然后在页面中，通过script标签的src属性引入外部js库来进行使用也可以直接引入互联网上的js库进行使用一般情况下单位px可以省略中间带有横杠的样式(fon
复制链接

扫一扫

专栏目录