慕课网

jQuery基础(二)—DOM篇

最热最新

Artffgyttvaei

<script type="text/javascript"> $("#bt1").on('click', function() { //.append(), 内容在方法的后面， //参数是将要插入的内容。 $(".content").append('<div class="append">通过append方法添加的元素</div>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()刚好相反，内容在方法前面， //无论是一个选择器表达式或创建作为标记上的标记 //它都将被插入到目标容器的末尾。 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content")) }) </script>

查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2018-03-22
Artffgyttvaei

$body.on('click', function() { //通过jQuery生成div元素节点 var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>") $body.append(div) }) on表示将事件绑定在body上，第一个参数click表示点击事件绑定到body对象，第二个表示冒泡到button则触发，第三个是触发的函数 on表示动作，估计下JQuery(三)里面有，click为某一具体动作，后面得function就是相应。也有单独拿出来的响应，直接添加函数就行 $body.on就是监听body标签的相当于js中的document.addEventListener appendChild与append的区别前者是js 中dom对象的方法，后者是jq中jq对象的方法，作用是一样的，后者是前者的封装 appendChild是原生js的用法，一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。 appendChild你可以理解为移动一个元素。 append()是jQuery的，前面是要选择的对象，后面是要在对象内插入的元素内容。

查看全部

0 采集收起来源：jQuery节点创建与属性的处理
2018-03-22
Artffgyttvaei

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。提示：如需移除事件处理程序，请使用 off() 方法。提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

查看全部

0 采集收起来源：jQuery节点创建与属性的处理
2017-12-11
Artffgyttvaei

本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）创建流程比较简单，大体如下：创建节点(常见的：元素、属性和文本) 添加节点的一些属性加入到文档中流程中涉及的一点方法：创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-12-11
Artffgyttvaei

addEventListener() 为 <button> 元素添加点击事件。当用户点击按钮时，在 id="demo" 的 <p> 元素上输出 "Hello World" : document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); addEventListener() 方法用于向指定元素添加事件句柄。提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

查看全部

0 采集收起来源：DOM创建节点及节点属性
2018-03-22
Artffgyttvaei

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = document.querySelector('selectors'); elementList = document.querySelectorAll('selectors'); 其中参数selectors 可以包含多个CSS选择器，用逗号隔开。 element = document.querySelector('selector1,selector2,...'); elementList = document.querySelectorAll('selector1,selector2,...'); 使用这两个方法无法查找带伪类状态的元素，比如querySelector(':hover')不会得到预期结果。

查看全部

0 采集收起来源：DOM创建节点及节点属性
2017-12-11
Artffgyttvaei

jQuery中的DOM 操作 1.查找节点 2.插入节点 3.删除节点 4.复制节点 5.替换节点 6.包裹节点

查看全部

0 采集收起来源：jQuery基础(二)—DOM篇课程介绍
2017-12-11
慕粉1347108007

prepend()是插入到匹配元素的第一个子元素前，append（）是插入到最后一个子元素后面。prependTo()和appendTo（），都是将要插入的内容放在前面，后面的选择器的表达式，比如$('<p>123</p>).prependTo($(#text)),也就是说在id选择器表达式前面加P元素。

查看全部

0 采集收起来源：DOM内部插入prepend()与prependTo()
2018-03-22
Amoureux_3

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数所以大体上了解3个重点： each是一个for循环的包装迭代器 each通过回调的方式处理，并且会有2个固定的实参，索引与元素 each回调方法中的this指向当前迭代的dom元素看一个简单的案例 <ul> <li>慕课网</li> <li>Aaron</li> </ul> 开始迭代li，循环2次 $("li").each(function(index, element) { index 索引 0,1 element是对应的li节点 li,li this 指向的是li })

查看全部

0 采集收起来源：jQuery遍历之each()
2018-03-22
Amoureux_3

理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点 <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> siblings()无参数

查看全部

0 采集收起来源：jQuery遍历之siblings()
2018-03-22
Amoureux_3

理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的prev兄弟节点 <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> prev()无参数

查看全部

0 采集收起来源：jQuery遍历之prev()方法
2018-03-22
Amoureux_3

例如：在div元素中，往上查找所有的li元素，可以这样表达 $("div").closet("li') 粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了起始位置不同：.closest开始于当前元素 .parents开始于父元素遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

查看全部

0 采集收起来源：jQuery遍历之closest()方法
2018-03-22
Amoureux_3

理解节点查找关系： <div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> 在li节点上找到祖辈元素div，这里可以用$("li").parents()方法注意事项： 1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找 2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2018-03-22
Amoureux_3

因为是父元素，这个方法只会向上查找一级理解节点查找关系： <div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> 查找ul的父元素div, $(ul).parent()，就是这样简单的表达

查看全部

0 采集收起来源：jQuery遍历之parent()方法
2018-03-22
Amoureux_3

理解节点查找关系： <div class="div"> <ul class="son"> <li class="grandson">1</li> </ul> </div> 代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。 .find()方法要注意的知识点： find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。 find只在后代中遍历，不包括自己。选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

查看全部

0 采集收起来源：jQuery遍历之find()方法
2018-03-22

首页上一页 90 91 92 93 94 95 96 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、有HTML/CSS基础 2、有JavaScript基础

老师告诉你能学到什么？: 1、jQuery的语法 2、jQuery节点操作