jQuery 工具、属性、CSS 笔记来源：尚硅谷 jQuery 教程(jquery 从入门到精通)

[TOC]

jQuery 工具、属性、CSS

1、jQuery 工具方法

不过，我们常用的工具方法并不多

$.each()

// 1、$.each()：遍历数组或对象中的数据
var obj = {
  name: "Tom",
  setName: function (name) {
    this.name = name;
  },
};
$.each(obj, function (key, value) {
  console.log(key, value); // name Tom   setName ƒ (name) {}
});

$.trim()

// 2、$.trim()：去除字符两边的空格
var str = "    ddd ";
console.log($.trim(str)); // ddd

$.type()

// 3、$.type(obj)：得到数据的类型
console.log($.type($), $.type($())); // function object

$.isArray()

// 4、$.isArray(obj)：判断是否是数组
console.log($.isArray($("body")), $.isArray([])); // false true

$.isFunction()

// 5、$.isFunction(obj)：判断是否是函数
console.log($.isFunction($), $.isFunction($())); // true false

$.isNumberic()

// 6、$.isNumberic(obj)：判断是否是数字
console.log($.isNumeric("a"), $.isNumeric("2"), $.isNumeric(2)); // false true true

$.parseJSON()

// 7、$.parseJSON(json)：解析json字符转换为js对象/数组
var jsonObj = '{"name":"Tom", "age": 18}';
console.log($.parseJSON(jsonObj)); // {name: "Tom", age: 18}
var jsonArr = '[{"name":"Tom", "age": 18}, {"name":"Jack", "age": 28}]';
console.log($.parseJSON(jsonArr)); // (2) [{…}, {…}]

2、练习：多 Tab 点击切换

HTML 代码

<ul id="tab">
  <li id="tab1" value="1">10元套餐</li>
  <li id="tab2" value="2">30元套餐</li>
  <li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
  <div id="content1">
    10元套餐详情：<br />
    每月套餐内拨打100分钟，超出部分2毛/分钟
  </div>
  <div id="content2" style="display:none">
    30元套餐详情：<br />
    每月套餐内拨打300分钟，超出部分1.5毛/分钟
  </div>
  <div id="content3" style="display:none">
    50元包月详情：<br />
    每月无限量随心打
  </div>
</div>

jQuery 代码

var $containers = $("#container>div");
var curIndex = 0;
$("#tab>li").click(function () {
  // 隐式遍历
  // 隐藏上一次
  $containers[curIndex].style.display = "none";
  // 显示当前的
  curIndex = $(this).index();
  $containers[curIndex].style.display = "block";
});

3、jQuery 操作属性

attr()、removeAttr()

//1.读取第一个div的title属性
console.log($("div:first").attr("title")); // one
//2.给所有的div设置name属性（value 为atguigu）
$("div").attr("name", "atguigu");
//3.移除所有div的title属性
$("div").removeAttr("title");
//4.给所有的div设置class='guiguClass'
$("div").attr("class", "guiguClass");

addClass()、removeClass()

//5.给所有的div添加class='abc'
$("div").addClass("abc");
//6.移除所有div的guiguClass的class
$("div").removeClass("guiguClass");

html()、val()

//7.得到最后一个li的标签体文本
console.log($("ul>li:last").html()); // <span>BBBBB</span>
//8.设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
$("ul>li:first").html("<h1>mmmmmmmmm</h1>");
//9.得到输入框中的value值
console.log($(":text").val()); // guiguClass
//10.将输入框的值设置为atguigu
$(":text").val("atguigu");

prop()、removeProp()

//11.点击’全选’按留实现全选
var $checkbox = $(":checkbox");
$("button:first").click(function () {
  $checkbox.prop("checked", true);
});
//12.点击’全不选’按留实现全不选
$("button:last").click(function () {
  $checkbox.prop("checked", false);
});

attr()：操作属性值为非布尔值的属性件 prop()：专门操作属性值为布尔值的属性

4、jQuery 操作 CSS

css()

// 1.得到第一个p标签的颜色
console.log($("p:first").css("color")); // rgb(0, 0, 255);
// 2.设置所有p标签的文本颜色为red
$("p").css("color", "red");
// 3.设第2个p的字体颜色（#ffee11），背景（blue），宽（300px），高（30px）
$("p:eq(1)").css({
  color: "#ffee11",
  backgroundColor: "blue",
  width: 300,
  height: 30,
});

offset 和 position

// 1.点击btn1
$("#btn1").click(function () {
  // 打印div1相对于页面左上角的位置
  var offset1 = $(".div1").offset();
  console.log(offset1.left, offset1.top); // 10 20
  // 打印div2相对于页面左上角的位置
  var offset2 = $(".div2").offset();
  console.log(offset2.left, offset2.top); // 10 70

  // 打印div1相对于父元素左上角的位置
  var position1 = $(".div1").position();
  console.log(position1.left, position1.top); // 10 20
  // 打印div2相对于父元素左上角的位置
  var position2 = $(".div2").position();
  console.log(position2.left, position2.top); // 0 50
});

// 2.点击btn2
$("#btn2").click(function () {
  // 设置div2相对于页面的左上角的位置
  $(".div2").offset({ left: 0, top: 0 });
});

scrollTop 和 scrollLeft

// 1.得到div或页面滚动条的坐标
$("#btn1").click(function () {
  console.log($("div").scrollTop()); // 400
  console.log(
    $(document.documentElement).scrollTop() + $(document.body).scrollTop()
  ); // 200
});
// 2.让div或页面的滚动条滚动到指定位置
$("#btn2").click(function () {
  $("div").scrollTop(1000);
  $("html,body").scrollTop(100);
});

元素的尺寸

1.内容尺寸

• height()：height
• width()：width

2.内部尺寸

• innerHeight()：height + padding
• innerwidth()：width + padding

3.外部尺寸

• outerHeight(false/true)：height + padding + border 如果是true，加上margin
• outerwidth(false/true)：width + padding + border 如果是true，加上margin

var $div = $("div");
console.log($div.height(), $div.width()); // 150, 100
console.log($div.innerHeight(), $div.innerWidth()); // 170 120
console.log($div.outerHeight(), $div.outerWidth()); // 190 140
console.log($div.outerHeight(true), $div.outerWidth(true)); // 210 160