JavaScript的第十三天-优快云博客

.attr ( )	获取或设置元素的属性值（无法获取布尔值）
.removeAttr ( )	移除元素的属性
.prop()	获取或设置匹配元素的属性值（获取布尔值）

        $('#ckb1').attr('checked');
        $("#ckb1").prop("checked", false);
        $("#ckb1").removeAttr("disabled")

操作案例：

表格的全选和反选

    $(function () {
        $("#j_cbAll").click(function () {
            $("#j_tb input").prop("checked", $(this).prop("checked"))
        })
        $("#j_tb input").click(function () {
            var a = $("#j_tb input:checked").length
            var b = $("#j_tb input").length
            $("#j_cbAll").prop("checked", a == b)
        })
    })

二、设置宽高

1、宽高属性

.width() / .height()	不包含边框和内外边距
.outerHeight() / .outerWidth()	包含内容＋内边距+边框，不包含外边距
.outerHeight(true) .outerWidth(true)	包含内容+内边距+边框+外边距
$(window).outerWidth()	window 可视窗口的宽高

2、使用方式

    $('#btn').click(function () {
      // 不包含边框和内外边距  width
      $('#one').width();
      $('#one').height();

      // 设置属性  里面给值为设置 width(150)
      $('#one').width(150)
      $('#one').height(150)

      //包含 内容＋内边距+边框   不包含外边距  outerHeight
      $('#one').outerHeight();
      $('#one').outerWidth();

      //包含 内容＋ +内边距+边框+外边距 outerHeight(true)
      $('#one').outerHeight(true);
      ('#one').outerWidth(true);

      
    })
    //window 可视窗口的宽高 $(window).outerWidth()
    $(window).mousemove(function () {
      $(this).outerWidth();
    })
  })

三、offset（）和position（）的区别

1、.offset()：获取到document的距离，也就是窗口边缘的距离

2、.position()：获取到有定位的最近的父元素的距离

  $(function () {
    //  获取到document的距离  也就是窗口边缘的距离
    $('#btn1').click(function (e) {
      console.log($('#son').offset());
    })
    // 获取到有定位的  最近的  父元素的距离   offsetTop
    $('#btn2').click(function () {
      console.log($('#son').position());
    })
  })

四、jQuery事件发展历程

1、简单注册事件：单独创建事件，比较单一独立且不能对同一事件源注册多个事件

2、bind：可以同时注册多个事件

3、 on：可以支持同时注册事件，也支持同时动态绑定事件

4、off：解绑事件，只需要写入事件名即可

    $().click(function () { })
    $().mouseover(function () { })


    $().bind("click mouseover",function(){})
    $().bind({click:function(){},mouseover:function(){}})


    $().on('click', 'div,span', function () {})
    $().on({click: function () {},mouseover: function () {}}, 'div,span')



      $("#btn2").click(function () {
        $(".one").off("click")
      })

五、动态创建元素

1、$().html() ：获取

$().html("<a>nihao</a>")：设置

2、 $().text()：获取

$("#div1").text("<i>iii</i>")

在动态创建时，.html会识别标签名，而.text只能识别元素的纯文本内容，无法插入标签名

表格案例

表格生成的两种方式，使用字符串拼接或使用数组拼接

        $("#j_btnGetData").click(function () {
             <tr>
                <th>标题</th>
                 <th>地址</th>
                 <th>说明</th>
            </tr>
            //1. 字符串拼接
             var str = ""
             for (var item of data) {
                 str += `<tr>`
                 for (var key in item) {
                     str += `<td>${item[key]}</td>`
                 }
                 str += `</tr>`
            }
            console.log(str);
            $("#j_tbData").html(str)
            // 2.数组
            var newArr = []
            for (var item of data) {
                newArr.push("<tr>")
                for (var key in item) {
                    newArr.push("<td>" + item[key] + "</td>")
                }
                newArr.push("</tr>")
            }
            $("#j_tbData").html(newArr.join(""))
        })

        // <tr> <td></td>  </tr>
        // ["<tr>","<td></td>",'</tr>']
    });

表格删除的方式

    $(function () {
        // 删除所有
        $("#btn").click(function () {
            // $("#j_tb").remove()
            $("#j_tb").html("")
            $("#j_tb").empty()

        })

        // 删除单个
        $(".get").click(function () {
            $(this).parent().parent().remove()
        })
    })

六、jQuery节点的操作

.html('')	只是清空页面中的内容，节点不删除
.empty()	只是清空页面中的内容，节点不删除
.remove()	自杀式删除内容和节点都清空
.append()	往子级的最后面添加
.prepend()	往子级的最前面添加
.after()	往自己的后面添加
.before()	往自己的前面添加
.appendTo()	往子级的最后面添加
clone()	只克隆节点
clone(true)	克隆节点的同时连事件一起克隆

  //清空节点
    $(function () {
    $("#li3").html("")
    // 只是清空页面中的内容，节点不删除

    $("#li3").empty()
    // 只是清空页面中的内容，节点不删除

    $("#li3").remove()
    // 自杀式删除  内容和节点都清空

  })



//生成节点
  $(function () {
    // 1.append   往子级的最后面添加
    var li = "<li>我是新增的li标签</li>"
    $("#ul1").append($(li))

    // 2.prepend   往子级的最前面添加
    $("#ul1").prepend(li)

    // 3.after   往自己的后面添加
    $("#li3").after(li)

    // 4.before   往自己的前面添加
    $("#li3").before(li)

    // 5.appendTo   往子级的最后面添加
    $(li).appendTo($("#ul2"))

  })




//复制节点
  $("#div1").click(function () {
    console.log(1);
  })

  $("#clone").click(function () {
    $("#div1").after($("#div1").clone(true))
  })

七、jQuery的一些操作

1、val() 获取值，val("aaa") 设置值

$("#txt").val()
//获取值

$("#txt").val("你好")
//修改值

2、深拷贝与浅拷贝

1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象

2. 深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起

            $.extend(true, obj1, obj)
            obj1.girlfriends.name = "cc"
            console.log(obj);
            console.log(obj1);

JavaScript的第十三天

一、使用jQuery操作属性值

操作案例：

表格的全选和反选

二、设置宽高

1、宽高属性

2、使用方式

三、offset（） 和position（）的区别

1、.offset()：获取到document的距离，也就是窗口边缘的距离

2、.position()：获取到有定位的最近的父元素的距离

四、jQuery事件发展历程

1、简单注册事件：单独创建事件，比较单一 独立且不能对同一事件源注册多个事件

2、bind：可以同时注册多个事件

3、 on：可以支持同时注册事件，也支持同时动态绑定事件

4、off：解绑事件，只需要写入事件名即可

五、动态创建元素

1、$().html() ：获取

2、 $().text()： 获取

表格案例

表格生成的两种方式，使用字符串拼接或使用数组拼接

表格删除的方式

六、jQuery节点的操作

七、jQuery的一些操作

1、val() 获取值，val("aaa") 设置值

2、深拷贝与浅拷贝

1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象

2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起

三、offset（）和position（）的区别

1、简单注册事件：单独创建事件，比较单一独立且不能对同一事件源注册多个事件

2、 $().text()：获取

2. 深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起