jQuery常见方法

原生JS、jQuery和Vue.js的区别

1. jQuery只是对原生js的API选择器等等进行了封装，便于操作DOM，本质还是操作DOM实现逻辑，数据和界面还是连在一起的。
2. vue.js:MVVM模型，将数据层和视图层完全分离开，不仅对API进行封装，还提供了一系列的解决方案。数据驱动，主要操作数据而不是DOM。

jQuery常用方法

jQuery入口函数

作用:等待文档中的标签加载完毕(不等待内容加载完毕),然后再执行入口函数中的代码
语法:
`$(document).ready(function(){});`完整写法
`$(function(){});`简写

DOM入口函数

作用:等待文档中的标签和内容加载完毕,然后再执行入口函数中的代码
语法:`window.onload=function(){}`

区别

	1.jQuery入口函数早于DOM入口函数执行
	2.一个HTML文档中,最多只有一个DOM入口函数(后加的覆盖前边的),可以有多个jQuery入口函数

jQuery对象和DOM对象的相互转化

	jQuery对象转换为DOM对象:jQuery对象[下标];
	DOM对象转换为jQuery对象:$(DOM对象);

选择器

	$('css选择器').css('属性','属性值');
	$('标签名 :eq(index)').css('属性','属性值');选择容器中下标为number的元素;
	$('标签名 子代标签:odd|even').css('属性','属性值');选择容器中下标为奇数(偶数)的元素;
	$('标签名 子代标签:gt(index)|lt(index)').css('属性','属性值');选择容器中下标大于(小于)index的元素;

		//获取表单元素:
		$(':input').css('background', 'red');
        $(':text').css('background', 'red');
        $(':password').css('background', 'red');
        console.log($(':radio'));
        console.log($(':checkbox'));
        console.log($(':submit'));
        console.log($(':reset'));
        console.log($(':button'));
        console.log($(':checked'))
        console.log($(':selected').text())

text方法

	作用:获取或者设置jQuery对象中的内容
	格式:jQuery对象.text()或jQuery对象.text(内容);

html方法

	作用:获取或者设置jQuery对象中的内容
	格式:jQuery对象.html()或jQuery对象.html(内容);

区别

1.text返回jQuery对象下所有文本内容拼接的字符串
2.html返回jQuery对象下的文本内容和后代节点
3.设置时,text不解析标签,html解析标签
4.如果jQuery对象有多个元素构成,text在执行时会有隐式迭代,html支取jQuery对象中的第一个元素

val方法

作用:获取或者设置表单元素中的值
格式:表单元素.val()或表单元素.val(值);

attr方法和prop方法

作用:为jQuery对象添加或设置属性
格式:jQuery对象.attr('属性名','属性值')
		jQuery对象.prop('属性名','属性值')
注意:只有属性名时表示获取当前属性,属性名和属性值同时存在表示设置当前属性,prop不支持私有属性的操作.

removeAtt方法和removeProp方法

作用:删除jQuery对象中的属性
格式:jQuery对象.removeAttr('属性名');
		jQuery对象.removeProp('属性名');
区别:removeProp的删除是将指定属性的值设为undefined,不能操作自定义属性,并且一次只能删除一个,否则删除失败,removeAttr如果要删除多个属性,属性名之间用空格隔开.

css方法

作用:获取或设置当前jQuery对象的css样式
格式:jQuery对象.css('属性名','属性值');
注意:当需要同时设置多个属性时,把属性和属性值以键值对的形式存放在对象中.
格式:jQuery对象.css({属性:'属性值',属性:'属性值'...})

addClass,removeClass和toggleClass

addClass:添加类名
格式:jQuery对象.addClass('类名1 类名2...')

removeClass:删除类名
格式:jQuery对象.removeClass('类名1 类名2...')

toggleClass:删除或添加类名
格式:jQuery对象.toggleClass('类名1')
注:当该对象存在该类名时,操作内容为删除,否则为添加

获取尺寸

jQuery对象.width()
jQuery对象.height()
获取当前对象的宽高,不受其他因素影响

jQuery对象.innerwidth()
jQuery对象.innerheight()
获取当前对象的宽高,受内边距的影响

