day 030 JQuery入门

今天是JQuery的入门，主要内容有JQuery的加载，JQuery选择器，JQuery的样式操作，JQuery的click事件，JQuery动画。

• JQuery是目前使用最广泛的JavaScript函数库
• JQuery,选择某个网页元素，然后对它进行某种操作

JQuery的加载

• JQuery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用
  <script type="text/javascript" src=<js文件路径>></script>

开始使用JQuery

    <script>

        window.onload = function () {
            console.log('onload');
        }

        // 完整ready
        $(document).ready(function () {
            console.log('ready1');
        });

         // 简化eady
        $(function () {
            console.log('ready2');
        })
    </script>

• 注意JQuery函数语句要先于javascript自带的语句执行

JQuery的选择器

• 快速选择元素
• 选择规则和CSS的规则相同
• 可使用length判断是否选择成功

选择器

<script>
        $(function(){
            // 获取到class=’div‘的元素并且打印,使用CSS中类选择器的格式，.<元素类名>，注意要加引号
            var $div = $('.div');
            console.log($div); // n.fn.init(1)(返回JQuery实例对象，对象里的内容是一个div对象)

            // 获取到id =’list‘的元素并且打印出来，使用CSS中ID选择器的格式，#<元素id名>，注意要加引号
            var $list = $('#list');
            console.log($list);// n.fn.init [ul#list, context: document, selector: "#list"]

            // 获取到class='p'的元素并且打印出来
            var $p = $('.div #list .p');
            console.log($p);//n.fn.init [p.p, prevObject: n.fn.init(1), context: document, selector: ".div #list .p"]
            console.log($p.length);//1,可使用输出<获取到的对象>.length来测试是否获取对象成功，0代表没有获取成功，>0代表获取成功

            // 获取到id='list' 列表下所有的li 标签
            var $lis = $('#list li');// 层级选择器，标签选择器
            console.log($lis.length);//3（有三个li标签，所以长度返回3）
            console.log($lis);//n.fn.init(3) [li, li, li, prevObject: n.fn.init(1), context: document, selector: "#list li"]
        })
    </script>

选择器_属性选择器

• 使用元素的属性选择元素

 <script>
        $(function(){
            // 获取到有class属性的div标签
            var $classes = $('div[class]');
            console.log($classes.length);//4

            // 获取到有id属性的div标签
            var $ids = $('div[id]');
            console.log($ids.length);// 1

            // 获取到 属性name 的值为”input1“的input标签
            var $input1 = $('input[name="input1"]');
            console.log($input1.length);// 1

            // 获取到class属性中有’haha‘的div标签
            var $divHaha = $('div[class*="haha"]');
            console.log($divHaha.length);//3

            // 获取到class属性中以’haha‘开头的div标签
            var $divBeginHaha = $('div[class^="haha"]');
            console.log($divBeginHaha.length);//2

            // 获取到class属性中以'haha'结尾的div标签
            var $divEndHaha = $('div[class $= "haha"]');
            console.log($divEndHaha.length);// 1

            // 获取到class属性中是’haha‘的或者以’haha-‘开头的div标签
            var $diveHaha = $('div[class|="haha"]');
            console.log($diveHaha.length);//1
        });
    </script>

选择器的过滤及转移

选择器的过滤

• 对选择器集的筛选

<script>
        $(function(){
            // 获取包含ul标签的div标签（使用.has()）
            var $div1 = $('div').has('ul');
            console.log($div1.length);// 1

            // 获取不包含类选择器为div1的div标签（使用.not()）
            var $div2 = $('div').not('.div1');
            console.log($div2.length);//2

            // 获取所有div标签元素集中下标为2的div标签（）
            var $div3 = $('div').eq(2);
            console.log($div3);//n.fn.init [div.div2, prevObject: n.fn.init(3), context: document]
        })
    </script>

