首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOM 高级工程师不完全指南

三年前我初入前端坑的时候,发现了一个叫做 jQuery 的宝贝,她有一个神奇的 $ 函数,可以让我快速选中某一个或一组 DOM 元素,并提供链式调用以减少代码的冗余。...如果页面上没有指定的元素时,返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合,它的传参和 document.querySelector...这是几年前的做法了,每当开发者需要替换两个 DOM 元素,除了需要拿到这必须的两个元素之外,还需要获取他们的直接父元素: ?...TextNode 替换掉原有的元素 移除 DOM 元素 和替换元素的老方法相同,移除元素的老方法同样需要获取到目标元素的直接父元素: ?...如同往常一样,如果想构造任何一个对象,那就 new 它的构造函数: ?

73610

DOM 高级工程师不完全指南

三年前我初入前端坑的时候,发现了一个叫做 jQuery 的宝贝,她有一个神奇的 $ 函数,可以让我快速选中某一个或一组 DOM 元素,并提供链式调用以减少代码的冗余。...如果页面上没有指定的元素时,返回 null 获取 DOM 元素集合 使用 document.querySelectorAll 可以获取一个元素集合,它的传参和 document.querySelector...这是几年前的做法了,每当开发者需要替换两个 DOM 元素,除了需要拿到这必须的两个元素之外,还需要获取他们的直接父元素: ?...TextNode 替换掉原有的元素 移除 DOM 元素 和替换元素的老方法相同,移除元素的老方法同样需要获取到目标元素的直接父元素: ?...如同往常一样,如果想构造任何一个对象,那就 new 它的构造函数: ?

