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

jQuery基础(二)—DOM篇

Aaron艾伦 Web前端工程师
难度入门
时长 2小时17分
  • closest(),首先从本身开始向上匹配,若匹配到符合要求的第一个,即停止匹配。 .parents(),从元素父级一直向上匹配,找出所有匹配的符合要求元素
    查看全部
  • 用append和appendTo插入到目标位置时,原始位置的节点和内容也会消失。
    查看全部
  • 用动态p标签插入时,会发现一个问题:他并没有插入到li中,结构是分散的。而用p标签插入的时候是真正的把p标签插入到li中作为一个整体。而且在用appendTo插入到其他位置后原始位置ui里面的节点和内容也消失了
    查看全部
  • .each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)
    查看全部
  • add()将元素追加到匹配元素集合中 例子:同时选择两个id对象 当用jQuery要选择demo1标签时,会用到下面代码:$('#demo1"); 当用jQuery选择demo1和demo2,不要告诉我用$('div')。 这时就要用到标题中提到的方法,jQuery add方法:追加标签。 代码如下 $('#demo1").add('#demo2");
    查看全部
  • add()与append()不一样,add()是指在JQuery对象集合中增加一个对象,而append()是在DOM集合中增加一个节点。add()不会直接影响界面,append()会对界面产生影响。
    查看全部
  • .children() 找儿子 .find() 找后代 .parent() 找爸爸 .parents() 找长辈(直接遍历到根元素,可能返回零个或一个或多个元素) .closest() 找长辈(从当前节点向上遍历,找到停止,返回零个或一个元素) .next() 找小弟 .prev() 找大哥 .siblings() 找兄弟
    查看全部
  • .next()和.prev()方法传入选择器,筛选的是合集中的元素而不是选择的元素
    查看全部
  • $('.item-2').next(':first') 所有找到的元素中的第一组
    查看全部
  • next():查找下一个兄弟元素
    查看全部
  • .closest(),首先从本身开始向上匹配,若匹配到符合要求的第一个,即停止匹配。 .parents(),从元素父级一直向上匹配,找出所有匹配的符合要求元素。
    查看全部
  • parent只会查找一级,parents则会往上一直查到查找到祖先节点 children():向下找儿子 parent():向上找爸爸 parents():向上找祖宗 find():向下查找后代
    查看全部
  • parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素,通过parent是匹配合集中每一给元素的父元素(因为是父元素,这个方法只会向上查找一级) parent()也可接受选择器作为参数
    查看全部
  • .find()和.children()方法是相似的 1.children只查找第一级的子节点 2.find查找范围包括子节点的所有后代节点 .find()方法要注意的知识点: find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。 与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。 find只在后代中遍历,不包括自己。 选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
    查看全部
  • <p>p元素</p> <p>p元素</p> 给所有p元素增加一个div包裹 $('p').wrapInner('<div></div>') 最后的结构,匹配的p元素的内部元素被div给包裹了 <p> <div>p元素</div> </p> <p> <div>p元素</div> </p> 或者: $('p').wrapInner(function() { return '<div><div/>'; })
    查看全部

举报

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

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