jQuery方法学习小结

---

获取和设置所选HTML元素的内容和属性

text() 设置或返回所选元素的文本内容。
html() 设置或返回所选元素的内容（包括HTML标签）。
val() 设置或返回表单字段的值。
removeAttr() 删除指定的属性。
attr()设置或返回属性的值。
attr() 方法还允许我们通过第二个参数来给属性设置一个值:

$(function() {  $("a").attr("href", "https://www.jquery.com"); });

---

向所选元素添加新内容而不删除现有内容的方法

append() 在所选元素的末尾插入内容。
prepend() 在所选元素的开头插入内容。
after() 插入所选元素后的内容。
before() 在所选元素之前插入内容。

---

操作CSS：

添加CSS

addClass() 方法为选定的元素添加一个或多个类。

要在 addClass() 方法中指定多个类, 只需使用空格分隔它们。 例如

$("div").addClass("class1 class2 class3")

删除CSS

removeClass() 方法从所选元素中删除一个或多个类名。

切换CSS

toggleClass() 方法从所选的元素添加/删除类之间切换，这意味着如果元素指定的类存在，则它将被删除，如果不存在，则会被添加。

CSS()多属性设置

$("p").css({"color": "red", "font-size": "200%"});

---

操作DOM：

DOM遍历

parent()方法返回所选元素的直接父元素。
要获取所选元素的所有祖先，可以使用parents()方法。
eq() 方法可用于从多个选定元素中选择特定元素。
索引号从0开始，所以第一个元素的索引号为0。

删除元素

使用remove()方法从DOM中删除选定的元素及其子元素。
empty()方法用于删除所选元素的子元素。

---

事件处理函数：

鼠标事件：

click:单击时发生。
dblclick:双击元素时触发。
mouseenter:当鼠标指针进入所选元素时触发。
mouseleave:鼠标指针离开所选元素时触发。
mouseover:当鼠标指针在所选元素上方悬停时触发。

键盘事件：

keydown:当按下键盘按键时会触发。
keyup:当键盘按键被释放时会触发。

表单事件：

submit:提交表单时触发。
change:当表单元素的值发生改变时触发。
focus:当表单元素获得焦点时触发。
blur:当表单元素失去焦点时触发。

文件事件：

ready:当DOM加载完成以后触发。
resize:当浏览器窗口大小改变时触发。
scroll:当用户在指定的元素中滚动滚动条时触发。

---

在jQuery中处理事件的另一种方法是使用`on()`方法。 `on()`方法用于**将相同的处理函数绑定到多个事件中的时候**很有用。 你可以使用**空格分隔**多个事件名称, 例如 你可以为**点击**和`dblclick`事件使用相同的事件处理程序。

$("p").on( "click dblclick", function() {
  alert("clicked");
});

off()解除事件绑定

$("div").on("click", function() { 
  alert('Hi there!'); 
}); 
$("div").off("click");

off()方法的参数是要删除的事件名称。

每个事件处理函数都可以接收一个事件对象，其中包含与该事件相关的属性和方法：
pageX，pageY 事件发生时相对于页面左上角的鼠标位置（X和Y坐标）。
type 键入事件的类型（例如“点击”）。
which 哪个按钮或键被按下。
data 数据绑定事件时传入的任何数据。
target 定位发起事件的DOM元素。
preventDefault() 阻止事件的默认动作（例如，在链接之后）。
stopPropagation() 停止冒泡到其他元素的事件。

---

JQuery触发事件：

可以使用trigger()方法以编程方式触发事件。
例如，你可以触发一个点击事件，而不需要用户实际点击一个元素：

$("div").click(function() {
   alert("点击了div!");
});
$("div").trigger("click");

trigger()方法不能用来模仿本机浏览器事件，比如点击一个文件文本框。 只能处理jQuery事件系统中的事件。

jQuery有一些易于实现的效果来创建动画

hide()和show()方法用于隐藏和显示所选元素。
toggle()方法用于在隐藏和显示元素之间切换。

hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。
例如，我们为toggle方法传入一个1000毫秒的参数：

$(function() {
  $("p").click(function() {
    $("div").toggle(1000);
  });
});

与 hide / show 方法类似，jQuery提供了 fadeIn / fadeOut 方法，它将一个元素淡入和淡出显示。
和 toggle() 方法在隐藏和显示之间切换一样，fadeToggle()方法可以在淡入淡出中进行切换。
用于淡入/淡出的另一种方法是fadeTo()，它将淡入/淡出到给定的不透明度（0和1之间的值）。 例如：$("div").fadeTo(1500,0.7);

向上/向下滑动

slideUp() 和 slideDown() 方法用于在元素上创建滑动效果。
再次，类似于以前的切换方法，slideToggle() 方法提供在滑动效果之间切换，一样也有两个可选参数：速度和回调函数。

动画

animate() 方法允许您将动画设置为设定值或相对于当前值的值。
你需要将CSS属性定义为JSON格式的参数（"key":"value"）。
第二个参数定义了动画的速度。
例如，以下代码将div的width属性在1秒内改变到250px：

$("div").click(function() {
  $("div").animate({width: '250px'}, 1000);
});

你可以使用上述语法对任何CSS属性进行动画处理，
但有一个重要的事情要记住：当与animate() 方法一起使用时，
所有属性名称都必须是camel-cased（camelCase是写复合词或短语的做法，
每个单词或缩写以大写字母开头，第一个单词以小写形式显示）。
您将需要编写paddingLeft而不是padding-left ; marginRight，而不是margin-right等等。

多个动画设置

多个属性可以通过用逗号分隔来同时动画化。
例如：

$("div").animate({
  width: '250px',
  height: '250px'
}, 1000);

也可以定义相对值（该值相对于元素的当前值）。 通过将 += 或 -= 放在值的前面完成：

$("div").animate({
  width: '+=250px',
  height: '+=250px'
}, 1000);

要在动画完成之前停止动画，jQuery提供了stop()方法。

动画队列

默认情况下，jQuery带有动画的队列功能。
这意味着如果你写了多个animate()，则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。

var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});

记住，要操纵元素的位置，你需要将元素的CSS位置属性设置为 relative，fixed 或 absolute。
animate() 方法，就像 hide / show / fade / slide 方法一样，可以使用可选的回调函数作为其参数，该参数在当前效果完成后执行。

下拉式菜单

$("#item").click(function() {
  $("#submenu").slideToggle(500);
});