jquery 写官网

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

导航点击事件

<div class="navList">
  <a class="nav-item active" data-name="one" href="#shouye" target="_self">网站首页</a>
  <a class="nav-item" data-name="two" href="#pinpai" target="_self">品牌简介</a>
  <a class="nav-item" data-name="three" href="#chanpin" target="_self">产品优势</a>
  <a class="nav-item" data-name="four" href="#pingtai" target="_self">平台优势</a>
  <a class="nav-item" data-name="five" href="#join" target="_self">加入我们</a>
</div>

对应的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;
  })
})

导航部分效果图：

产品部分切换图片

点击“<” ">"按钮时，会实现图片的切换。

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

 var imgArr = ["../image/clothes/cloth0.png", "../image/clothes/cloth1.png", "../image/clothes/cloth2.png", "../image/clothes/cloth3.png", "../image/clothes/cloth4.png", "../image/clothes/cloth5.png"];
var len = imgArr.length;
 $("#left").click(function () {
  if (index === 0) {
    index = len - 1;
  } else {
    index--;
  }
  $(".chanpin-img img").attr("src", imgArr[index]);
})
$("#right").click(function () {
  if (index === len - 1) {
    index = 0;
  } else {
    index++;
  }
  $(".chanpin-img img").attr("src", imgArr[index]);
  })

加入我们部分

地图部分的代码：
此处使用的是百度地图API，是最简单的定位的代码。

html代码：

<div class="join-map" id="allmap"></div>

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解决跨域问题。
   
2. 使用方法：
   双击nginx.exe，会弹窗然后消失。
   将写好的代码放入到html文件夹下面。
   
   可以是一个新的文件夹，也可以是xxx.html文件。

找到此文件夹中的主html文件。双击打开，此时打开的地址是本地路径。


此时，需要修改地址，具体改为的内容需要查看conf文件夹中的nginx.conf，此文件以记事本格式打开后，如下：

找到server部分，listen:监听的端口号是8081,serve_name:路径的地址是：localhost

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

改为：

将conf文件夹下面的nginx.conf文件中的内容更改：
将下面的location 部分前面的“#”去掉，如果带着“#”，则表示是注释状态。

需要调用的api接口地址是:http://api/test.zjddwl.net/user/……
所以：
代理的网址为：http://api.test.zjddwl.net
location 后面的内容应该是/user，就是接口地址除去域名之外的内容。这样在ajax调用的时候就可以直接使用代理的网址了。