jQuery对象.outerwidth()
jQuery对象.outerheight()
获取当前对象的宽高,受内边距和边框的影响

scroll滚轮事件

 $(window).scroll(function() {
            console.log($(window).scrollTop());//jQuery中已经解决IE低版本的不兼容问题
        });

创建jQuery对象

// 格式1：$('<开始标签名称>')
        var $div = $('<div>');
        console.log($div);

        // 格式2：$('<开始标签>内容</结束标签>')
        var $div = $('<div>hello</div>');
        console.log($div);

        // 格式3：$('<开始标签 属性名称="属性值" 属性名称="属性值"...>内容</结束标签>');
        var $div = $('<div id="box" class="sty" title="ok">hello</div>');
        console.log($div);

内部追加jQuery对象

append方法和appendTo方法
        1.作用：将jQuery对象以尾部追加的方式添加到容器内部
        2.格式：
            1)容器.append(被添加的jQuery对象或标签形成的字符串);
            2)被添加对象.appendTo(代表容器的jQuery对象或选择器);
            
 prepend方法和prependTo方法
        1.作用：将jQuery对象添加到容器的前端
        2.格式：
            1)容器.prepend(被添加的jQuery对象或标签形成的字符串);
            2)被添加对象.prependTo(代表容器的jQuery对象或选择器);         

外部追加

after方法、insertAfter方法
        1.作用：在目标元素的后面插入新的jQuery对象
        2.格式：
            1)目标元素.after(要插入的新的jQuery对象)
            2)要插入的新的jQuery.insertAfter(目标元素)
            
before方法、insertBefore方法
        1.作用：在目标元素的前面插入新的jQuery对象
        2.格式：
            1)目标元素.before(要插入的新的jQuery对象)
            2)要插入的新的jQuery.insertbefore(目标元素)
如果要操作的节点是页面中已有的，那么append、appendTo、prepend、prependTo、after、before、insertAfter、insertBefore方法具有移动节点的功能

删除元素

empty方法
	1.作用：清空某个容器下面的所有的内容
    2.格式：容器.empty();
    
remove方法
        1.作用：删除页面中的某个jQuery对象
        2.格式：要被删除的jQuery对象.remove('选择器');
        3.注意：如果被删除的元素身上有事件，那么事件会被删除

// $('ul').empty();
        $('#box').remove();// 表示删除id为box的li

        $('li').remove('#box');//表示删除带有id=box的li

clone方法

1.作用：克隆页面中的元素
2.格式：要被克隆的元素.clone(true/false);false为默认值，表示不克隆元素的事件
3.返回值：被克隆出来的节点

$('div')
            .click(function() {
                console.log('helloworld');
            })
            .clone(true)
            .appendTo('body')
            .html('我是被克隆出来的div');

获取祖先元素

<body>
    <div id="red">
        <div id="green">
            <div id="blue"></div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        console.log($('#blue').parent())//返回父节点
        console.log($('#blue').parents())//返回所有的祖先节点
        console.log($('#blue').parentsUntil('#red'));//获取到#red之前的所有的祖先节点，不包含red
    </script>

获取后代元素

children()：返回被选元素的所有直接子元素。
find()：返回被选元素的后代元素，一路向下直到最后一个后代。
find(‘选择器’)里面一定要加参数

 $('div span').css('background', 'red');
 $('div').find('span').css('background', 'blue');

获取兄弟元素

<body>
    <ul>
        <li>我是第1个li</li>
        <li id="li2">我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li id="li5">我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li id="li9">我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#li5').siblings().css('background', 'red');//获取所有的兄弟元素

        $('#li5').next().css('background', 'blue');//获取后一个兄弟元素
        $('#li5').nextAll().css('background', 'blue');//获取后面所有的兄弟元素
        $('#li5').nextUntil('#li9').css('background', 'blue');//获取到第9个li为止的兄弟元素

        $('#li5').prev().css('background', 'pink');
        $('#li5').prevAll().css('background', 'pink');
        $('#li5').prevUntil('#li2').css('background', 'pink');
    </script>

