如果目标元素上存在其他条件，则可以省略通用选择器。此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。 例： 则将id属性设置为的元素文本呈现为红色error。 2. class类选择器 类选择器可用于选择具有class属性的任何HTML元素。具有该类的所有元素将根据定义的规则进行格式化。...例如，可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。...例： ul > li { list-style: square; } ul > li ol { list-style: none; } ul > li仅适用于li>作为ul>元素直接子元素的那些元素，并且对其他列表元素没有影响。 2.3 分组选择器 样式表中的多个选择器通常共享相同的样式规则声明。
如果页面中只有一个标签，返回的还是伪数组的形式。 如果页面中没有这个元素，返回的是一个空的伪数组。 还可以获取某个元素（父元素）内部所有指定标签名的子元素。...节点层级 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系 1.父级节点 node.parentNode parentNode属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回...实际开发中的解决方案，既没有兼容性问题又返回第一个子元素或最后一个元素。...('li'); //2.添加节点 node.appendChild(child) node父级，child子级，后面追加元素，类似于数组中的push var ul = document.querySelector...li，添加到ul里面创建li的同时，把文本域里面的值通过li.inn...
当参数类型为数组(类似上面例子中的4)的时候，再对该参数进行遍历，如果该参数中的元素存在nodeType属性则将该元素推进数组arr， 如果该参数中的元素是一个Zepto对象,则调用get方法，将arr...并且如果需要插入的元素数组的长度小于1，那么也就没有必要继续往下走了，直接return this进行链式操作。...并且递归的将node节点的子节点，交给fun去处理。 接下来继续看。 首先通过$.contains方法判断parent是否在document文档中，接着需要满足一下几个条件才去执行后续操作。...需要注意的地方是cloneNode方法不会复制添加到DOM节点中的Javascript属性，例如事件处理程序等，这个方法只复制特性，子节点，其他一切都不会复制，IE在此存在一个bug，即他会赋值事件处理程序...> ul class="box"> li>1li> li>2li> ul> 可以看到原来ul结构还是存在，仿佛是复制了一份ul及其子节点到wrap中被包裹起来。
|使用标签选择元素，优先级最低，使用最广泛| 类选择器 ： .类名> |.class{...}|根据class值选择元素| id选择器 | #id{...}...需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。...与E[att^=value]选择器一 样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。...该选择器与前两个选择器一样，E元索也可以省略，如果省略则表示可以匹配满足条件的任意元素。...:empty选择器 :empty选择器用来选择没有子元素或者文本内容为空的所有元素。
我们先来找到ul标签中的所有li标签。来试一下该怎么写！ $(“ul>li”) 之前说到的层级选择器，父级标签下的所有子标签。...= 但是这种写法有点小瑕疵，如果我的标签中没有title属性怎么办？是不是也会被选中。...2.1 children():子标签中找 子标签，在子标签中匹配符合条件的标签 现在我们假如要找到ul的所有li子标签。用我们之前讲过的写法该怎么写？...我们可以先找到ul的所有子标签： $("ul").children().css("background","yellow"); 现在获取到了ul的所有子标签，再查找到子标签中的li标签： $("ul")...我们来看一下 怎么写的： ("li>新加入的数据li>").appendTo( 3.2 Prepend():将内容添加到指定元素前面 那么如果要追加到前面去呢？
.选择 name 属性为 yan 的 input 元素 $('input[name=yan]') 如果一类元素范围太广，需要更精确一些呢？...，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...ul id="list"> li>1li> li>2li> li>3li> li>4li> li>5li> ul> 事件委托的写法...ul id="list"> li>1li> li>2li> li>3li> li>4li> li>5li> ul> 3.3 Dom
>元素的子节点添加到DOM节点树上。...把新建节点添加到DOM树中JQuery代码如下： ("ul").append( 添加后页面中只能看到li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。...("li title='芒果'>芒果li>") 该方法将查找元素ul然后将新建的li元素作为ul子节点，且作为ul的第一个子节点插入到ul中。 ...;该救命去除掉p元素的ul类样式。 ...closest()方法()用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空JQuery对象。
父级节点 1....父级节点 node.parentNode 1>parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 2>如果指定的节点没有父节点则返回 null 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] li>我是li1li>...添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 var ul = document.querySelector('ul')...如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
如果新旧虚拟dom都存在children，进行updateChildren 否则将新虚拟dom的children，插入到旧的虚拟dom当中 三、updateChildren进行虚拟dom子元素children...的比较 新旧虚拟节点比对（对撞指针） 在这里要使用 4 个指针,从1-4的顺序来开始命中优化策略，命中一个，指针进行移动(新前和旧前向下移动，新后和旧后向上移动)，没有命中，就使用下一个策略，如果四个策略都没有命中...Map中 如果Map中有newStartVnode的key，将对应的真实dom插入到 oldStartVnode 的前面 如果没有，创建元素，也插入到 oldStartVnode 的前面 如果while...循环结束，oldChildren 还没有走完，全部删除 如果while循环结束，newChildren 还没有遍历完，插入到 newEndVnode 之前 结束 用index做key 按理说，a，b，c...let vnode3 = h("ul", {}, [ // h("li", { key: "E" }, "E"), h("li", { key: "Z" }, "Z"), h("li", {
，那问题来了，怎么才算是同一类型节点呢？...如果oldVnode有子节点而newVnode没有，则删除el的子节点 如果oldVnode没有子节点而newVnode有，则将newVnode的子节点真实化之后添加到el 如果两者都有子节点，则执行updateChildren...} else if (newCh) { // 新虚拟节点有子节点，旧虚拟节点没有 // 创建新虚拟节点的子节点，并更新到真实DOM上去 createEle(newVnode...) } else if (oldCh) { // 旧虚拟节点有子节点，新虚拟节点没有 //直接删除真实DOM里对应的子节点 api.removeChild(el...就是首尾指针法，新的子节点集合和旧的子节点集合，各有首尾两个指针，举个例子： ul> li>ali> li>bli> li>cli> ul> 修改数据后
程序中使用，没有缩进。体积小一些。...复合属性选择器 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器 过滤选择器 首元素选择器 语法： :first 获得选择的元素中的第一个元素 尾元素选择器 语法： :last...属性值 toggleClass():切换class属性 toggleClass(“one”): 判断如果元素对象上存在class=“one”，则将属性值one删除掉。...如果元素对象上不存在class=“one”，则添加 css(): CRUD操作: append():父元素将子元素追加到末尾 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾...prepend():父元素将子元素追加到开头 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头 appendTo(): 对象1.appendTo(对象2):将对象1添加到对象2
程序中使用，没有缩进。体积小一些。...语法：$("#id的属性值")获得与指定id属性值匹配的元素 类选择器。语法：$(".class的属性值")获得与指定的class属性值匹配的元素 并集选择器。...语法：$("A B ")选择A元素内部的所有B元素 子选择器。语法：$("A > B")选择A元素内部的所有B子元素 （3）属性选择器 属性名称选择器。...例如：toggleClass("one"):判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象不存在class="one"，则添加。...3、CRUD操作 1. append()：父元素将子元素追加到末尾 * 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾 2. prepend():父元素将子元素追加到开头
这是两条评论的列表的HTML，没有任何回复。 如果对其中一条评论进行回复，那么将会添加一个新的 ul>。 ul> li> 类来检查一个 li> 元素是否包含一个 ul>，如果是，则应用所需的CSS样式。...li> ul> 我们需要为每个 元素应用以下条件的样式： 它是 li> 元素的直接子元素 li> 元素有一个 ul> 作为子元素 父元素的 depth 属性为 0...CSS变量 + 样式查询 + :has 伪类 = 一个强大的条件样式。...表情符号回复状态 当用户添加仅由表情符号组成的评论时，评论容器将会有一些变化： 没有背景颜色 没有内边距 这是使用CSS :has伪类的一个绝佳用例。
如果只传入selector,则会返回第一个匹配的元素.如同时传入了context,则只会寻找context的子节点....li class="item-3">3li> ul> li> li class="item-c">Cli>...ul> li> li class="item-iii">IIIli> ul> ...find: find方法通过传入的一个参数来筛选出zepto对象符合条件的子节点集合并返回。...首先判断是否传入选择器，如果没有则直接返回一个空的zepto对象； 如果选择器为一个对象，则将对象转换为zepto对象，然后通过filter筛选出一些匹配的节点，并存入result集合； 如果调用find
如果使用了那些过于复杂的Emmet语法。是不是我们就失去了一开始的偷懒的初心呢？虽然看起来很牛逼，但是没有必要。所以，我仅在下面举例一些比较常用，和普通程序员可能用到的使用方式。...ul>li>li>3.生成上级元素：^tag1^tag2表示在标签(元素)tag1的父级后生成兄弟标签(元素)tag2，如果有两个...li>li>ul>5.生成类名和id：....和#tag1.classname1表示给标签(元素)tag1添加类名classname1，可添加多个类名，若没有写tag1则默认创建一个类名为classname1的div创建带有指定class样式的标签...数字从0开始@n可以让数字从n开始$需搭配*使用，否则将会原样输出ul>li.$*31效果ul> li class="1">li> li class="2">li> li class
IE事件处理程序: IE(以及Opera)实现了attachEvent()和detachEvent()方法进行事件绑定与解绑，绑定事件会被添加到冒泡阶段。...attachEvent可以绑定多个事件,与dom2类似。 好了,回到本文主题,关于阻止浏览器默认行为。...id="parent_element"> ul>parentul> ul> li>1...4li> li>5li> ul> ul> js/script.js: $(function () { $('#parent_element...如果答案为否,没有执行过event.preventDefault(), 那么此event的浏览器默认行为将被执行。 这个解答对应StackOverflow上的一个问题。
1.insertBefore添加元素到指定位置 ul id="ul"> li>1li> li>2li> li>3li> ul> ul id="sel">...ul.insertBefore(li, ul.children[0].nextElementSibling);//添加到指定元素后面 2.appendChild 添加子节点到父节点的末尾...('li'); li.innerText = 'abcd'; //把li插入到ul的第一个位置 var ul = document.getElementById...var sel = document.getElementById('sel'); //如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身....//本来div节点会被添加到#ul上,但是sel.添加了div,所以#ul没有div节点 sel.appendChild(div); //将原来div的位置 添加到 #sel中,原先的会消失 //
submit() 提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...: 网页文档的根/根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据 使用追加函数追加节点 子级追加: append()和appendTo()：在现存元素的内部，从后面放入元素...// 步骤：1、声明变量保存节点数据；2、使用追加函数追加节点 var $li = $('li>2222li>') // ul子级追加 // $li.appendTo...($('ul')) //结尾追加 // $('ul').append($li) // $li.prependTo($('ul')) // 开头追加 /
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
