jQuery——进阶(动画、循环、正则、事件冒泡、事件委托、DOM)

---

特殊动画效果

1.淡入淡出：
fadeIn()：淡入
fadeOut()：淡出
fadeToggle()：切换淡入淡出

2.显示隐藏：
show()：显示
hide()：隐藏
toggle()：切换显示隐藏

3.下拉收起：
slideDown()：下拉显示
slideUp()：收起隐藏
slideToggle()：切换下拉收起

4.自定动画：
animate(参数1,参数2,参数3,参数4)
参数1[必选]：需要设置的样式
参数2：动画执行时间(单位ms)
参数3：动作方式(swing、linear)
参数4：回调函数

单标签操作

1.获取input里的值：
(1)元素.prop(‘value’)
(2)元素.val()

2.获取自定义属性的值(不分单双)：
元素.attr(‘属性’)

链式调用

jQuery对象的方法执行后会返回这个对象，所以可以将方法连在一起写。
例：

$(this).next().slideToggle().parent().siblings().children("ul").slideUp();

循环遍历

1.遍历标签：
标签.each(function(){
console.log($(this).html());
})

2.遍历数组：
arry.forEach(function(element){
console.log(element);
})

正则表达式

1.写法：
var re=new RegExp(‘规则’, ‘可选参数’);
var re=/规则/参数;
验证：re.test() 返回一个布尔值

2.参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感

事件冒泡

子类发生的事件会传递到父类。
阻止事件冒泡方法：
1.event.stopPropagation()
2.return false

事件委托

子元素的操作委托给父类，可以减少资源的消耗。
方法：
⽗元素.delegate(“⼦元素”,”事件”,function(){})

创建标签

var span = $(“我是一个孤独的span”);// 创建标签,带内容
var span2 = “我是一个孤独的span”;
console.log(typeof span);// object,可以灵活的操作样式,属性,等等内容
console.log(typeof span2);// string

dom操作

操作	描述
append/appendTo	在元素内部后添加/添加到元素内部后
prepend/prependTo	在元素内部前添加/添加到元素内部前
after/insertAfter	在元素外部后添加/添加到元素外部后
before/insertBefore	在元素外部前添加/添加到元素外部前
remove	删除元素