jQuery对象的过滤

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li id="box">我是第3个li</li>
        <li>我是第4个li</li>
        <li class="sty">我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li class="sty">我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('li')
            .first() //从jQuery对象集合中过滤出第一个jQuery对象
            .css('background', 'red');



        $('li')
            .last()//从jQuery对象集合中过滤出最后一个jQuery对象
            .css('background', 'blue');


        $('li')
            .eq(2)  //从jQuery对象集合中过滤出指定下标的jQuery对象
            .css('color', '#0f0');
        
//filter方法:过滤出匹配指定选择器的jQuery对象，选择器之间用逗号分隔,还用于数组的过滤
        $('li')
            .filter('#box,.sty')
            .css('font-size', '100px')
    </script>

addBack方法和end方法

    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li id="box">我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        /* addBack方法
            1.作用：将目标元素添加到jQuery对象集合中
            2.示例：$('#box').nextAll().addBack()
        */
        // $('#box').nextAll().addBack().css('background', 'red');


        /* 
            end方法
            1.作用：返回链式结构被破坏之前的那个jQuery对象
            2.示例：$('#box').next().end()
        */
        // $('#box').next().end().css('background', 'red');
    </script>

添加事件的几种方式

        /* 
            格式：
            jQuery对象.事件名称(数据，function() {
                //事件被触发时的操作
            });
            注意：如果同一元素被添加了多个相同的事件，事件不会覆盖
        */

        $('div').click({a:1, b:2}, function(e) {
            console.log(e.data);
        });
        $('div').click(function() {
            console.log('222');
        });

       /* 
            bind方法
            1.格式(绑定一个事件)：jQuery对象.bind('事件名称', function() {
                // 事件触发时要执行的操作
            });
            2.格式(绑定多个事件，对应操作相同)：jQuery对象.bind('事件名称1 事件名称2 事件名称3...', function() {
                // 事件触发时要执行的操作
            });
            3.格式(绑定多个事件，对应操作不相同)：jQuery对象.bind({
                事件名称: function() {},
                事件名称: function() {}
            });
            4.格式(在为元素绑定事件的时候，给它传递数据)：jQuery对象.bind('事件名称', 数据, function() {})。如果要在事件处理函数中获取到传递过来的数据，可以使用事件对象的data属性来获取
         */    
        $('div').bind('click', {a:1, b:2, c:3}, function(e) {
            $(this).html(e.data.a)
        });

  /* 
            delegate方法：注意，该方法在为元素绑定事件的时候只能用事件委托的形式来绑定
            1.格式：祖先元素.delegate(后代元素，事件名称，数据，function() {
                // 事件被触发时要执行的操作
            })
        */

 /* 
            on方法
            1.格式1：jQuery对象.on('事件名称', function() {});
            2.格式2：jQuery对象.on('事件名称1 事件名称2 事件名称3', function() {});
            3.格式3：jQuery对象.on({
                事件名称1: function() {},
                事件名称2: function() {}
            });
            4.格式4：jQuery对象.on('事件名称', '后代元素', 数据, function() {});
        */

 /* 
            hover方法
            1.作用：为元素添加移入和移出事件
            2.格式：jQuery对象.hover(function() {}, function() {});
        */

        $('div').hover(function() {
            console.log('移入事件');
        }, function() {
            console.log('移出事件');
        });

/* 
            one方法
            1.作用：给元素添加一次性事件
            2.格式：jQuery对象.one('事件名称', function() {});
        */

        $('div').one('click', function() {
            console.log('我是一次性事件');
        });

事件的删除

		unbind方法
        1.作用：删除jQuery对象身上的事件
        2.格式1(表示删除所有事件)：jQuery对象.unbind();
        2.格式2(删除指定的事件)：jQuery对象.unbind('事件名称');
        undelegate方法
        1.作用:删除通过delegate方法绑定的事件
        off方法
        格式1(表示删除所有事件)：jQuery对象.off();
        格式2(删除指定的事件)：jQuery对象.off('事件名称');

