在某网课学习前端笔记整理js篇33-jquery第二节

jquery第二节

---

一、数据缓存和节点操作

$el.data()： 把数据存在缓存中。可以获取到dataset的值。

example1

$('div').data('name','box');
console.log($('div').data('name'));

append(child)： 父节点添加子节点。

appendTo(parent)： 子节点添加到父节点。

clone(boolen)： 克隆节点。可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器（false）。

empty()： 移除所有子节点，包括文本节点。

wrapAll(jqNode)： 将jq对象都包在jqNode下。

wrap(jqNode)： 将jq对象都包一个jqNode。

unwrap()： 将j外面的包住的节点移除。

example2

<div>aa</div>
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
<script>
    $('div').append($('<a href="#">bbb</a>'));
    $('<a href="#">ccc</a>').appendTo($('div'));
    $('div').clone().appendTo($('div'));
    $('div:eq(1)').empty();
    $('a').wrap("<div class='wrap'></div>");
    $('a').wrapAll("<div class='wrap2'></div>");
    $('a').unwrap();
</script>

hover(callback1,callback2)： 鼠标移入移出事件。mouseenter ,mouseleave的综合。

example3

// mouseenter  mouseleave
$('#box').hover(function(){
    console.log('enter');
}, function(){
    console.log('leave');
})

二、动画

show()： 显示。

hide()： 隐藏。

fadeOut(speed，callback)： 淡出。speed是时间。

fadeIn(speed,callback)： 淡入。

slideUp(speed,callback)： 向上滑动消失。

slideDown(speed,callback)： 向下滑动出现。

example4

$('.box').hover(function(){
    $(this).slideUp(4000);
}, function(){
    $(this).slideDown('fast');
})

animate(styles,speed,easing,callback)： speed毫秒执行一个动画变成styles样式。

queue(callback)/dequeue(callback)： 当需要动画或者定时器和函数按一定顺序执行会用到，queue会把函数放入队列，dequeue会把队列中shift（从队首）取出一个函数执行。第一次queue会执行函数，但如果你queue了多个函数在队列，下次执行就要dequeue方法来执行了。

stop(boolean1,boolean2)： 第一个为true，会停止队列中的所有队列。第二个为true，会停止正在执行的动画。

注意：当css和animate连写，会先执行css，再执行animate，可以用queue来将css的函数放入。（感觉css是同步的，animate是异步的原因）

example5

$('div').animate({width: 200,height: 200})
                   .animate({left: 100, top: 100})
                   .css('background', 'green');//会先执行css，因为动画是异步的
$(this).animate({width: 200,height: 200})
                   .animate({left: 100, top: 100})
                   .queue(function(){
                        $(this).css('background', 'green')
                   }).queue(function(){
                        $(this).css('background','blue');
                   }).dequeue();

三、jq事件和自定义jq方法

click(callback)： 点击。

on(event,child,param,callback)： 建议使用这种，会监听子元素的事件。

trigger(event)： 触发事件。

triggerHandler(event)： 触发jq对象的第一个元素的事件。

example6

$('p').triggerHandler('click');
$('p').trigger('click').css('color', 'red');
$('.list').on('click', 'li', function(){
	alert($(this).text());
})

四、jq自定义方法

$.extend(obj)： 为扩展属性或方法。

example7

// 给 $ 自定义方法
$.extend({
    say: function(){
        alert(1)
    }
});
$.say();//弹出1

$.fn.extend(obj)： 为jquery对象扩展属性或方法。

example8

<div class="xq">hahah</div>
<script>
	// 给 jq对象(通过获取的jq对象)扩展属性或者方法
    $.fn.extend({
        xq: function(){
            this.click(function(){
                alert($(this).text());
            })
        }
    });
    $('.xq').xq();//点击xq div会弹出hahah
</script>