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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • .add()的参数可以几乎接受任何的$(),包括一个jQuery选择器表达式,DOM元素,或HTML片段引用。 处理一:传递选择器 //li和p都添加一个背景颜色 $('li').add('p').css('background', 'red') 处理二:传递dom元素 $('li').add(document.getElementsByTagName('p')[0]) 处理三:就是动态创建P标签加入到合集,然后插入到指定的位置,但是这样就改变元素的本身的排列了 //把html结构'<p>新的p元素</p>' //加入到li的合集中,为了能够在页面上显示 //需要在重新appendTo要指定的节点处 //值得注意:整个结构位置都改变了 $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    查看全部
  • parent匹配集合中所有元素的祖辈元素 parents()返回dom树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的jquery对象。
    查看全部
  • siblings() ==》 通过无参和有参来查找同一父级的前面后面的兄弟元素
    查看全部
  • prev() ==》 通过有参和无参来查找同级的上一个兄弟元素
    查看全部
  • next()用法有参和无参使用 // 找到同级元素.item-2的下一个元素 $("li.item-2").next().css('border','1px solid red'); //找到所有class=item-3的li //然后给每个li,然后筛选出第一个,加上蓝色的边 $('.item-2').next(':first').css('border', '1px solid blue')
    查看全部
  • closest(selector)方法要给定一个条件来查找元素 .parents()和.closest()区别: 1.起始位置不同:.closest开始于当前元素 .parents开始于父元素 2.遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合 3.结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象
    查看全部
  • 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild
    查看全部
  • .parents()和.closest()的区别 起始位置不同:.closest开始于当前元素 .parents开始于父元素 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象
    查看全部
  • 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild
    查看全部
  • parents() ==》 一直往上查找,找到祖先节点 可有参数筛选条件 parent()与parents()的区别: 1.parent只会查找一级,而parents()则查找到祖先级节点 2.$( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。
    查看全部
  • parent() ==》 向上查找一级父元素 //找到所有class=level-3的ul //找到它的父元素li,并且加上一个红色的边框 $("ul.level-3").parent().css("border","1px solid red"); ==》 无参 //找到所有class=item-a的父元素 //然后给每个ul,然后筛选出最后一个,加上蓝色的边 $('.item-a').parent(':last').css('border', '1px solid blue') ==》 有参
    查看全部
  • .find()方法要注意的知识点: find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。 与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。 find只在后代中遍历,不包括自己。 选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。 注意重点: .find()和.children()方法是相似的 1.children只查找第一级的子节点 2.find查找范围包括子节点的所有后代节点
    查看全部
  • children() ==》 查找元素的第一级子元素 $('div').children() ==> 无参数 $('div').children(".selected") ==> 有参,查找筛选出来的结果
    查看全部
  • :.children(selector)方法返回匹配元素集合中每个元素的所有子元素(仅儿子辈) 允许通过dom树中对这些元素进行搜索,并且构造一个新的匹配元素的jquery对象
    查看全部
  • .wrapInner(wrappingElement):给html的文本内容添加一个包裹,如果原文本内容就将被一个标签包裹,则,原始的标签将成为父元素,被添加的包裹则为子元素(个人理解)。
    查看全部

举报

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

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