内置动画

		hide：隐藏动画，格式：jquery对象.hide(动画执行所需时间【毫秒值】, function() {})
        show：显示动画，格式：jquery对象.show(动画执行所需时间【毫秒值】, function() {})
        toggle：显示/隐藏动画，格式：jquery对象.hide(动画执行所需时间【毫秒值】, function() {})
        
        向上滑动display:none,向下滑动display:block
        jquery对象.slideDown(动画执行所需时间【毫秒值】, function() {})
        jquery对象.slideUp(动画执行所需时间【毫秒值】, function() {})
        jquery对象.slideToggle(动画执行所需时间【毫秒值】, function() {})
        
        jquery对象.fadeIn(动画执行所需时间【毫秒值】, function() {})
        jquery对象.fadeOut(动画执行所需时间【毫秒值】, function() {})//display:none
        jquery对象.fadeTo方法：该方法的作用是，将元素的透明度逐渐改变到指定的值，注意，即使透明度为0，那么元素也是占位的，因为元素并没有被设置display：none

自定义动画

         animate方法
        1.作用：jQuery中用来创建自定义动画的方法
        2.格式：jQuery对象.animate(参数1，参数2，参数3，参数4);
        3.参数说明
        参数1：该参数通常是一个对象，里面一键值对的形式封装了要达到的CSS样式，注意：animate的修改样式时只对属性值中包含数值的样式敏感，属性值可以不带单位
        参数2：动画执行所需时间，单位为毫秒，该参数也可以是字符串，如fast（200毫秒）、normal（默认，400毫秒）、slow（600毫秒），如果是任意的字符串，如‘abc’表示normal
        参数3：动画在执行时的状态（即是匀速的，还是慢-快-慢），只支持两个值linear、swing(默认)
        参数4：回调函数，动画执行完毕后执行该回调函数

stop方法

        1.作用：停止动画
        2.格式：jQuery对象.stop(参数1，参数2);
        3.参数说明
            参数1：值为布尔值，默认为false（结束当前动画，执行下一次动画），如果为true（结束当前，清空动画队列，即删除剩余的动画） 
            参数2：值为布尔值，默认为false（当前动画没有完成，开始执行下一次动画），如果设置成true，表示立即完成当前动画，并完成队列（即完成其它动画）【对当前动画如何处理，是没完成还是立即完成】

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #btns {
            width: 200px;
            height: 100px;
            position: fixed;
            right: 200px;
            top: 50px;
        }
        button {
            padding: 10px;
        }
        #content {
            width: 200px;
            height: 200px;
            background-color: deeppink;
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="btns">
        <button>animate方法</button>
        <button>stop方法</button>
    </div>
    <div id="content"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('button')
            .first()
            .click(function() {
                $('#content')
                    .animate({top: 400}, 5000)
                    .animate({left: 500}, 5000)
                    .animate({top: 0}, 5000)
                    .animate({left: 0}, 5000)
            });
            $('button')
            .last()
            .click(function() {
                $('#content').stop(false, true);
            });
    </script>

each方法

    1.作用：可以利用each方法对jQuery对象集合中的每个元素做单独的处理
    2.格式：jQuery.each(function(index, ele) {
        在函数内部可以对jQuery对象集合中的每个对象做单独的处理
    })
    3.说明：index表示jQuery对象集合中DOM对象的下标，ele表示该集合中的DOM对象

     <ul>
         <li>我是第1个li</li>
         <li>我是第2个li</li>
         <li>我是第3个li</li>
         <li>我是第4个li</li>
         <li>我是第5个li</li>
         <li>我是第6个li</li>
         <li>我是第7个li</li>
         <li>我是第8个li</li>
         <li>我是第9个li</li>
         <li>我是第10个li</li>
     </ul>


     <script src="jquery-1.12.4.js"></script>
     <script>
        $('li').each(function(index, ele) {
            var red = parseInt(Math.random() * 256);
            var green = parseInt(Math.random() * 256);
            var blue = parseInt(Math.random() * 256);
            var bgColor = `rgb(${red}, ${green}, ${blue})`;

            this.style.backgroundColor = bgColor;
            // $(ele).css('backgroundColor', bgColor)
        });
     </script>

$.each方法

        1.该方法是$的一个静态方法，可以用该方法去处理数组或对象
        2.$.each(数组/对象，function() {})

 var arr = [10, 20, 30, 40, 50];
        var obj = {
            a: 1,
            b: 2,
            c: 3
        };

        $.each(obj, function(index, val) {
            console.log(index + '....' + val);
        });