72310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    bootstrapValidator 中文API

    返回表示该字段的jQuery元素的数组,或者null如果找不到这些字段。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法将返回所有字段的所有错误消息 validator 串 验证器的名称如果未定义验证器,则该方法返回所有验证器的错误消息...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法返回表单选项。 validator 串 验证器的名称如果未定义验证器,则该方法返回所有字段选项。...option 串 选项名称如果未定义,则该方法返回给定验证器的选项 getSubmitButton getSubmitButton(): jQuery - 返回显示点击的提交按钮的jQuery元素。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素 resetValue 布尔 如果true,该方法将字段值重置为空或删除检查/选择的属性(用于收音机和复选框)。

    13.2K50

    聊一聊 5 个关于JavaScript 中的 this 知识点

    1、它允许访问同一对象上的其他属性 在 JavaScript 中,函数可以是独立的单元,但它们也可以用作对象的值。 考虑下一个对象。...这指向了一些意想不到的东西,this.msg 给出了未定义的内容。 这是另一个例子。...它向下看它的父级元素来找到变量并使用它。 据说箭头函数没有自己的 this,它实际上是什么意思? 这意味着它看不起它的父级元素来找到变量并使用它。 看下面的例子。...即使在自执行函数返回后,它也可以访问此变量。 现在它不关心我们是否将 logMessage 作为函数或作为方法调用,它总是引用正确的 msg 变量。...好了,以上就是我今天这篇文章所要跟你分享的内容,如果您觉得有帮助的话,请记得点赞我,关注我,同时,将它与您的开发者朋友一起来分享它,也许能够帮助到他。

    61830

    2.基础核心学习

    而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象=属性+方法,所以我们在页面元 素选择或执行功能函数的时候可以这么写:  $(function(){}); //执行一个匿名函数 $(...:先获取元素后,返回某个对象在调用具体的功能函数,也就是说,jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。 ...三,对象互换  jQuery 对象虽然是 jQuery 库独有的对象,但它也是通过 JavaScript 进行封装而来的。我 们可以直接输出来得到它的信息。 ...也需要返回原生的 DOM 对象时: alert(document.getElementById('box')); //[objectHTMLDivElement] jQuery 想要达到获取原生的 DOM...,比如 prototype、还有我们 JavaScript 课程开发的 Base 库,都使用“$”作为 基准起始符,如果想和 jQuery 共容有两种方法:  1.将 jQuery 库在 Base 库之前引入

    34120

    Jquery 获取checkbox属性checked为undefined和改变状态 值不变

    截至 jQuery 1.6,.attr() 方法返回未定义的属性尚未设置。此外,.attr() 应该不用于普通对象、 数组、 窗口或文档。若要检索和更改 DOM 属性,请使用.prop() 方法。...属性和属性之间的差异可能是重要在特定情况下。在 jQuery 1.6 之前, 的.attr() 方法有时属性值时考虑检索一些属性,可能会导致不一致的行为。...到 jQuery1.6,.prop() 方法提供方法来显式检索属性值,而.attr() 检索属性。...’)来返回true和false 总结: (1)获取checked的方法     .attr('checked'):       .prop('checked'): //1.6+:true/false....attr("checked",true);       jquery1.6以上版本的:      .prop("checked",true);     .prop("checked","checked

    1.9K60

    JavaScript快速查找节点

    我们在实际的开发中,经常要获取页面中某个html元素,动态更新元素的样式、内容属性等。...                                             获取已知父节点的子节点数组(这里我在IE 7中获取的是所有直接的子节点) parentObj.children                                                 ...(节点值)分别返回节点的类型(比如元素节点返回1,属性节点返回2)、节点名称以及节点值; JS获取兄弟节点的两种方法  方法一:通过父元素的子元素先找到含自己在内的“兄弟元素”,然后在剔除自己 1 function...= elem)) 10 r.push(n); 11 } 12 return r; 13 } 在jQuery 1.2多的版本中都可以找到这段代码,我看的jQuery1.2.3...获取所有元素子节点  在JavaScript中,可以通过children来获取所有的子节点(只返回HTML中,甚至不返回子节点),几乎得到了所有浏览器的支持,但是在Firefox有的版本中不支持。

    2.2K110

    前端之jQuery

    3.1.2位置操作 offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移...和 .position()的差别在于: .position()是相对于相对于父级元素的位移。 获取滚动条位置示例: <!...':'English'}) jQuery.fn.init [p#p1] 这里需要说明attr属性无法动态获取属性,可以通过prop进行动态获取属性。...,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。...目的: 我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托,比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托,将事件绑定给按钮的父标签,这样当子标签

    4.9K21

    【JavaScript】网页交互的灵魂舞者

    我的主页:2的n次方_ 1....对象 JavaScript 中创建对象使用一组 { } ,里面的属性和值通过键值对来组织,键值对之间使用逗号分割,键和值之间用冒号区分,获取对象的属性也是通过 ' . ' 来获取,还可以通过 ' [ ]...this 去修改一些属性的值 3. jQuery jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作 基础语法:$(selector).action() $( ) 是 jQuery...的代码通常都写在 document ready 函数中 ,这样可以保证在文档加载完之后才能对页面进行操作 JQuery⽅法 说明 text() 设置或返回所选元素的⽂本内容 html() 设置或返回所选元素的内容...(包括 HTML 标签) val() 设置或返回表单字段的值 text() 我是一个文本 <

    8010

    jQuery基础

    对象 1.什么是jQuery对象 jQuery对象是一个伪数组 2.什么是伪数组 有0-length-1的属性,并且有length属性 jQuery的静态方法 each方法和 map方法 jQuery...作用:获取或者设置属性节点的值 可以传递一个参数,也可以传递两个参数 如果传递一个参数:代表获取属性节点的值...如果传递啷个参数,代表设置属性节点的值 注意点: 如果是获取:无论找到多少个元素都只会返回第一个元素指定的属性节点的值...注意点: 如果是获取:无论找到多少个元素都只会返回第一个元素指定的属性节点的值 如果是设置:找到多少个元素就会设置多少个元素...的尺寸和位置操作 1.offset():用来获取和设置相当于body的偏移位 2.position():用来获取相当于父元素的偏移位 使用示例如下 <!

    1.7K20

    jQuery

    jQuery特性 隐式迭代 链式编程,在于一个方法返回的是一个jQuery对象,既然是jQuery对象就可以点出jQuery的方法来 window.onload 资源加载完成时调用 $(function...获取和设置文本内容 text() 方法不写参数获取文本 text() 方法写参数设置文本 如果设置的文本中包含标签,是不会把这个标签给解析出来的$('#div1').text('我是新设置的文本我是链接') //我是新设置的文本我是链接 css() 设置和获取样式 获取样式属性值 $("#div1").css("width"); 设置的是行内样式$('#div1...').css('width', '300px') $('#div1').css('height', 300) 设置多样式$('#div1').css({ //属性可以不加引号 //如果是复合属性则必须采取驼峰命名法...:even $(li:even) 获取到的li元素中,选择所要为偶数的元素 ##### jQuery筛选选择器(方法) 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法

    1.1K20

    前端无法让我冷静

    行内标签和块标签有哪些以及都有什么特点 块标签 每一个块属性标签都是从新的一行开始,而且之后的元素也都会从新的一行开始 可以设置宽度、高度,行高,距顶部距离,距底部距离 块属性标签的宽度假如不做设置,会直接默认为父元素宽度的...data-为H5新增的为前端开发者提供自定义的属性,这些属性集可以通过对象的 dataset 属性获取,不支持该属性的浏览器可以通过 getAttribute 方法获取 什么是浏览器的标准模式和怪异模式...第一种,父子组件通信 一.父组件向子组件传值 二.子组件向父组件传值或更新父组件值 vuex 状态管理模式、集中式存储管理 介绍一下CSS的盒子模型 盒模型:内容(content)、填充(...清除浮动方法总结 父元素高度塌陷了 在父元素的最后加一个冗余元素并为其设置clear:both 采用伪元素,这里我们使用:after 使用overflow属性,给父元素添加overflow:hidden...pop()用于移除数组末尾的最后一项,然后返回移除的项 unshift:将参数添加到原数组开头,并返回数组的长度 shift():删除原数组第一项,并返回删除元素的值 HTTP协议的理解、TCP/IP三次握手

    2.5K40

    浅谈JavaScript

    事件属性设置了也个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的window.onload更快。...); }) jQuery选择器 1、jQuery选择器的介绍 jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样 2、jQuery选择器的种类 标签选择器 类选择器 id选择器...value属性和设置value属性还可以通过val方法来完成 2、小结 获取和设置元素属性的操作可以通过prop方法来完成 获取和设置元素的value属性可以通过val方法来完成,更加方便 jQuery...(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。...$div = $("div"); $btn.click(function(){ alert('我是按钮'); //扩展:取消事件冒泡,就是不让事件向父级控件传递

    3.2K30

    jQuery

    参数只写属性名,则是返回属性值 >$(this).css(''color''); 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号 >$(this...1.获取 prop('属性'); 2.设置 prop('属性', '属性值'); 设置或获取元素自定义属性值 用户自己给元素添加的属性,我们称为自定义属性。...()/scrollLeft() 1.offset() 设置或获取元素偏移 offset() 相对于文档的偏移坐标,跟父级没有关系。...可以设置元素的偏移:offset({ top: 50, left: 50 }); 2.position() 获取元素偏移 position() 返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位...该方法有2个属性 left、top。position().top 获取距离定位父级顶部的距离,position().left 获取距离定位父级左侧的距离。 该方法只能获取。

    21.1K50

    【说站】js使用构造函数的缺点

    js使用构造函数的缺点 1、不是原型链继承,只是借用构造函数,所以不能继承原型的属性和方法。 2、虽然构造函数中定义的属性和方法是可以访问的,但是每个实例都被复制了。...实例 // 父构造函数 function Father() {     this.name = 'father'     this.speakName1 = function () {         ... 方法 Father.prototype.alertName = function () {     console.log(this.name) } // 父原型上 属性 Father.prototype.age...,实例中未定义 console.log(c1.age) // undefined   // 可以访问实例属性,但是每个实例都存有自己一份 name 值 console.log(c1.name) // father...更多js学习指路:js教程 推荐操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

    1.8K20

    Jquery简介选择的

    大家好,又见面了,我是全栈君 前言 Jquery一个js相框(程序代码相结合)这是一个程序开发过程中的半成品;分类似该框架EXTJS。...[attribute] 匹配包括给定属性的元素。注意,在jQuery 1.3中。前导的@符号已经被废除!假设想要兼容最新版本号,仅仅须要简单去掉@符号就可以。...[attribute=value] 返回值:Array 概述 匹配给定的属性是某个特定值的元素 參数 attribute String 属性名 value String...不包含select中的option;varc = ops[e.selectedIndex].value;通过获取当前訪问的option对象在数组中的位置。...(s) > 假设某个元素是父元素中唯一的子元素,那将会被匹配 假设父元素中含有其它元素,那将不会被匹配。

    1.6K20

    使用ES6解构赋值和默认参数特性简化JavaScript代码

    这个优化不仅能让我们的代码更简洁,还能提高可读性和维护性。原始代码在我之前的项目中,我写了这样一段代码:let course_id = 0;if (options.course_id !...= undefined) { course_id = options.course_id;}这段代码的目的是从一个可能未定义的对象 options 中获取 course_id 值。...问题尽管这段代码能够正常工作,但它的可读性并不高,且包含了一个显式的条件判断。在JavaScript中,还有更简洁的方式来实现相同的功能。...默认参数:course_id = 0 这部分代码表示,如果 options 对象不存在或者 options.course_id 属性未定义,则将 course_id 的值默认为0。...如果 options 是 undefined 或 null,则返回一个空对象 {},从而避免了访问未定义对象属性的错误。好处这种写法的好处是显而易见的:简洁性:一行代码代替了多行代码,减少了代码量。

    11010
    领券