# 2. height() 方法描述:获取内容元素 height 的值。 # 3. innerWidth() 方法描述:获取内容元素 width+padding 的值。...; i++) { console.log(prevs[i]); } # 5. next() 方法描述:获取集合中每个匹配元素紧邻的后一个兄弟元素,可以提供一个可选的选择器来进行筛选。...需求描述:获取 id 为 two 元素的后一个兄弟元素并输出 我是段落1 列表项1 列表项2...3 $('ul>li').eq(1).css('background', 'red'); # 3.3.2.4not() 方法描述:从匹配的元素集合中移除指定的元素。...需求描述:为 ul 下的所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li 时,所对应的 li 背景变为红色 1111 2222</
事件冒泡是指当一个元素上的事件被触发后,该事件会从该元素开始向上冒泡,直到传播到文档对象,并且可以被其他元素捕获。默认情况下,事件是先捕获后冒泡。...例如,如果有一个包含多个按钮的列表,并且希望在单击每个按钮时执行相同的操作,可以将单击事件监听器添加到列表元素上,并使用事件对象来获取单击的按钮。...这个方法可以确保事件先冒泡后获取,因为事件处理程序在一小段时间后执行,以便事件有时间传播到父元素。...如果是,我们就会在控制台中记录被单击的按钮的文本内容。由于我们使用了事件委托,因此无论用户单击哪个按钮,事件处理程序都会在 myList 元素上执行,并且事件对象中包含有关被单击的按钮的信息。...这确保了事件先冒泡后获取,因为我们将监听器添加到父元素上,而不是每个子元素上。 总结 在事件处理中,事件冒泡和事件捕获是两种常见的事件传播机制。默认情况下,事件先捕获后冒泡。
type:指定下拉菜单的类型是单选还是多选 text:指定下拉菜单选项的文本值 select:声明是否被选中 options:选项数组 a、单选下拉菜单 例子 form...id="myList">咖啡红茶 单击按钮将项目添加到列表中,从而创建一个节点 咖啡红茶 开水牛奶 单击该按钮将一个项目从一个列表移动到另一个列表...id="myList">咖啡红茶牛奶 单击按钮移除列表的第一项,从而完成删除节点操作 咖啡红茶 开水牛奶 单击按钮将项目从一个列表复制到另一个列表中
删除 熊大 熊二 光头强 // 1.获取元素 var...(li); ul.insertBefore(li, ul.children[0]); // (3) 删除元素 删除的是当前链接的li 它的父亲...IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。...> 1.3.6 阻止默认行为 html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。...动态新创建的子元素,也拥有事件。 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手!
// 1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector...// ul.appendChild(li); ul.insertBefore(li, ul.children[0]); // (3) 删除元素...IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。...阻止默认行为 html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。...动态新创建的子元素,也拥有事件。 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手!
2.parent > child 子元素选择器:在给定的父元素下匹配所有的子元素 3.prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素 4.prev ~ sibings...) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素,从 0 开始计数 :odd 匹配所有索引值为奇数的元素,从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt...设置和获取起始标签和结束标签中的内容 text() 跟innerText一样。 设置和获取起始标签和结束标签中的文本 val() 跟value属性一样。 专门用来操作表单项的value属性。...东京 首尔 你喜欢哪款单机游戏?... IOSAndroidWindows Phone
那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。 ...> abc abc abc var ul...以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。...动态新创建的子元素,也拥有事件。 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手!
那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。 ...> abc abc abc var ul...html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。...动态新创建的子元素,也拥有事件。 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手!
总结 除了document.getElementById()方法返回的是拥有指定id的元素外,其他方法返回的都是符合要求的一个集合。若要获取其中一个对象,可以通过下标的方式获取,默认从0开始。...除此之外,元素对象还提供了children属性用来获取指定元素的子元素。例如,获取上述示例中ul的子元素。...元素对象的children属性返回的也是对象集合,若要获取其中一个对象,也需通过下标的方式获取,默认从0开始。...因此,推荐在 开发时尽可能的使用innerHTML获取或设置元素的文本内容。...> PHP JavaScript C++ Java // 获取第2
"li:gt(2)").addClass("highlight"); //$("li:lt(2)").addClass("highlight"); //获取所有的h标签 //var hs = $("h1...ul节点任何位置都会触发click事件 完善点2:为二级菜单添加连接,单击后将相关页面在类似与iframe中显示 jQuery(function() //$(document).ready(function...; //找到当前ul下所有li子元素集合 toggle() 切换的显示和隐藏 //ulNode.children("li").toggle("slow"); //完善点一 方法一、nextAll() prevAll...()所有li兄弟元素 ulNode.nextAll("li").toggle("slow"); //方法二、parent() 父元素 //ulNode.parent().children("li").toggle...将临时变量的值赋给input输入域的value值 7、将该input元素插入到当前td中 8、取消绑定到该td上的click事件 完善点1:修改后单击回车键,修改过的值写入td,input消失, 重新单击时
DOM事件流 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。...冒泡阶段 我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡...> abc abc abc var ul...html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。...动态新创建的子元素,也拥有事件。 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手!
12、事件: 所谓事件,就是鼠标单击、鼠标滚动之类动作,主要事件列表如下: 事件 说明 onclick 鼠标单击 onmouseover 鼠标经过 onmouseout 鼠标移开 onchange 文本框内容改变...(2) 文本节点:向用户展示的内容,如...中的JavaScript、DOM、CSS等文本。 ...属性节点的 nodeValue 是属性的值 (3)、 nodeType :节点的类型,是只读的,常用的几种结点类型如下表: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9...案例: javascript HTML/CSS jQuery <script...li } var node = document.getElementsByTagName("ul");//获取ul的子节点 var result = node[0].childNodes.length
样式的值 " jq对象.css("属性名称");" - 获取元素的宽和高 - jq对象.width() - jq对象.height() - 扩展:...- attr():设置或者获取元素的属性 - 设置属性(给标签添加属性) - 格式1:设置单个属性 "jq对象.attr("属性名","值");...- prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物) - class操作 了解 - 元素.addClass...和text区别 "设置内容: html可以将内容解析,text只是作为普通文本 获取内容:html获取所有源码内容,text只是获取文本内容" - 文档处理 - 内部插入..." name="chongqing">重庆 反恐 <li
先规划好这个JQuery组件的属性: InputName:文本框的name和id属性,默认值是“Q”; ButtonText:右侧按钮的文字,默认值是“示例”; ReadOnly:文本框的可编辑性属性。...MaxHeight的实现:判断下拉菜单(元素UL)的高度是否超过MaxHeight,若超过则设置CSS属性Height和Overflow onSelect函数:要自己实现一个函数,参数有两个值,第一个值是文本框的名字...//如果设置了Selected参数,则获取该条目的ItemDada和ItemText。...="") { SetData(SelText,SelData); } //给所有的条目绑定单击事件,单击后调用设置活动条目的函数 Obj.find...=Obj.find("ul"); if (UL.height()>o.MaxHeight) { UL.css({ 'height':o.MaxHeight
、文本节点、属性节点 能够获取指定元素的父元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createElement创建页面元素 1.1....自定义属性操作 1.5.1 获取属性值 ?...获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) element.getAttribute('属性...设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs';...子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 console.log(ul.childNodes); console.log(ul.childNodes
Vue指令 v-text指令 v-text指令用于设置标签的文本值,有两种设置标签文本值的方式,方式一就是通过v-text指令向标签传入值,但这种传入方式会整个替换掉标签内的全部文本信息,如果我们需要特殊化的修改某一部分文本值...--获取到data中的布尔值数据--> 通过data获取布尔值:允许显示 {{item}} ... ID:{{index}},用户名:{{item.usr}},密码:{{...,同样的,item是可以随意命名的,index即为该对象在数组中的索引值 v-model指令 v-model指令用于设置和获取表单元素中的值(双向数据绑定),即将数据绑定到对应元素后,随元素对数据的更改
属性可以获取到当前元素所有子元素,不包括文本节点 区分概念: 节点包括文本节点,而元素不包括文本节点 firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素...抽离出按钮点击函数的小案例 parentNode :获取一个元素的父元素 innertext :获取到一个标签里面的文本内容 获取兄弟节点,也可能会获取到空白节点 获取兄弟元素 节点的属性 通过nodevalue...,而其他浏览器都是9个 ---- children属性可以获取到当前元素所有子元素,不包括文本节点 ---- 区分概念: 节点包括文本节点,而元素不包括文本节点 ---- firstChild获取当前元素第一个子节点...等,尽管解决了返回顶部的问题但仍存在其他缺陷 (3)事件处理函数的工作机制中,在给某元素添加事件处理函数后,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回值被传递给事件处理函数...>新增超链接"; } //为ul绑定一个单击响应函数 u.onclick=function(event
获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) element.getAttribute('属性') get得到获取...设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs'; // (2) element.setAttribute('...子节点 所有子节点 子元素节点 我是li 我是li 我是li...我是li // DOM 提供的方法(API)获取 var ul = document.querySelector...子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 console.log(ul.childNodes); console.log(ul.childNodes
/* 子菜单项 */ .st_tree ul ul li a{ font-size: 17px; } /* 子子菜单项 */ .st_tree ul ul ul li a{ font-size: 16px...).parent("li").click(); return false; }); /* 菜单项 接受单击 */ this.find("li"...(1)比如一些位置的知识: jquery获取元素位置的方法有两个: position方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。...使用: $("#target").position().left; $("#target").position().top; offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于...使用: offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于document对象的偏移位置。 使用: (2)CSS 伪元素 ?
,每个元素执行一次。...ul下的li var citys = $("#city li"); /* //2.遍历li for (var...()); //3.2 获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)... 北京 上海 天津 重庆 3 JQuery事件绑定 JQuery事件绑定方式包括: 1)JQuery标准的绑定方式:JQuery对象
领取专属 10元无门槛券
手把手带您无忧上云