jQuery属性概述

1 操作元素属性

1.1 读取属性

对于页面上的各个元素，jQuery可以很方便的得到元素的各个属性。读取属性的函数时attr(name)。

函数名	attr(name)
作用	取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined
返回值	Object
参数	name(String)：属性名称

示例：获取a标签的href属性值，并在终端输出

    <a href="https://www.baidu.com">去百度</a>
    <script>
        $(function () {
            let str = $("a").attr("href");
            console.log(str);
        })
    </script>

1.2 修改属性

修改属性也可以使用attr方法。

函数名	attr(key,vakue)
作用	为所有匹配的元素设置一个属性值
返回值	jQuery
参数	key（String）：属性名称； value：设置的属性值

函数名	attr(key, fn)
作用	为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值
返回值	jQuery
参数	key（String）：属性名称； fn（Function）：返回值的函数范围：当前元素；参数：当前元素的索引值。

给一个input设置value值为123：

    <input type="text">
    <script>
        $(function () {
            $("input").attr("value", "123");
        })
    </script>

将input中的value属性设置为1~100的总和，fn部分设置成一个函数：

    <input type="text">
    <script>
        $(function () {
            $("input").attr("value", function () {
                let s = 0;
                for (let i = 0; i <= 100; i++) { //计算从1加到100的值
                    s += i;
                }
                return s;
            });
        })
    </script>

1.3 删除属性

函数名	removeAttr(name)
作用	从每一个匹配的元素中删除一个属性
返回值	Object
参数	name(String)：属性名称

示例：移除input的value属性

    <input type="text" value="123">
    <script>
        $(function () {
            $("input").removeAttr("value");
        })
    </script>

得到一个空的输入框，说明value属性被删除了。

2 操作样式类

样式类是CSS中的一个概念，它用于设定页面上对应于“class”属性的元素的样式显示。反复被使用的，如下所示的就是一个最简单的样式类：

.rose {
    background-color: red;
}

2.1 添加类

函数名	addClass(classes)
作用	为每个匹配的元素添加指定的类名
返回值	Object
参数	classes：要添加的类名

示例：为div标签添加指定的bg类。

    <style>
        /* 指定的bg类 */
        .bg {
            background-color: orange;
        }
    </style>

    <div class="jm">橘猫吃不胖</div>
    <script>
        $(function () {
            $(".jm").addClass("bg");
        })
    </script>

2.1 判断类

函数名	hasClass(class)
作用	判断包装集中是否至少有一个元素应用了指定的css类
返回值	boolean
参数	class：要判断的类名

示例：判断div标签中是否含有bg类

    <style>
        .bg {
            background-color: orange;
        }
    </style>

    <div class="jm">橘猫吃不胖</div>
    <script>
        $(function () {
            console.log($(".jm").hasClass("bg"));
        })
    </script>

div标签中不含有类bg，因此上面代码中终端的返回结果是：false。

2.3 移除类

函数名	removeClass([classes])
作用	从所有匹配的元素中删除全部或者指定的类
返回值	Object
参数	[classes]：要删除的类，该值可以为空。当该值为空时，表示删除了所有的类；当该值不为空时，表示删除指定的类。

示例：删除div标签中的bg类。

    <style>
        .bg {
            background-color: orange;
        }
    </style>

    <div class="jm bg">橘猫吃不胖</div>
    <script>
        $(function () {
            $(".jm").removeClass("bg");
        })
    </script>

页面上面div标签没有变成橙色背景，因此bg类被移除了。

2.4 交替类

函数名	toggleClass(class)
作用	如果存在（不存在）就删除（添加）一个类
返回值	Object
参数	class：要进行交替的类

函数名	toggleClass(class,switch)
作用	当switch是true时添加类，当为false时删除类
返回值	Object
参数	class：要交替的类 switch：一个可以得出确切结果的条件，可以用来控制交替次数

上面的方法都可以交替类，下面用两个实例来展示效果：

示例1：点击按钮，让div标签的背景出现，再点击按钮，取消背景色。

    <style>
        .bg {
            background-color: orange;
        }
    </style>

    <div>橘猫吃不胖</div>
    <button>交替</button>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").toggleClass("bg");
            })
        })
    </script>

当未点击交替按钮时效果如下：

点击按钮后，效果如下：

示例2：每点击3次按钮，显示div标签背景颜色。

    <style>
        .bg {
            background-color: orange;
        }
    </style>

    <div>橘猫吃不胖</div>
    <button>交替</button>
    <script>
        $(function () {
            let count = 0;
            $("button").click(function () {
                $("div").toggleClass("bg", ++count % 3 == 0);
            })
        })
    </script>

当没有点击按钮时，效果如下：

点击按钮3次时，点击第3次时，显示div标签的背景颜色，效果如下：

3 操作CSS

3.1 操作CSS样式

名称	说明
css(name)	访问第一个匹配元素的样式属性
css(properties)	把一个“键/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配元素的元素上设置大量样式属性的最佳方式。
css(name,value)	在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值。

示例：获取div标签字体的颜色

    <div style="color: orange;">橘猫吃不胖</div>
    <script>
        $(function () {
            let c = $("div").css("color");
            console.log(c);
        })
    </script>

示例：将div标签的字体颜色设置为红色，背景设置为粉色。

    <div>橘猫吃不胖</div>
    <script>
        $(function () {
            $("div").css({ "color": "red", "backgroundColor": "pink" });
        })
    </script>

示例：将所有的p标签字体设置为蓝色。

    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <div>举头望明月</div>
    <p>低头思故乡</p>
    <script>
        $(function () {
            $("p").css("color", "blue");
        })
    </script>

