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. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起

---

一、使用jQuery操作属性值

.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").lengthvar 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);