一、在jQuery中，对元素的操作包括3个方面：
（1）属性操作；
（2）内容操作；
（3）样式操作；
一、属性操作
（1）获取元素属性；
{
$().attr("属性名");
}
（2）设置元素属性；
{
$().attr("属性","属性值");
}
（3）删除元素属性；
{
$().removeAttr("属性");
}
//区分attr()与prop()方法，attr()方法是用来操作标签所固有的属性
prop()方法用来操作用户自定义类型，removeAttr(),removeProp()同理
二、内容操作
//关于元素内容操作共有2组方法：
（1）html()和text();
{
1>html()
用html()方法来获取和设置某个元素中的“HTML内容”。
$().html() //获取HTML内容
$().html("HTML内容"); //设置HTML内容
//html()方法跟JavaScript中的innerHTML()是一样的效果，只不过html()是jQuery的实现方式，innerHTML()是JavaScript的实现方式。
//设置html内容的时候会覆盖原来的html内容
//例：
$("#p2").html("<strong>jQuery入门教程</strong>");
//此时显示的是加粗的 jQuery入门教程
2>text()
使用text()方法来获取和设置某个元素的“文本内容”。
$().text() //获取文本内容
$().text("文本内容") //设置文本内容
//text()方法跟JavaScript中的innerText是一样的效果，只不过text()是jQuery的实现方式，innerText是JavaScript的实现方式。
//设置text内容的时候会覆盖原来的text内容
//例：
$("#p2").text("<strong>jQuery入门教程</strong>");
//此时显示的是 <strong>jQuery入门教程</strong>
//区分：
获取：
html会获取到标签及其中的文本，text只会获取到其中的文本
设置：
html会将标签翻译，text只是将其中的内容当成纯文本，而不翻译
}
（2）val();
{
表单元素的值都是通过表单元素的value属性来传递的
$().val() //获取表单元素
$().val("表单元素的值") //设置表单元素
//表单元素：
<input>、<textarea>、<select>和<option>，其中<select>和<option>是配合使用的。
//例：
$("#txt2").val("jQuery入门教程");
}
//其中html()和text()用于操作普通标签，而val()用于操作表单标签。
样式操作（一）
三、CSS属性操作
（1）CSS属性操作；
{
$().css("属性")//获取CSS属性值
$().css("属性","属性值")//设置单个CSS属性值
$().css({"属性1":"属性值1","属性2":"属性值2",……})//设置多个CSS属性值
//例：$("ul li:nth-child(odd)").css("color","red");
//在CSS中没有设置的属性，同样可以设置，也就是说这个属性操作是获取、设置和更改
}
（2）CSS类名操作；
{
//所谓的“CSS类名操作”类名操作其实就是为元素添加某个类名、删除某个类名、切换某个类名。
1>添加类名
$().addClass("类名")
2>删除类名
$().removeClass("类名")
3>切换类名
$().toggleClass("类名")
//toggleClass()方法用于检查元素是否具有某个类名。如果类名不存在，则为该元素添加类名；如果类名已存在，则为该元素删除类名。
//相当于某一个样式的有与无，两种状态
//区分：
$(selector).toggle(speed,callback,switch)
{
//如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
speed:可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。
speed可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
//在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch 参数。
callback:可选，toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
switch:可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
True - 显示所有元素
False - 隐藏所有元素
如果设置此参数，则无法使用 speed 和 callback 参数。
}
$(selector).slideToggle(speed,callback)
{
//slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
speed:可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
//在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback:可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
}
}
(3)获得和设置宽度和高度
{
方法一：
//获得高度的方法可以用第一种获得css属性的方法
即：$().css("width");$().css("height")
方法二：
//以下是jQuery提供的简单的方法：
（1）$().width();$().height()
{
//获得的是元素的内容宽度和高度
}
（2）$().innerWidth();$().innerHeight();
{
//获得的是元素的内容宽度(高度)+padding
}
（3）$().outerWidth();$().outerHeight()
{
//获得的是元素的内容宽度(高度)+padding+border
}
//注意一点，只有$().width()，$().height()方法可以用于window或document对象。
//对$().width();$().height()
{
$().width();$().height() //获取元素的宽度(高度)，返回值是一个数值不带单位
$().width(n) 或 $().width("n") 或 $().width("npx") //设置元素的宽度，n是一个整数，表示npx
}
//对$().css("width");$().css("height");
{
$().css("width");//获取元素的宽度，返回值是npx,带单位
$().css("width","npx");或$().css("width","n")或$().css("width",n)//设置元素的值，n是一个整数
}
}
//高度和宽度的操作完全一样
样式操作（二）
四、获取元素位置
获取元素的位置，有2种方法：
（1）$().offset()；//相对于浏览器窗口
{
//可以使用offset()方法用于“获取”或“设置”元素相对于“当前文档”（也就是 浏览器窗口 ）的偏移距离。
//也就是说这个数据是实时的，是元素相对于当前浏览器窗口的位置
$().offset()
//返回的是一个坐标对象，该对象有2个属性：top和left。
分别获得：
$().offset().top;
$().offset().left;
//返回值都是数字，不带单位
//更改元素位置：
$(selector).offset({top:value,left:value});
或
$().css("position","absolute");
$().css({"top":"value","left":"value"});//传入的是一个json对象
//在设置这些样式的时候，是类似于json数组的，即前面的键名是可以不带双引号的，但是后面的值必须得带双引号，当然当值为纯数字的时候就可以不带双引号，例：$().css("top",50);或$().css("top","50px");
}
（2）$().position()；//相对于祖辈定位元素
{
//可以使用position()方法来“获取”或“设置”当前元素相对于“其被定位的祖辈元素”的偏移距离。
$().position()//返回的是一个坐标对象，该对象有2个属性：top和left。
分别获取：
$().position().top//表示元素相对于被定位的祖辈元素的顶部的垂直距离。
$().position().left//表示元素相对于被定位的祖辈元素的左部的水平距离。
//以上方法获得的都是数字，不带单位
//注意，以上方法，用在已被定位的元素（当前元素）相对于其父级上已被定为的元素的距离，即当前元素中的left,top值。如果当前元素不是被定位的元素，则会出现错误，错误原因，本人道行尚浅。。。
}
样式操作（三）
五、获取滚动条位置
//可以使用scrollTop()来获取或设置元素相对于垂直滚动条顶部的距离，可以使用scrollLeft()来获取或设置元素相对于水平滚动条左部的距离。
$().scrollTop() //获取滚动距离（垂直）
$().scrollTop(value) //设置滚动距离（垂直）
$().scrollLeft() //获取滚动距离（水平）
$().scrollLeft(value) //设置滚动距离（水平）
//value是一个数字
例：
$(window).scroll(function () {
//当滚动条距离大于box2距离顶部的距离时，设置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//当滚动条距离小于于box2距离顶部的距离时，设置相对定位
else {
$("#box2").css({ "position": "relative" });
}
});
//如何理解滚动条距离：
即在一开始滚动条不动的时候$().scrollTop()是零
现在存在一个div高度是1000px;但是窗口只有400px;在一开始的时候$().scrollTop()是零，后来滚动条向下滚动，相当于div相对于窗口向上移动，这时div在窗口上方不可见的部分就是滚动条已滚动的距离，即$().scrollTop()。就是窗口的顶端相对于滚动开始位置之间的距离。
//如果要设置“回到顶部”这个功能：只需要这样设置$().scrollTop(0)