jQuery--第一节

一、
1、在jQuery中，可以直接使用$符号，或者使用jQuery变量名，它俩完全一致
console.log(jQuery === $); // true
2、jQuery本身是函数，拥有自己的属性和方法
console.log($);//function ( selector, context ) {…
3、在ready方法中去执行正式的操作，等DOM加载完毕后去执行
$(document).ready(function () {
console.log('文档加载完毕');
});
简写为：
$(function () {
console.log('文档加载完毕');
}
3、将JQ对象与DOM对象转换

           // 获取元素
            var h2JQ = $('.title');
            console.log(h2JQ);

            // 将JQ对象转为DOM对象
            var h2DOM = h2JQ.get(0);
            // console.log(h2JQ[0]);

            // 将DOM元素转为JQ元素
            console.log($(h2DOM));

4、 使用$获取元素

            // var h2 = $('h2');
            // // 绑定事件
            // h2.on('click', function () {
            //     // 修改内容
            //     h2.html('$');
            // });

            // $('h2').on('click', function () {
            //     $(this).html('$');
            // });

二、选择器

            // 通过id查找元素
            // $('#div2').css('color', 'blue');
            // 通过class
            // $('.div1').css('color', 'red');
            // 通过标签名
            // $('span').css('color', 'yellow');

            // 群组选择器
            // $('span, p').css('background-color', 'pink');

            // 后代选择器
            // $('div span').css('font-size', '2em');

            // 如果符合选择器的元素有多个，则可以全部选出，并且设置样式的时候，可以同时给数组内容所有元素添加
            //  $('div').css('border', '1px dashed blue');

            // 直接子级选择器
            // $('.container > span').css('border', '1px dashed red');

            // first
             //$('li:first').css('color', 'blue');
            // last
            // $('li:last').css('color', 'red');

            // :first-child
            // $('li:first-child').css('color', 'blue');
            // :last-child
            // $('li:last-child').css('color', 'red');

            // 如果使用:fist或者:last，则没有父级标签
            // 如果使用:first-child或者:last-child，则从子集的区域内查找

            // eq()
            // $('li:eq(7)').css('background-color', 'yellow');

            // nth-child() 
            //$('li:nth-child(3)').css('background-color', 'yellow');

            // :eq和:first类似，没有父级标签,不区分位置，并且下标从0开始
            // :nth-child和:first-child类型，区分位置,从子集的区域内查找，下标从1开始

            // :not()用于排除某些元素，如果是多个，直接在not()后面的小括号中使用群组选择器
            // $('.wrapper > *:not(p, h3)').css('background-color', 'cyan');

            // 代表奇数元素，根据下标，从0开始
            // $('li:odd').css('background-color', 'blue');
            // $('li:even').css('background-color', 'blue');

            // 代表奇数元素，根据下标，从1开始
            // $('li:nth-child(odd)').css('background-color', 'blue');
            // $('li:nth-child(even)').css('background-color', 'blue');

            // 通过属性选择器获取元素
            // $('p[title]').html('我是通过属性选择器修改后的内容');

            // 表单对于的选择器
            // $(':input').css('background-color', 'blue');
            // 可以直接编写input的type的值去选取元素
            // $(':text').css('background-color', 'blue');
            // $(':password').css('background-color', 'blue');
            // $(':checkbox').css('background-color', 'blue');

            // 选取默认选中的元素
            // $(':checked').css('background-color', 'red');

            // $('h2').css('color', 'blue').on('click', function () {
            //     alert('h2');
            //     $(this).slideUp(2000);
            // }).css('background-color', 'yellow');

三、DOM操作
1、 append
appendTo
prepend
prependTo
after
insertAfter
before
insertBefore
remove
clone
empty
replaceWith
replaceAll

// 原生JS
        // var header = document.createElement('div')
        // header.className = 'header';
        // document.querySelector('.container').appendChild(header);

        $(function () {
            // 创建标签
            // var header = $('<div class="header"></div>');

            // append() 拼接元素
            // $('.container').append(header);

            // appendTo()
            // header.appendTo($('.container'));
            // 可以直接把容器的选择器写成参数，而不添加$()
            // header.appendTo('.container');


            // $('<div class="header"></div>').appendTo('.container').append('<h1>标题</h1>');

            // 使用jq创建结构的时候，可以同时创建多个标签
            // $('<div class="header"><h1>我是标题</h1></div>').appendTo('.container');
            // $('<div class="header">' +
            //     '<h1>我是标题</h1>' +
            //   '</div>').appendTo('.container');

            // 如果创建的标签结构比较复杂，代码比较多。
            // 还折成一行就会造成代码可读性降低
            // 可以使用ES6的模板字符串解决这个问题
            // 模板字符串使用 `` 代表结构，所有内部的内容，都是字符串的内容，可以换行写
            // 模板字符串内部如果需要使用变量的话，直接使用${}，在内部编写就可以解析
            // var str = '我是内容';
            // $(`<div>
            //       <div>
            //           <div>${ str }</div>
            //       </div>
            //   </div>`).appendTo('body');


            // $('<h1>h1</h1>').appendTo('.container');
            // $('<h2>h2</h2>').appendTo('.container');

            // 使用after()和before进行兄弟元素的拼接
            // $('h2').before('<hr />');
            // $('h1').after('<hr />')

            // 和append 、 appendTo不同的在于叫 insertAfter / insertBefore，进行将前面的元素拼接到后面的元素上下
            // $('<hr />').insertAfter('h1');
            // $('<hr />').insertBefore('h2');
            
            //与append相反，在元素里的最前面插入
            // $('<hr />').prependTo('.container');
            // $('.container').prepend('<hr />');

            // append
            // appendTo
            // prepend
            // prependTo
            // after
            // insertAfter
            // before
            // insertBefore

            // 插入一个标签
            // $('<h2>标题</h2>').appendTo('.container');
            // $('<h2>标题</h2>').appendTo('.container');
            // $('<h2>标题</h2>').appendTo('.container');
            // $('<h2>标题</h2>').appendTo('.container');

            // 使用h1标题替换掉h2标题
            // $('h2:eq(1)').replaceWith('<h1>标题</h1>');
            // $('<h1>标题</h1>').replaceAll('h2:eq(1)');
            // 使用 replaceWith 或者 replaceAll 可以进行标签的替换

            // 移除元素本身
            $('<h1>我是被移除的元素</h1>').appendTo('.container').remove();

            // 清空元素内容
            $(`<ul>
                <li>li1</li>
                <li>li2</li>
                <li>li3</li>
            </ul>`).appendTo('.container').empty();
            // 如果使用jq同时创建了多层的标签结构，则返回值代表最外层

            // 复制
            $('.container').clone().appendTo('body');

        });

2、

$(function () {
            // 创建标签并拼接
            var div = $(`<div>
                    <h2>我是h2标题</h2>
                    <h3>我是h3标题</h3>
                </div>`).appendTo('.container');

            // 使用html()方法，获取全部内容
            // console.log(div.html());
            // 使用text()方法，获取文本内容
            // console.log(div.text());

            // 如果html()方法有参数，则修改内容
            // div.html('<h1>我是h1</h1>');
            // text()有参数的情况和html()类似
            // div.text('我是修改后的文字');

            // 注意: 在JQ中，不是所有地方都能使用链式语法。当某个方法具有自定特定的放回值的情况，则不能使用链式语法
            // div.html().css('background-color', 'red');


            // val()方法是为了给表单元素的value属性使用。有参则设置，无参则取值
            // $(':input').val('1831468462');
            // console.log($(':input').val());


            // 添加class
            // $('.container').addClass('c1 c2');
            // 移除class
            // $('.container').removeClass('c1');
            // 切换class
            // 如果当前存在，则移除，否则添加
            // 更多的情况用在动画的切换
            // $('.container').toggleClass('active');


            // 添加a标签
            // var a = $('<a></a>').appendTo('.container');
            // 设置内容
            // a.html('百度一下');
            // 添加属性
            // a.attr('href', 'http://www.baidu.com');
            // 添加class
            // a.addClass('link');

            // $('<a></a>').appendTo('.container').html('百度一下').attr('href', 'http://www.baidu.com').addClass('link');
            $('<a></a>').html('百度一下').attr('href', 'http://www.baidu.com').addClass('link').appendTo('.container');


            // 如果attr方法，只有一个参数，为属性名，则获取对应的属性值
            $('.link').attr('href');
            // 如果attr方法，有两个参数，分别为名称值，为修改或添加属性值
            $('.link').attr('href', 'http://blog.lidaze.com');
            // 如果attr方法有一个参数，并且为对象，则可以同时添加或修改多个属性与其对应的值
            $('.link').attr({
                href: 'http://book.lidaze.com',
                title: '我是a标签'
            });
            // 移除
            $('.link').removeAttr('title');



            // css()方法和attr()方法使用几乎一样
            // css()赋值标签的样式
            $('.link').css('color');
            $('.link').css('color', 'yellow');
            $('.link').css({
                color: 'green',
                'font-size': '30px'
            });

        });