jQuery其他方法(超级好用）

释怀°Believe

已于 2022-03-15 11:56:10 修改

阅读量232

点赞数

分类专栏： # jQuery 文章标签： jquery javascript 前端

于 2022-03-15 11:53:17 首次发布

本文链接：https://blog.csdn.net/qq_52986400/article/details/123441618

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、jQuery拷贝对象❤️❤️❤️

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
语法：
在这里插入图片描述
1.deep:如果为true为深拷贝，默认为false浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝第一个对象的对象
4.objectN:待拷贝到第N个对象的对象
5.浅拷贝把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
在这里插入图片描述

  <script>
    $(function (){
      // var targetObj ={};
      // var obj = {
      //   id : 1,
      //   name: "andy"
      // }
      // $.extend(targetObj,obj);
      // console.log(targetObj);

      var targetObj ={
        id : 0;
      };
      var obj = {
        id : 1,
        name: "andy"
      }
      $.extend(targetObj,obj);
      console.log(targetObj);  //会覆盖之前的数据
      targetObj.msg.age = 20;
      console.log(targetObj);
      console.log(obj);
    })

  </script>

6.深拷贝，前面加true,完全克隆（拷贝的对象，而不是地址）修改目标对象不会影响被拷贝的对象
在这里插入图片描述

深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性，会合并到一起
在这里插入图片描述

二、多库共存❤️❤️❤️

jQuery使用$作为标示符，随着jQuery的流行，其他js库也会使用$作为标识符，这样一起使用会引起冲突
客观需求：
在这里插入图片描述
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这叫做多库共存。
jQuery解决方案：
1.把里面的$符合统一改为jQuery，比如jQuery(“div”);

2.jQuery变量规定新的名称：$noConflict() var xx = $no.Conflict();


```javascript
  <script src="jquery.min.js"></script>
  <script>
    $(function (ele){ // I'j
      function $(ele){
        return document.querySelector(ele);
      }
      console.log($("div"));
      // 1.如果$符号冲突，我们就是要jQuery，
      jQuery.each();
      // 2.让jQuery释放对$的控制权 自己决定
      var suibian = jQuery.noConflict();
      console.log(suibian("span"));
      suibian.each();
    })
  </script>
</head>
<body>
    <div></div>
    <span></span>
</body>

三、jQuery插件❤️❤️❤️⭐

jQuery功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成。
注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。
❤️❤️❤️

jQuery插件常用的网站：
1.jQuery插件库：http://www.jq22.com/
2.jQuery之家：http://www.htmleaf.com/
jQuery插件使用步骤：
1.引入相关文件。(jQuery文件和插件文件)
2.复制相关html,css,js(调用插件)

jQuery插件演示：

3.1.瀑布流

3.2.图片懒加载

（图片使用延时加载在可提高网页下载速度，他也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片
我们使用jQuery插件库EasyLazyload。注意：此时引入的js文件和js调用必须写到DOM元（图片）最后面

3.3全屏滚动插件的使用(fullPage.js)

github:https:https://github.com/alvarotrigo/fullPage.js/
中文翻译网站：http://www.dowebok.com/demo/2014/77/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/jquery.fullPage.css">
  <style>
    #fp-nav ul li a.active span{
        background-color: red!important;
    }  
    /*//右侧小圆点颜色*/

  </style>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.fullPage.min.js"></script>
  <script>
    $(function (){
      $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        navigation: true
      });
    });
  </script>

</head>
<body>
<div id = 'dowebok'>
  <div class="section">
    <h3>第一屏</h3>
  </div>
  <div class="section">
    <h3>第二屏</h3>
  </div>
  <div class="section">
    <h3>第三屏</h3>
  </div>
  <div class="section">
    <h3>第四屏</h3>
  </div>
</div>
</body>
</html>

在这里插入图片描述

3.4bootstrap JS插件：

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。
注意：使用bootstrap需要使用

<div class="container">   </div>

1.组件
https://v3.bootcss.com/components/#nav
在这里插入图片描述
导航条组件

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   <script src="bootstrap/js/jquery.min.js"></script>
   <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

    </div>

</body>
</html>

在这里插入图片描述
2.js插件
<button data-toggle="modal" data-target="#btn">点击显示调用

 <div class="modal fade" tabindex="-1" role="dialog" id ="btn">

在这里插入图片描述

释怀°Believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery其他方法(超级好用）

文章目录一、jQuery拷贝对象❤️❤️❤️二、多库共存❤️❤️❤️三、jQuery插件❤️❤️❤️⭐3.1.瀑布流3.2.图片懒加载3.3全屏滚动插件的使用(fullPage.js)3.4bootstrap JS插件：一、jQuery拷贝对象❤️❤️❤️如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法语法：1.deep:如果为true为深拷贝，默认为false浅拷贝2.target:要拷贝的目标对象3.object1:待拷贝第一个对象的对象4.obje
复制链接

扫一扫