由于第三句为div，因此字体颜色不改变。

3.2 操作宽和高

名称	说明
height()	取得第一个匹配元素当前计算的高度值（px）。
height(val)	为每个匹配的元素设置CSS高度（height）属性的值，如果没有明确指定单位（如：em或%），使用px。
width()	取得第一个匹配元素当前计算的宽度（px）。
width(val)	为每个匹配的元素设置CSS宽度（width）属性的值。如果没有明确指定单位（如：em或%），使用px。

示例1：获取p标签的长度和宽度

    <p>橘猫吃不胖</p>
    <script>
        $(function () {
            console.log("高度为：", $("p").height());
            console.log("宽度为：", $("p").width());
        })
    </script>

示例2：为div元素设置宽高（100px）和背景色

    <div></div>
    <script>
        $(function () {
            $("div").width(100);
            $("div").height(100);
            $("div").css("backgroundColor", "red");
        })
    </script>

4 操作页面内容

4.1 操作HTML代码

所谓HTML代码就是之前经常见到的被“<”和“>”包含起来的标签元素。

jQuery中的函数html()和html(val)分别用来获取以及设置指定页面元素的HTML代码。

这里的HTML代码是一种泛指，它不能处理XML文档，但是对XHTML的各种标签支持良好。

函数名	html()
作用	取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回值	String

示例：获取页面中p标签的内容

    <p>橘猫吃不胖</p>
    <script>
        $(function () {
            console.log($("p").html());
        })
    </script>

函数名	html(val)
作用	设置第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回值	String
参数	val：要给元素添加的内容

示例：给页面中的div元素添加“橘猫吃不胖”

    <div></div>
    <script>
        $(function () {
            $("div").html("橘猫吃不胖");
        })
    </script>

4.2 操作文本内容

除了可以直接操作HTML代码之外，jQuery还提供了一种可以直接操作指定元素标签内文本内容的函数，即text()以及text(val)函数。

函数名	text()
作用	取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效
返回值	String

示例1：匹配所有p标签的内容。

    <p>Hello</p>
    <div>world</div>
    <p>!</p>
    <script>
        $(function () {
            console.log($("p").text());
        })
    </script>

函数名	text(val)
作用	设置所有匹配元素的文本内容。
返回值	String
参数	val：设置元素内容的文本

示例2：为p标签重新设置元素内容。

    <p>Hello world</p>
    <script>
        $(function () {
            $("p").text("橘猫吃不胖");
        })
    </script>

4.3 操作值

表单元素如文本输入框、多选框等都比较特殊，jQuery还针对这些元素提供了一些特殊的操作函数。val()以及val(val)函数就是其中的两个用来操作元素值的函数。

函数名	val()
作用	获得第一个匹配元素的当前值
返回值	String, Array

示例1：点击按钮获取input输入框中的值。

    <input type="text">
    <button>获取</button>
    <script>
        $(function () {
            $("button").click(function () {
                console.log($("input").val());
            })
        })
    </script>

函数名	val(value)
作用	设置每一个匹配元素的值
返回值	jQuery
参数	value：要设置的值

示例2：给input输入框中添加"hello world"值。

    <input type="text">
    <script>
        $(function () {
            $("input").val("hello world");
        })
    </script>

5 查找与筛选元素

5.1 过滤（Filtering）函数

名称	说明
eq(index)	获取第N个元素
filter(expr)	筛选出与指定表达式匹配的元素集合
filter(fn)	筛选出与指定函数返回值匹配的元素集合。这个函数内部将对每个对象计算一次，如果调用的函数返回false，则这个元素被删除，否则就会保留
is(expr)	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false，filter内部实际也是在调用这个函数，所以filter()函数原有的规则在这里也适用。
map(callback)	将一组元素转换成其他数组（不论是否元素数组），可以用这个函数来建立一个列表，不论是值、属性函数CSS样式，或者其他特别形式，都可以建立。
not(expr)	删除与指定表达式匹配的元素
slice(start,end)	选取一个匹配的子集

5.2 查找（Finding）函数

名称	说明
add(expr)	把与表达式匹配的元素添加到jQuery对象中，这个函数可以用于连接分别与两个表达式匹配的元素结果集。
children([expr])	取得一个包含匹配的元素集合中每一个元素的所有的子元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
closest([expr])	取得与表达式匹配的最新的父元素
contents()	查找匹配元素内所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
find(expr)	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1 -3的选择器语法来写。
next([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素(可以使用nextll)。 可以用一个可选的表达式进行筛选。
nextAll([expr])	查找当前元素之后所有的同辈元素。可以用表达式来过滤。
offsetParent()	返回第一个有定位的父类
parent([expr])	取得一个包含着所有匹配元素的唯一父元素的元素集合。可以使用可选的表达式来筛选。
parents([expr])	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
prev([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选，只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
prevAll([expr])	查找当前元素之前所有的同辈元素。
siblings([expr])	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

5.3 链式操作

“链式操作”是jQuery语法中最有特色的一个功能之一。简单地说，“链式操作”就是把之前需要分很多行书写的代码使用“.”连接成一行进行书写。这在很大程度上能够节省网站需要加载的代码量，同时也使对元素的各种操作更加集中。

其缺点就是由于链式操作所必需的连贯性，可能导致代码的可读性有所降低。

jQuery的链接操作如果使用得当，可以极大的提高编写jQuery代码的效率。

名称	说明
andSelf()	加入先前所选的加入当前元素中。
end()	回到最近的一个“破坏性”操作之前。即，将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。