选择器的转移

  <script>
       $(function(){
            var $div2 = $(".div2");
            console.log($div2);

            // 获取$div2的上一个元素
            var $preDiv2 = $div2.prev();
            console.log($preDiv2.length);//1

            // 获取$div2前面的所有元素
            var $preAllDiv2 = $div2.prevAll();
            console.log($preAllDiv2.length);//2

            // 获取$div2后面的一个元素
            var $nextDiv = $div2.next();
            console.log($nextDiv.length);// 1

            // 获取$div2后面的所有元素
            var $nextAllDiv = $div2.nextAll()
            console.log($nextAllDiv.length);// 2

            // 获取$div2的兄弟姐妹元素
            var $siblings = $div2.siblings()
            console.log($siblings.length);// 4

            var $ul = $('.ul');
            // 获取$ul的所有父级元素
            var $parent = $ul.parent();
            console.log($parent.length);// 1

            // 获取$ul的所有子级元素,注意只能获得子一级的元素
            var $children = $ul.children();
            console.log($children.length);//3 

            // 查找到$ul里的p元素，如果查找不到，也会返回一个对象，JQuery的不含元素的实例对象，其他
            // 返回不了元素的对象都是返回这个对象
            var $p = $ul.find('p');
            console.log($p.length);// 1

    })
    </script>

JQuery对标签的操作

• 对标签的样式进行读和写
• 读和写都用.CSS() 这个函数

操作标签的样式属性

<script>
    $(function(){
        // 获得div样式中的高度属性，打印出来
        // 获取标签对象
        var $div = $('.div');
        // 获取宽高度属性
        var $height = $div.css('height');
        console.log($height);//200px
        // 注意，如果获取的属性值有多个，只取第一个

        // 给div标签添加一个字体颜色为红色的属性,并且把高度改为100px
        $div.css({color:'red', height:'100px'});
    })
</script>

操作标签的类属性

• 添加类属性，addClass()
• 移除类属性，removeClass()
• 切换添加移除类属性，toggleClass()

<script>
        $(function(){
            // 获取div对象
            var $div = $('.div');
            // 给对象加一个文字颜色类属性
            $div.addClass('color');
            // 移除文字颜色类属性
            $div.removeClass('color');

            // 给对象加一个文字颜色类属性，一个背景颜色类属性
            $div.addClass('color backgroundColor');
            // 移除添加的两个类属性
            $div.removeClass('color backgroundColor');

            // 给div添加一个点击事件，点击一次添加上文字颜色和背景颜色类属性，再点击一次，取消，再点击添加，可重复切换
            $div.click(function(){
                $div.toggleClass('color backgroundColor');
            })
        })
    </script>

JQuery绑定click事件

• click(),在JQuery中，点击事件是一个方法
• 在click()中，$(this)，表示获取当前点击的标签对象

 <script>
        $(function(){
            // 给第一个块关联一个点击弹窗事件
            // 获取对象
            var $div = $('.div');
            // 关联点击弹窗事件(JQuery中，点击事件是一个方法)
            $div.click(function(){
                alert("memeda")
            });

            // 给第二个块中的每一个li关联一个点击事件，点击不同的标签，输出不同的值
            // 获取对象
            var $ul = $('ul');
            // 给每一个列表元素都关联一个点击事件
            $ul.children().click(function(){
                // 获取点击元素在父类的下标值
                // $(this),表示获取当前点击的对象
                // index()，表示调用元素在父类中索引值
                var $index = $(this).index();
                console.log($index);
            })
    })
    </script>

JQuery动画

• 使用animate方法设置某个元素的某些属性，属性渐变，而达成的动画效果
• animate可以设置一个元素的一个或者多个属性
• 每个animate是独立的，彼此不影响，动画执行过程跟主线程是异步的

animate的参数

• animate(),内有四个参数
  
  • 参数1：要改变的元素的样式的属性值，写成字典的形式
  • 参数2：动画持续的事件，单位为毫秒，一般不写单位
  • 参数3：动画曲线，默认为‘swing’，缓冲运动，还可以设置成‘linear’，表示匀速运动
  • 参数4：动画回调函数，动画完成执行的匿名函数

开始

中间

结束

“`