为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
jQuery基础(二)—DOM篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • JQuery创建节点及设置属性: 创建元素节点: $('<div></div>') 文本节点:$('<div>文本节点</div>') 属性节点:$('<div id='test' class='aaron'>文本节点</div>')
    查看全部
  • JS创建节点并设置节点属性的方式: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild
    查看全部
  • querySelector() 方法仅仅返回匹配指定选择器的第一个元素,因此var body=document.querySelector("body"); 跟 var body=document,getElementsByTagName("body")[0]没有区别。
    查看全部
  • $("div").remove();方法既把div本身移除掉了,而且会把绑定在上面的事件也给取消了。
    查看全部
  • $("div").empty(); 只是清除了div元素里面所有的子节点,但是div这个盒子还在; $("div").remove();练带着div也都一块清除了。
    查看全部
  • append()向每个匹配的元素内部追加内容 prepend()向每个匹配的元素内部前置内容 appendTo()把所有匹配的元素追加到另一个指定元素的集合中 prependTo()把所有匹配的元素前置到另一个指定的元素集合中
    查看全部
  • 注意事项:在使用的时候需要特别注意下 粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了 起始位置不同:.closest开始于当前元素 .parents开始于父元素 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象
    查看全部
  • add()将元素追加到匹配元素集合中 例子:同时选择两个id对象 当用jQuery要选择demo1标签时,会用到下面代码:$('#demo1"); 当用jQuery选择demo1和demo2,不要告诉我用$('div')。 这时就要用到标题中提到的方法,jQuery add方法:追加标签。 代码如下 $('#demo1").add('#demo2");来自 rinkaaaaa的评论
    查看全部
  • 粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了 起始位置不同:.closest开始于当前元素 .parents开始于父元素 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象
    查看全部
  • 1 .parents()和.parent()方法是相似的,但后者只是进行了一个单级的DOM树查找 2 $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。
    查看全部
  • .find()和.children()方法是相似的 1.children只查找第一级的子节点 2.find查找范围包括子节点的所有后代节点
    查看全部
  • remove:移除节点 无参数,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据 有参数,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据 detach:移除节点 移除的处理与remove一致 与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来 例如:$("p").detach()这一句会移除对象,仅仅是显示效果没有了。但是内存中还是存在的。当你append之后,又重新回到了文档流中。就又显示出来了。
    查看全部
  • empty方法 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点 empty不能删除自己本身这个节点 remove方法 该节点与该节点所包含的所有后代节点将同时被删除 提供传递一个筛选的表达式,用来指定删除选中合集中的元素
    查看全部
  • children()所有的子元素
    查看全部
  • $("#btn1").on("click",function(){ $(".content").append("<div class="">lalala</div>")//添加的内容写在后面 }) $("#btn2").on("click",function(){ $("<div class="">lalala</div>").appendTo(".content")添加的内容写在前面 })
    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的语法 2、jQuery节点操作
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!