jquery 写官网（全部功能）

约定不等于承诺〃 2021-07-25 11:55 370阅读 0赞

## jquery 写官网 ##

最近有个需求就是写一个官网，内容包含：导航/简介/产品/优势/加入我们等。

### 导航点击事件 ###

对应的jquery代码：

// 对每个nav-item类名的元素进行遍历，通过each遍历。
    // $(this)就是每个nav-item类名的元素，点击事件触发的函数如下：
    // 将所有的元素移除class类名active,即选中状态。
    // 给当前点击事件的元素添加active类名
    // var href = $.attr(this,'href');获取当前元素的href属性内容，然后拼接到地址栏中。
    // window.location.hash = href;
    $(".nav-item").each(function (index) { 
     $(this).click(function () { 
        $(".nav-item").removeClass("active");
        $(".nav-item").eq(index).addClass("active");
        var href = $.attr(this, 'href');
        // 这个动画没有生效……………………
        $('html, body').animate({ 
          scrollTop: $(href).offset().top
        }, 50, function () { 
          window.location.hash = href;
        });
        return false;
      })
    })

导航部分效果图：  
![导航部分效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

### 产品部分切换图片 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
点击“<” ">"按钮时，会实现图片的切换。

html代码：

<div class="chanpin-con">
      <div class="left" id="left"><img src="../image/left.png" alt="左"></div>
      <div class="chanpin-item">
        <div>
          <div class="chanpin-tit">智能加热</div>
          <div class="chanpin-sub">Intelligent heating</div>
        </div>
        <div>
          <div class="chanpin-tit">三档可调</div>
          <div class="chanpin-sub">Three-speed adjustable</div>
        </div>
        <div>
          <div class="chanpin-tit">防水防风面料</div>
          <div class="chanpin-sub">Waterproof and windproof fabric</div>
        </div>
      </div>
      <div class="chanpin-img"><img src="../image/clothes/cloth0.png" alt="产品图"></div>
      <div class="chanpin-item right">
        <div>
          <div class="chanpin-tit">防钻绒工艺</div>
          <div class="chanpin-sub">Anti-pile drilling technology</div>
        </div>
        <div>
          <div class="chanpin-tit">恒温控制</div>
          <div class="chanpin-sub">Constant temperature control</div>
        </div>
        <div>
          <div class="chanpin-tit">远红外线理疗</div>
          <div class="chanpin-sub">Far Infrared physiotherapy</div>
        </div>
      </div>
      <div class="right" id="right"><img src="../image/right.png" alt="右"></div>
    </div>

js部分代码：  
处理思路：将所有图片放在一个数组中，点击切换按钮时，选取不同的图片进行展示即可。

### 加入我们部分 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
地图部分的代码：  
此处使用的是百度地图API，是最简单的定位的代码。

html代码：

js代码：

// 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.21926, 30.345913), 50);
    map.enableScrollWheelZoom(true);
    
    // 用经纬度设置地图中心点
    function theLocation() { 
      if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") { 
        map.clearOverlays();
        var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
        var marker = new BMap.Marker(new_point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(new_point);
      }
    }

加入我们部分的代码：

### jquery校验手机号 ###

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if (!myreg.test(phone)) { 
      alert('请输入有效的手机号码！');
      return;
    }

### jquery校验邮箱 ###

var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
    if (!reg.test(email)) {  //正则验证不通过，格式不对
      alert("请输入正确的邮箱！");
      return false;
    }

### jquery存缓存与取缓存 ###

var time = localStorage.getItem("uid") || guid();
    localStorage.setItem("uid", time);

### ajax请求数据 ###

//ajax:请求方式:type 头部：headers 请求地址：url 请求发送的数据：data 请求成功返回的函数：success 请求失败返回的函数：error
    var name = $("#name").val();
    var phone = $("#phone").val();
    var email = $("#email").val();
    var message = $("#message").val();
    if (!name || !phone || !email) { 
      alert("姓名 电话 邮箱为必填项,请填写完整！");
      return;
    };
    var list = { 
      "joinerName": name,
      "joinerTel": phone,
      "joinerMail": email,
      "joinerMsg": message
    };
    $.ajax({ 
      //请求方式
      type: "POST",
      //请求的媒体类型
      headers: {  'Content-Type': 'application/json;charset=utf8', 'pt': 'web', 'dk': time, 'pk': 'mall' },
      //请求地址
      url: "/user/join/createJoiner",
      //数据，json字符串
      data: JSON.stringify(list),
      //请求成功
      success: function (result) { 
        console.log(result);
        if (result.code === 200) { 
          alert("信息提交成功!");
          $("#name").val("");
          $("#phone").val("");
          $("#email").val("");
          $("#message").val("");
        }
      },
      //请求失败，包含具体的错误信息
      error: function (e) { 
        console.log(e.status);
        console.log(e.responseText);
        flag = false;
      }
    });

### nginx的使用 ###

1.  下载nginx  
    在ajax调取官网接口数据时，会出现跨域的情况。这个时候如果想要获取到接口数据，则可以通过nginx解决跨域问题。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]
2.  使用方法：  
    双击nginx.exe，会弹窗然后消失。  
    将写好的代码放入到html文件夹下面。  
    ![在这里插入图片描述][20200831173256811.png_pic_center]  
    可以是一个新的文件夹，也可以是xxx.html文件。

找到此文件夹中的主html文件。双击打开，此时打开的地址是本地路径。  
![在这里插入图片描述][20200831173335477.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
此时，需要修改地址，具体改为的内容需要查看conf文件夹中的nginx.conf，此文件以记事本格式打开后，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]  
找到server部分，listen:监听的端口号是8081,serve\_name:路径的地址是：localhost

所以可以将已经打开的本地路径改为：localhost:8081,就是要从html/之前的全部都替换掉。

![在这里插入图片描述][20200831173727518.png_pic_center]  
改为：  
![在这里插入图片描述][20200831173743826.png_pic_center]  
将conf文件夹下面的nginx.conf文件中的内容更改：  
将下面的location 部分前面的“\#”去掉，如果带着“\#”，则表示是注释状态。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 6]  
需要调用的api接口地址是:http://api/test.zjddwl.net/user/……  
所以：  
代理的网址为：http://api.test.zjddwl.net  
location 后面的内容应该是/user，就是接口地址除去域名之外的内容。这样在ajax调用的时候就可以直接使用代理的网址了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/b41cc55d34ca4e79a2dc7a2ca62652ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/03f59b5910134035b7823159af4941fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/36a2c4ff1f154d68bbef928afa3eef41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/b5a231db88f444529bc190d8c3bc6d46.png
[20200831173256811.png_pic_center]: /images/20210725/53735e5cf583493a81c968e748c21c8f.png
[20200831173335477.png_pic_center]: /images/20210725/6e806adc71fc40beae3b2ab3cf4e689f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/d31d4fa460974a67979bec105b5ab21f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/7d23fbdcad0a4e4592be26016d1ac6ee.png
[20200831173727518.png_pic_center]: /images/20210725/da289f74ce8446adab7be7df300ffe4f.png
[20200831173743826.png_pic_center]: /images/20210725/056708d961b74d3c96517e718f311cec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/a738525d80c24ecaab0d4a345376a343.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210725/12214a298dc440dba1007ad7ba91140d.png