目录
- 一:jQuery操作标签
- 二:css操作(链式操作)
- 1.操作对象与需求:
- 2.执行链式操作
- 3.原理解析
- 4.链式操作本质
- 三:位置操作
- 1.相对于浏览器窗口
- 2.相对于父标签
- 3.滚动顶部长度
- 4.向左滑动
- 三:尺寸操作
- 四:文本操作
- 1.操作标签内部文本
- 2.jQuery获取标签
- 3.text设置文本
- 4.HTML设置文本
- 五:获取文件files值操作
- 1.操作目标
- 2.获取input框内值
- 3.设置input框内值
- 4.获取文件对象
- 5.正确拿到文件数据
- 六:属性操作
- 1.属性操作
- 2.checkbox使用attr查询用户选择情况
- 3.原因
- 七:解决checkbox使用attr查询用户选择时(无效问题)
- 八:文档处理
- 1.文档常用方法
- 2.js原生版本与jQuery版本区别
- 3.内部尾部追加
- 4.内部头部追加
- 5.插入到某标签前面/后面
- 6.移除当前标签 包括内部的子标签全部移除掉
- 7.清空标签内部所有的内容
一:jQuery操作标签
1.操作类
js原生版本 classList.add() classList.remove() classList.contains() classList.toggle() jQuery版本addClass() : 添加元素removeClass() : 移出某个类属性 hasClass() : 验证是否包含某个类属性toggleClass() : 有则删除无则添加
2.实测jQuery操作标签
二:css操作(链式操作)
1.操作对象与需求:
将一行代码将第一个p标签变成红色第二个p标签变成绿色<p>111</p><p>222</p>
2.执行链式操作
$('p').first().css('color','red').next().css('color','green')
3.原理解析
1.jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签2.jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
4.链式操作本质
1.python代码实现链式操作本质class MyClass(object): def func1(self): print('func1') return self def func2(self): print('func2') return selfobj = MyClass()obj.func1().func2()2.jQuery链式操作的本质对象在调用一个方法之后，对象还会返回回来，然后在调用其他方法，以此循环 jQuery本质。
三:位置操作
1.相对于浏览器窗口
offset()
2.相对于父标签
position()
3.滚动顶部长度
scrollTop()
右侧滚动条距离顶部的长度$(window).scrollTop()0右侧滚动条距离顶部的长度$(window).scrollTop() 969括号内不加参数就是获取$(window).scrollTop() 1733加了参数就是设置(回到顶部)$(window).scrollTop(0) n.fn.init [Window]$(window).scrollTop(500)n.fn.init [Window]
4.向左滑动
scrollLeft()
三:尺寸操作
1.操作目标
p {/*上 右 下 左*/margin: 1px 2px 3px 4px;padding: 4px 3px 2px 1px;}
2.尺寸操作
1.文本高度$('p').height() 212.文本宽度$('p').width() 6973.文本+padding 内高$('p').innerHeight() 274.文本+padding 内宽$('p').innerWidth() 7025.文本+padding+border 边框(未设值)$('p').outerHeight() 276.文本+padding+border 边框(未设值)$('p').outerWidth() 702
四:文本操作
1.操作标签内部文本
js版本 innerText : 操作文本 innerHTML : 操作文件与标签 jQuery版本text() : 括号内不加参数就是获取加了就是设置(只能操作文本内容)html() : 括号内不加参数就是获取加了就是设置(能操作文本与标签)
2.jQuery获取标签
$('div').text()'你忍着点 忍忍就过去了！'$('div').html()'<p>你忍着点 忍忍就过去了！</p>'
3.text设置文本
$('div').text('你们都是我的大宝贝')w.fn.init [div, prevObject: w.fn.init(1)]
4.HTML设置文本
$('div').html('你个臭妹妹')w.fn.init [div, prevObject: w.fn.init(1)]$('div').text('<h1>你们都是我的大宝贝</h1>')w.fn.init [div, prevObject: w.fn.init(1)]$('div').html('<h1>你个臭妹妹</h1>')w.fn.init [div, prevObject: w.fn.init(1)]注意:jQuery与js文本规律相同
五:获取文件files值操作
js版本 .value jQuery版本.val() : 括号内不加参数就是获取加了就是设置
1.操作目标
<input type="text" id="d1"><input type="file" id="d2">
$('#d1').val()"sasdasdsadsadad"
$('#d1').val('520快乐') w.fn.init [input#d1]
4.获取文件对象
$('#d2').val()"C:\fakepath\01_测试路由.png"
5.正确拿到文件数据
$('#d2')[0].files[0] # 牢记两个对象之间的转换File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
六:属性操作
js版本 setAttribute()getAttribute() removeAttribute() jQuery版本 attr(name,value) : 设置属性(两个参数设置)attr(name) : 获取属性(一个参数获取)removeAttr(name) : 移出属性
1.属性操作
1.js原生变量命名与jQuery变量命名规范 在用变量存储对象的时候 js中推荐使用(见名知意) XXXEle 命名 标签对象jQuery中变量推荐使用(见名知意) $XXXEle 命名 jQuery对象2.操作目标<p id="d1" username="jason"></p>3.jQuery赋值变量 let $pEle = $('p')undefined4.获取id属性值$pEle.attr('id')"d1"5.获取class属性值为空(标签内没有calss属性)$pEle.attr('class')undefined6.创建名为class的类属性值为c1$pEle.attr('class','c1')w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]7.修改id属性 $pEle.attr('id','id666')w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]8.设置自定义属性 $pEle.attr('password','jason123')w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]9.移出属性 $pEle.removeAttr('password')w.fn.init [p#id666.c1, prevObject: w.fn.init(1)] 10.获取p标签数据 $('p')[0] <p id="id666" username="jason" ></p>
- 注意:
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
2.checkbox使用attr查询用户选择情况
1.查询id为d3的checked的选择情况 $('#d3').attr('checked') # 无效"checked"2.查询id为d2的checked的选择情况 $('#d2').attr('checked') # 无效undefined$('#d2').attr('checked') # 无效undefined$('#d4').attr('checked') # 无效undefined$('#d3').attr('checked') # 无效"checked"3.给id为d3的checked并设置选择$('#d3').attr('checked','checked') # 无效w.fn.init [input#d3]
3.原因
针对选择按钮，checkbox radio option这些需要用户选择的，你在操作它的属性的时候，就不要使用attr。
七:解决checkbox使用attr查询用户选择时(无效问题)
1.解决访问:
专门针对选择按钮的参数解决以上无效问题prop独有作用: 用户选择 : True 用户未选择 : False
2.操作目标
<input type="checkbox" value="111" name="hobby" id="d2">d2<input type="checkbox" value="222" name="hobby" checked id="d3">d3<input type="checkbox" value="333" name="hobby" id="d4">d4
3.使用prop
1.查询id为d2的选项是否选择 $('#d2').prop('checked')true2.查询id为d3查询的选项是否选择 $('#d3').prop('checked')false3.查询id为d4查询的选项是否选择$('#d4').prop('checked') true 4.prop设置值 $('#d3').prop('checked',true)k.fn.init [input#d3]5.prop取消值 $('#d4').prop('checked',false)k.fn.init [input#d4]
八:文档处理
1.文档常用方法
1.添加到指定元素内部的后面$(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B2.添加到指定元素内部的前面$(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B3.添加到指定元素外部的后面$(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面4.添加到指定元素外部的前面$(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面5.移除和清空元素remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。
2.js原生版本与jQuery版本区别
js版本 createElement('p') : 创建p标签 appendChild() : 尾部添加 jQuery版本$('<p>') : 创建p标签append() ：尾部添加
3.内部尾部追加
1.创建p标签let $pEle = $('<p>')2.p标签创建文本$pEle.text('你好啊 草莓要不要来几个?')3.p标签设置属性id名为d1值$pEle.attr('id','d1')4.内部尾部追加$('#d1').append($pEle) 将变量添加到标签内部$pEle.appendTo($('#d1'))
4.内部头部追加
创建p标签let $pEle = $('<p>')p标签创建文本$pEle.text('你好啊 草莓要不要来几个?')p标签设置属性id名为d1值$pEle.attr('id','d1')1.内部头部追加 $('#d1').prepend($pEle) w.fn.init [div#d1] 2.将变量添加到标签内部头部 $pEle.prependTo($('#d1'))w.fn.init [p#d1, prevObject: w.fn.init(1)]\
5.插入到某标签前面/后面
创建p标签let $pEle = $('<p>')p标签创建文本$pEle.text('你好啊 草莓要不要来几个?')p标签设置属性id名为d1值$pEle.attr('id','d1')1.放在某个标签后面 $('#d2').after($pEle) w.fn.init [p#d2]把变量插到标签的后面 $pEle.insertAfter($('#d1'))2.放在某个标签的前面 $('#d1').before($pEle)w.fn.init [div#d1] 把变量插到标签的前面 $pEle.insertBefore($('#d2'))
6.移除当前标签 包括内部的子标签全部移除掉
$('#d1').remove() # 将标签从DOM树中删除w.fn.init [div#d1]
7.清空标签内部所有的内容
$('#d1').empty() # 清空标签内部所有的内容w.fn.init [div#d1]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body> <div id="d1"> <p id="d2"></p> <span>div>span</span> <p>div>p</p> </div></body></html>
