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);