day55：Jquery：导入、操作标签的步骤、属性、类名、样式等操作

## JQ初识

```python
jQuery是对js进行的二次封装的工具包
    二次封装：比js使用起来便捷了，操作比就是综合了(写一句jq可以实现多句js逻辑)，底层就是原生js
    工具包：jq就是一堆函数的集合体，通过jq对象来调用(jQuery)

1.官网下载：https://jquery.com/download/
    jquery-3.4.1.js | jquery-3.4.1.min.js
    
2.在 需要jq环境的页面中 使用jq
<script src="js/jquery-3.4.1.js"></script>
<script>
     $ 就是jQuery对象，可以使用jQuery的所有功能
</script>

3.根据API学习jq：http://jquery.cuishifeng.cn/
    
    
```

## JQ的常用操作

```python
1.jq选择器 - 得到的是jq对象 - jq对象可以调用jq库的所有功能
$('css语法选择器')

    想通过js对象获取第2个p的文本内容
    let ps = $('p');
    console.log(ps);
    let _p2 = ps[1];  # jq对象可以理解为存放了js对象的数组
    console.log(_p2.innerText);

    想通过jq对象获取第2个p的文本内容
    p2 = $(_p2);
    console.log(p2.text());

    总结：
    1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
    2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
    3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法

```

## JQ操作页面的步骤

```python
    1.获取标签
    2.绑定事件
    3.操作标签

    $('h1').click(function (ev) {
         jq的事件对象，但对js事件对象做了完全兼容
         #ev是浏览器返回的页面各个事件！！！
         console.log(ev);
         console.log(ev.clientX);
         console.log(ev.clientY);
     })

    $('h1').on('click', function (ev) {
        console.log(ev);
     })

    $('p').click(function () {
        // 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
        console.log($(this));
        console.log($(this).text());
    });

     文本
     $('div').text()  文本内容
     $('div').html()  标签内容
     $('.inp').val()  表单内容

     需求1：点击h1获取 自身文本内容、div的标签内容、input的表单内容
    $('h1').click(function () {
        console.log($(this).text());
        console.log($('div').html());
        console.log($('input').val());
    })


```





## JQ的样式操作

```python
样式操作
    获取样式: $(div).css('css中的样式属性名')
    设置样式:$div.css('css中的样式属性名', '属性值');  // 单一设置
    $('div').css({
        '属性1': '值1',
        ...
        '属性n': '值n',
    });
    $('div').css('属性', function (index, oldValue) {
        console.log(oldValue);
        // $(this) 可以拿到调用者对象
        return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
    })
```

JQ对标签类名、属性的操作

```python
 增加类名：$('div').addClass('类名')
 删除类名：$('div').removeClass('类名')
 切换类名：$('div').toggleClass('类名')
 #通过类名的添加、删除，设置样式、隐藏等对页面的反馈
    $('.btn1').click(function () {
        $('.box').addClass('red');
        $('.box').removeClass('yellow');
        $('.box').removeClass('blue');

        // $('.box').toggleClass('red');  // 无red类添加，反之去除
    });
    $('.btn2').click(function () {
        let $box = $('.box');
        $box[0].className = 'box';
        $box.addClass('yellow');
    });
    $('.btn3').click(function () {
        $('.box').addClass('blue');
    });
   

四、属性
    
    获取属性值：$('div').attr('属性名')
    设置属性值：$('div').attr('属性名', '属性值或函数')
    删除属性值：$('div').attr('属性名', '')
    
    // https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg
    $('h1').click(function () {
        let h1_id = $(this).attr('id');
        console.log(h1_id);


        $('img').attr('src', function () {
            return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
        });
        $(this).attr('id', '');
    })

```

## JQ其它 的操作文档的方法：

```python
一、快速定位到某一个jq对象
    
     1）在jq集合中快速拿到某一个jq对象: jq对象.eq(index)
     $('.d:eq(1)')  ==  $('.d').eq(1)#JQ对象数组
     $('.d').eq(1).click(function () {
        alert(123)
     })
    2）在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
    $(this) | 索引
    $('.d').click(function () {
        // 方法index()取出标签所在层级的索引，不是在jq对象数组中的索引
        let index = $(this).index();
        console.log(index)
    });

二、通过自身快速定位到 "亲戚"
    上兄弟(们) prev(All)
    下兄弟(们) next(All)
    兄弟们 siblings
    孩子们 children
    父亲(们) parent 
  
    let $d2 = $('.d2');
    console.log($d2);
    let next = $d2.next();
    console.log(next);
    let nexts = $d2.nextAll();
    console.log(nexts);
    let prev = $d2.prev();
    console.log(prev);
    let siblings = $d2.siblings();
    console.log(siblings);
    let children = $d2.children();
    console.log(children);
    let parent = $d2.parent();
    console.log(parent);
    
三、动态生成html标签
     let $table = $('<table></table>');#生成标签对象
     $table.css({                    #给标签添加样式
        border: '1px'
     });
     $('body').append($table);  // 加入到body最后
     $('body').prepend($table);  // 加入到body最后
     $('p').before($table);  // 加入到p之前
     $('p').after($table);  // 加入到p之后

 需求：点击表格，在之后插入指定宽高的表格
    
     $('p').click(function () {
        let inps = $('input');
        // 表
        let table = $('<table border="1"></table>');

        let row = inps.eq(1).val();
        console.log(typeof(inps.eq(1).val()));
        let col = inps.eq(2).val();
        // 行
        for (let i = 0; i < row; i++) {
            let tr = $('<tr></tr>');
            table.append(tr);
            // 列
            for (let j = 0; j < col; j++) {
                let td = $('<td>' + inps.eq(0).val() + '</td>');
                tr.append(td);
            }
        }
        $(this).after(table);
    })
```

JQ的链式操作：

```python
 例：本质是每次操作返回的还是  对象本身，所以可以继续点方法
$('h1').css('color', 'orange').css('background', 'red').click(function () {
        console.log(this)
    }).text('修改标题');


```