jQuery _02 $工具和CSS样式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• $是什么？
• 一、jQuery文件结构
• 二、$工具方法
• 三、jQuery属性和css
• 四、总结

---

$是什么？

$(function(){});
如果使用上述语句报错了  $ is not deifned，就说明没有引入jQuery文件。

$其实和jQuery是等价的，是一个函数。

$是一个函数
参数传递不同，效果也不一样。

$(function(){})  入口函数

$("") 选择器/创建一个标签

$(dom对象)   js--》jQUery

---

一、jQuery文件结构

其实时一个自执行函数
(function(){
    window.jQuery = window.$ = jQuery
}());

二、$工具方法

1. $.each(): 遍历数组或对象中的数据

代码如下（示例）：

var obj = {
        "name":"rainbow",
        "sex":"girl"
    }
    $.each(obj,function(key,value){
        console.log(key+","+value)
    })

2. $.trim(): 去除字符串两边的空格

代码如下（示例）：

var name = "  rainbow cai "
console.log($.trim(name))

---

 3. $.type(obj): 得到数据的类型

代码如下（示例）：

console.log($.type(name))
得到string

---

 4. $.isArray(obj): 判断是否是数组

代码如下（示例）：

console.log($.isArray($("body")))
返回结果是fasle，因为$("body")是$对象伪数组，不是真的数组

---

  5. $.isFunction(obj): 判断是否是函数

代码如下（示例）：

console.log($.isFunction($))
//返回true，因为$是一个js函数库

---

  6. $.parseJSON(json) : 解析json字符串转换为js对象/数组

代码如下（示例）：

var json = '{"name":"rainbow","sex":"girl"}'
    /*
     * json是js对象表示法，是一种特殊的字符串，有两种类型的json，json对象{}，json数组【】
     * 转换json对象-》js对象，json数组-》js数组
     * 原生的json转换
　　　　转换json对象-js对象
     * var objjson = JSON.parse(json)
　　　　json数组-js数组
       JSON.stringify(objjson)
     */
    console.log($.type($.parseJSON(json)))

---

7. $.isArray(obj): 判断是否是数组

代码如下（示例）：

console.log($.isArray($("body")))
返回结果是fasle，因为$("body")是$对象伪数组，不是真的数组

---

 三、jQuery属性和css

（1）CSS

1. css(name)

 访问第一个匹配元素的样式属性。
 返回值 String
 参数
 name (String) : 要访问的属性名称

      代码如下（示例）： 

$("p").css("color"); //取得第一个段落的color样式属性的值

2. css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
返回值 jQuery
参数
properties (Map) : 要设置为样式属性的名/值对

  代码如下（示例）：

//1 将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css({ color: "#ff0011", background: "blue" });

//2 如果属性名包含 "-"的话，必须使用引号
$("p").css({ "margin-left": "10px", "background-color": "blue" });

---

 3. css(name,value)

在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值
返回值 jQuery
参数
name (value) : 属性名
value (String, Number) : 属性值

代码如下（示例）：

$("p").css("color","red"); //将所有段落字体设为红色

---

 (2)位置

1、offset()

获取匹配元素在当前视窗口的相对偏移。返回的对象包含两个整形属性：top 和 left。
注意：此方法只对可见元素有效。
返回值 Object{top,left}

代码如下（示例）：

/*
//获取第二段的偏移
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:last");
var offset = p.offset();
p.html("left: " + offset.left + ", top: " + offset.top);

---

  2、position()

获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
返回值 Object{top,left}

代码如下（示例）：

/*
//获取第一段的偏移
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
var position = p.position();
$("p:last").html("left: " + position.left + ", top: " + position.top)

---

  3、scrollTop()

获取匹配元素相对滚动条顶部的偏移。
注意：此方法对可见和隐藏元素均有效。
返回值 Integer

代码如下（示例）：

/*
//获取第一段相对滚动条顶部的偏移
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("scrollTop:" + p.scrollTop());

---

4、scrollTop(val)

传递参数值时，设置滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。
返回值 jQuery

代码如下（示例）：

$("div.demo").scrollTop(300)

---

5、scrollLeft()

获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
返回值 Integer

代码如下（示例）：

/*
//获取第一段相对滚动条左侧的偏移
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("scrollLeft:" + p.scrollLeft());

---

6、scrollLeft(val)

传递参数值时，设置滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。
返回值 jQuery

代码如下（示例）：

$("div.demo").scrollLeft(300);

---

（3）尺寸

1、height()

取得第一个匹配元素当前计算的高度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的高
返回值 Integer

代码如下（示例）：

/*
//获取第一段的高
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
alert($("p").height());
//获取文档的高
alert($(document).height());

---

2、height(val)

为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。如果没有明确指定单位（如：em或%），使用px。
返回值 jQuery
参数
val (String, Number) : 设定CSS中 'height' 的值

代码如下（示例）：

/*
//把所有段落的高设为 20
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
$("p").height(20);
alert($("p").height());

---

3、width()

取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
返回值 Integer

代码如下（示例）：

/*
//获取第一段的宽
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
alert($("p").width());

---

4、width(val)

为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位（如：em或%），使用px。
返回值 jQuery
参数
val (String, Number) : 设定 CSS 'width' 的属性值

代码如下（示例）：

/*
//将所有段落的宽设为 20
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
$("p").width(20);
alert($("p").width());

---

 5、innerHeight()

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
返回值 Integer

代码如下（示例）：

/*
//获取第一段落内部区域高度
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("innerHeight:" + p.innerHeight());

---

6、innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。
返回值 Integer

代码如下（示例）：

/*
//获取第一段落内部区域宽度
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("innerWidth:" + p.innerWidth());

---

7、outerHeight(options)

获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
返回值 Integer
参数
options(Boolean) : (false) 设置为 true 时，计算边距在内。

代码如下（示例）：

/*
//获取第一段落外部高度
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true));

---

8、outerHeight(options)

获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
返回值 Integer
参数
options(Boolean) : (false) 设置为 true 时，计算边距在内。

代码如下（示例）：

/*
//获取第一段落外部宽度
文档片段：<p>Hello</p><p>2nd Paragraph</p>
*/
var p = $("p:first");
$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true));

---

四、总结