JQuery（二）：DOM操作、动画、遍历、事件绑定
1.DOM操作
1.1内容操作
1.2属性操作
①通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
获取属性
- 北京
- 天津
* attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr
②对class属性操作
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
* toggleClass("one"):
* 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
4. css():
样式操作
id为one
id为two class是 mini
class是 mini
class是 one
class是 mini
class是 mini
class是 one
class是 mini01
class是 mini
span
1.3CRUD操作
1. append():父元素将子元素追加到末尾
对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头 5. after():添加元素到元素后边
对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系 9. remove():移除元素
对象.remove():将对象删除掉
10. empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
2.JQuery中的动画
三种方式显示和隐藏元素：
参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
swing：动画执行时效果是 先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。
2.1默认显示和隐藏方式
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
2.2 滑动显示和隐藏方式
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
2.3淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
示例：
Insert title here
div显示和隐藏
3.遍历
js的遍历
for(初始化值;循环结束条件;步长)
JQuery的遍历
①jq对象.each(callback)
1. 语法：
jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象this：集合中的每一个元素对象
2. 回调函数返回值：
true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
示例：
$(function () {
citys.each(function (index,element) {
//1 获取li对象 第一种方式 this
//alert(this.innerHTML);
//alert($(this).html());
//2 获取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）
alert(index+":"+element.innerHTML);
alert(index+":"+$(element).html());
//判断如果是上海，则结束循环
if("上海" == $(element).html()){
//如果当前function返回为false，则结束循环(break)。
//如果返回为true，则结束本次循环，继续下次循环(continue)
return true;
}
alert(index+":"+$(element).html());
});
});
- 北京
- 上海
- 天津
- 重庆
②$.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
});
- 北京
- 上海
- 天津
- 重庆
③for..of: jquery 3.0 版本之后提供的方式 ：for(元素对象 of 容器对象)
for(li of citys){
alert($(li).html());
}
- 北京
- 上海
- 天津
- 重庆
4.事件绑定
4.1jquery标准的绑定方式
jq对象.事件方法(回调函数)；
注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
例如：表单对象.submit();//让表单提交
4.2on绑定事件/off解除绑定
jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")
如果off方法不传递任何参数，则将组件上的所有事件全部解绑
4.3事件切换：toggle
jq对象.toggle(fn1,fn2...)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
4.4隐藏事件：hide
hide() 方法隐藏被选元素。（与 CSS 属性 display:none 类似。）
隐藏的元素不会被完全显示（不再影响页面的布局）。
语法：$(selector).show(speed,easing,callback)
这是一个段落。
4.5jQuery ready() 方法
当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。如上面的实例所示。
ready() 方法规定当 ready 事件发生时执行的代码。
提示：ready() 方法不应该与
一起使用。语法：
$(document).ready(function)
$(function)----ready() 方法只能用于当前文档，因此无需选择器
这是一个段落 。