# Jquery

一篇文章教会你 jQuery 应用

# jquery 实现 html 页面的导航的标签内容切换

导航栏的 ul li 都对应的一个 div，每个 li 单机时候添加属性，并且与之对应的 div 展示。

<ul class="switch">
    <li class="selected">导航一</li>
    <li>导航二</li>
    <li>导航三</li>
</ul>
<div class="content">
    <div>内容一</div>
    <div style="display: none">内容二</div>
    <div style="display: none">内容三</div>
</div>
<script>
    $(function(){
        /*单击切换*/
        $(".switch  li").click(
                function(){
                    /*每个li下属的div*/
                    var divShow = $(".content").children("div");
                    /*利用selected进行判断*/
                    if(!$(this).hasClass("selected")){
                    /*li标签的顺序和div的顺序是对应的，获取索引*/
                        var index = $(this).index();
                        /*当前对象设置class属性*/
                        $(this).addClass("selected");
                        /*移除其他同级元素属性*/
                        $(this).siblings("li").removeClass("selected");
                        /*展示当前li对应的div内容,利用方法显示和隐藏*/
                        $(divShow[index]).show();
                        /*隐藏同级元素*/
                        $(divShow[index]).siblings("div").hide();
                    }
                }
        )
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# .attr()、.data()

back

$.attr()和$.data()本质上属于 DOM 属性和 Jquery 对象属性的区别。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Jquery中.attr和.data的区别</title>
  </head>
  <body>
    <p id="app" data-foo="hello"></p>
  </body>
  <script
    type="text/javascript"
    src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"
  ></script>
  <script type="text/javascript">
    var getAttr1 = $("#app").attr("data-foo");
    var getData1 = $("#app").data("foo");
    console.log("getAttr1: " + getAttr1); //hello
    console.log("getData1: " + getData1); //hello

    $("#app").attr("data-foo", "world"); //$.attr 设置DOM元素属性值
    var getAttr2 = $("#app").attr("data-foo");
    var getData2 = $("#app").data("foo");
    console.log("getAttr2: " + getAttr2); //world
    console.log("getData2: " + getData2); //**- hello ***

    $("#app").data("foo", "WORLD"); //$.data 设置DOM node属性值
    var getAttr3 = $("#app").attr("data-foo");
    var getData3 = $("#app").data("foo");
    console.log("getAttr3: " + getAttr3); //world
    console.log("getData3: " + getData3); //**- WORLD ***
  </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$.attr()每次都从 DOM 元素中取属性的值，即和视图中标签内的属性值保持一致。
$.attr('data-foo')会从标签内获得 data-foo 属性值；
$.attr('data-foo', 'world')会将字符串'world'塞到标签的'data-foo'属性中；
$.data()是从 Jquery 对象中取值，由于对象属性值保存在内存中，因此可能和视图里的属性值不一致的情况。
$.data('foo')会从 Jquery 对象内获得 foo 的属性值，不是从标签内获得 data-foo 属性值；
$.data('foo', 'world')会将字符串'world'塞到 Jquery 对象的'foo'属性中，而不是塞到视图标签的 data-foo 属性中。

结合上面代码和解释，大家应该能够理解两者的区别。

# 小结

所以$.attr()和$.data()应避免混合用，也就是应该尽量避免如下两种情况的出现：

通过$.attr()来进行set属性，然后通过$.data()进行 get 属性值；
通过$.data()来进行set属性，然后通过$.attr()进行 get 属性值。

同时从性能的角度来说，建议使用$.data()来进行set和get操作，因为它仅仅修改的 Jquey 对象的属性值，不会引起额外的 DOM 操作。
如果 dom 中赋值是一个字符串 true，使用 data 取出的却是 boolean true

# attr 和 prop

back

那么，什么时候使用 attr()，什么时候使用 prop()？

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用 prop()，
其他的使用 attr() 。
到此，将 attr(‘checked’)改成 prop(‘checked’)即可修复提的 issues 了。

Jquery1.9.0 开始不建议使用 attr() 来对具有 true 和 false 两个属性的属性进行操作了。

那么我们的结论是：

Attribute/Property	.attr()	.prop()	Attribute/Property	.attr()	.prop()
accesskey	☑		align	☑
async		☑	autofocus		☑
checked	☑		class	☑
contenteditable	☑		draggable	☑
href	☑		id	☑
label	☑		location(ie-window.location)		☑
multiple		☑	readOnly		☑
rel	☑		selected		☑
src	☑		tabindex	☑
title	☑		type	☑
width(if needed over.width())	☑

# 多个相同 class 的标签的点击

back

$(".videojsWindow").click(function() {
  // debugger
  if (!$(this).attr("selected")) {
    $(".videojsWindow").removeAttr("selected");
    $(".videojsWindow").removeClass("selected");
    $(this).attr("selected", "true");
    $(this).addClass("selected");
    // alert("test");
  }
});

var listVideos = $(".videojsWindow");
for (var j = 0; j < listVideos.length; j++) {
  if (listVideos[j].getAttribute("selected")) {
    player = players["myVideoPlayer" + (j + 1)];
    break;
  }
  // listVideos[i].hasClass("selected");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 注册 click 事件

back

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>添加点击事件</title>
    <script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script>
    <script type="text/javascript">
      $(function() {
        //方式①
        $("#clickBtn").click(function() {
          alert(1);
        });

        //方式②：  支持事件冒泡(兼容性非常好)
        $("#clickBtn").on("click", function() {
          alert(2);
        });
        $("#clickBtn").off("click"); //注销事件

        //方式③：
        $("#clickBtn").bind("click", function() {
          alert(3);
        });
        //$("#clickBtn").unbind("click"); //注销事件
      });
    </script>
  </head>
  <body>
    <input type="button" id="clickBtn" value="点我" />
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# ajax

back

# 坑 datatype、dataType

$.ajax({
  type: "post",
  url: "[[@{'/user/validateLogin'}]]",
  data: $("#userLoginForm").serialize(),
  datatype: "json",
  success: function(data) {
    if (data == "success") {
      location.href = "[[@{'/index'}]]";
    } else {
      layer.msg(data, { icon: 5, time: 2000 });
    }
  },
  error: function(data) {
    layer.msg("error", { icon: 5, time: 2000 });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意datatype的大小写问题，此时后台的返回不必做如下处理：（针对后台返回类型为 String 的）

return JSON.toJSONString(ConstantEnum.SUCCESS.getIndex());

只需要直接

return ConstantEnum.SUCCESS.getIndex();

而一旦写成如下：

$.ajax({
  type: "post",
  url: "[[@{'/changeLang'}]]",
  dataType: "json",
  data: { lang: lang },
  success: function(data) {
    if (data == "success") {
      location.reload();
    }
  },
  error: function() {
    layer.msg("error", { icon: 5, time: 2000 });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意**dataType中的Type的首字母大写**了。

此时后台返回则必须写成：

return JSON.toJSONString(ConstantEnum.SUCCESS.getIndex());

# MD5 算法“加密”数据

back

引入 js 文件，md5.js，直接调用 js 里的函数

# 圆形进度条

圆形进度条

# echarts 相关

back | 返回开源前端：Echarts

1、饼图，图例

legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData
}
var legendData = [];

1
2
3
4
5
6
7
8
9

# 获取 url 中参数

function getUrlVars() {
  var vars = [],
    hash;
  var hashes = window.location.href
    .slice(window.location.href.indexOf("?") + 1)
    .split("&");
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split("=");
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}
var id = getUrlVars()["id"];
var name = getUrlVars()["name"];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Jquery 写法：

$.extend({
  getUrlVars: function() {
    var vars = [],
      hash;
    var hashes = window.location.href
      .slice(window.location.href.indexOf("?") + 1)
      .split("&");
    for (var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split("=");
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name) {
    return $.getUrlVars()[name];
  },
});
var id = $.getUrlVar("id");
var name = $.getUrlVar("name");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 日期问题“-”

back

除了谷歌浏览器比较牛，其他如 FF、IE 都无法正确解析日期中的“-”；

# dataTable

表格数据问题，即使数据隐藏，但是前台的表头还是需要展示

# 控制 css

back

# 获取

$(".div1").click(function() {
  // 1. 使用width() height()方法来获取宽高 返回的是整形数字
  var divw = $(this).width();
  var divh = $(this).height();
  // 2.使用css方式获取宽高 带px的字符串
  var divw = $(this).css("width");
  var divh = $(this).css("height");
  alert("div宽:" + divw + ";div高:" + divh);
});

1
2
3
4
5
6
7
8
9

# 设置

$("#update").click(function() {
  var divw = $("#w").val();
  var divh = $("#h").val();

  // 1. 使用width() height()方法来设置div宽高
  $(".div1")
    .width(divw)
    .height(divh);

  // 2. 使用css的方式来设置宽高
  $(".div1").css({ width: divw + "px", height: divh + "px" });

  // 3. 使用函数链的方式写代码
  // 注：使用css设置单个样式时，参数为css("width",divw+"px") 逗号分割
  $(".div1")
    .css("width", divw + "px")
    .css("height", divh + "px");

  // 4. 使用不同函数的函数链
  $(".div1")
    .css("width", divw + "px")
    .height(divh);

  // 5.animate()动画 宽高一块改变
  $(".div1").animate({ width: divw + "px", height: divh + "px" }, 4000);

  // 6.animate()动画 先改变宽，再改变高
  $(".div1")
    .animate({ width: divw + "px" }, 4000)
    .animate({ height: divh + "px" }, 4000);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function showImage(obj) {
  var img = $("#download img");
  img.attr("src", obj.src);
  img.css("width", "516px");
  layer.open({
    type: 1,
    title: false,
    area: "516px",
    skin: "layui-layer-nobg", //没有背景色
    shadeClose: true,
    content: $("#download"),
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13