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(\'修改标题\');


```