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

JS DOM学习笔记

setTimeout只执行一次,setInterval可以不断的执行无数次 6、onload(页面加载后触发):网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素...,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。...中使用srcElement; 在FireFox里使用target 使用Dom获取和更改网页标签元素内文本,在IE中使用innerText; 在FireFox里使用textContent 动态为网页或元素绑定事件...,在IE中绑定事件的方法是attachEvent; 在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器上Dom的不同 14、jQuery...的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在Dom元素创建完毕后被触发

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

    HTML中拖放介绍

    1.在jQuery UI里面会经常使用Draggable和Droppable,实现Web开发中拖放效果,当然这不是原生条的拖放,所以在处理复杂的拖放上还是需要自己动手写很多代码,最近开发中就遇到这个问题...没有具体开发过mobile web应用,不知道jQuery UI的draggable和droppable是否支持手机上的触摸操作。...需要在Web页面拖放元素,需要使用到下面的方法,大多数是和鼠标有关的事件 事件 说明 备注 mousedown 用户按下鼠标开始操作 需要判定是拖放还是单击?...mouseup 释放鼠标按键,可能会触发放置操作 基于鼠标起始位置,是否放置在此位置 弊端: 1.需要考虑边界,而已需要提示哪里位置可以放置元素 2.不能将自己的页面的元素与其他页面,或者窗口、浏览器中其他内容合并或者交互...3.无法与用户的桌面交互,也无法跨浏览器窗口 第二阶段: 大家觉得用DOM和Javascript事件处理拖放操作很复杂,所以就有很多公司使用Flash去完成这个任务。

    3.1K100

    JavaScript学习笔记(五)——Ajax

    jQuery与Ajax的综合应用 Ajax是 Asynchronous JavaScript And XML 的缩写,意思是异步的JavaScript和xml,他是基于JavaScript和HTTP请求的一种网页编程模式...GET和POST模式: GET方式一般用来传送简单数据,大小限制在1kb以下,请求的数据被转化成查询字符串并追加到请求的URL之后发送; POST可以达到2MB,他是将数据存放在send方法中发送,在数据发送之前必须先设置...]); 参数同get serialize()序列化表单 在jQuery中,可以使用serialize函数将表单数据序列化为键值对,创建url编码文本字符串进行提交。...() jQuery插件的应用于开发 jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。...此方法大大简化了使用ajax提交表单时的数据传递问题,不需要逐个地以JavaScript的方式获取每个表单属性的值。

    1.9K10

    【JS】1724- 重学 JavaScript API - Drag and Drop API

    如何使用 使用拖放 API 主要包括以下 3 个步骤: 「定义可拖拽的(draggable)元素」:将需要拖动的元素标记为可拖拽,并指定相应的事件处理逻辑。...当拖动 drag-source 元素时,使用 event.dataTransfer.setData() 方法设置了拖动数据,而放置目标元素时,执行 drop事件监听的回调方法,实现被拖动的元素添加到可放置元素底下...在放置目标容器上,我们使用 dragover 事件阻止默认行为并添加一些过渡样式,使用 dragleave 事件移除过渡样式,使用 drop 事件在放置目标容器中追加拖动的图片元素。...No jQuery or framework required. dragula[8]: 21.6kk⭐,简化拖放操作的 JavaScript 库,浏览器支持包括所有常用浏览器和**IE7+**,框架支持包括...使用现有的拖放库或框架,以简化拖放操作的实现。 注意性能问题,特别是在处理大量拖放元素时。 考虑移动设备上的触摸操作,确保拖放功能在移动设备上的可用性和易用性。

    29820

    浏览器中的JavaScript:文档对象模型与 DOM 操作

    在技术圈中,我们将这些指令称为 DOM 操作。 当以这种方式创建和操作元素时,我们谈论的是“命令式” DOM操作。现代前端库正在通过支持“声明”方法来解决这个问题。...在创建、修改、删除 HTML 元素时,我们会碰到 “DOM 操作”。在过去即使对于更简单的任务,我们也要依赖于 jQuery,但今天本机 API 已经互相兼容并且足够成熟以使 jQuery 过时。...虽然 jQuery 不会很快的消失,但每个 JavaScript 程序员都必须知道该如何使用本机 API 去操作 DOM。...DOM 中可用的每 个HTML 元素都有一个暴露一定数量属性和方法的接口。如果对使用什么方法有疑问,可以参考 MDN上的优秀文档。...操作 DOM 最常用的方法是 document.createElement() 用于创建新的 HTML 元素,document.createTextNode() 用于在 DOM 内创建文本节点。

    65810

    jQuery基础(五)一Ajax应用与常用插件-imooc

    在浏览器中显示的效果: 使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript...为调用插件方法时的配置对象 jQuery Autocomplete 使用详细说明 例如,当用户在文本框输入内容时,调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据,显示在文本框下...拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector)....3-2放置插件——droppable 除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下: $(selector...在列表元素中,鼠标在列表项元素移动时,可以自定义其获取焦点(focus)时的背景颜色,即设置表项元素选中时的背景色.

    16.6K20

    面试100题及答案_三特点带你认识基层岗位常见面试题

    如果变量通过var声明,但是并未初始化的时候,变量的值为undefined。 第23期:在jquery中,想要移除指定的DOM节点元素,使用的方法是:?...答案:1,2,3;数组的操作方法join是用来将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串的。不指定分隔符,默认的是逗号分隔。所以是:1,2,3。...第60期:在DOM对象中,实现创建元素节点的方法是: ? 答案:createElement()方法,用于创建一个指定元素,所有主要浏览器都支持此方法。...第67期:在JavaScript数组中,实现对数组的元素进行排序的方法是: ? 答案:sort( );方法,注意,数组在原数组上进行排序,不生成副本。...答案:onkeyup事件,onkeyup 事件会在键盘按键被松开时发生。 第73期:在事件对象中,表示网页被加载完成的事件是: ?

    1.1K10

    JavaScript的理解记录(5)

    ,返回一个NodeList对象或Element;功能与JQuery类库中的()相似,两者参数相同,不同的是:()返回值为一个JQuery对象表示匹配的元素集,JQuery对象是一个类数组,可以用标准的数组标示方括号来访问...    5、 节点的增删:操作文档进行文档节点的增加和删除          1、创建节点:document.createElement() 参数为不区分大小写的标签名(对于HTML),对XML文档会区分大小写...;第二种方法是复制已存在的节点,每个节点都有一个cloneNode()方法放回节点的副本;          2、插入节点:使用Node的方法appendChild()和insertBefore();...第二个参数是该父节点的子节点,可以为null,为null是功能与appendChild相同;                如果使用以上两个方法再次插入已经存在的节点,已存在节点将会自动从它的当前位置删除并在新的位置从新插入...         其二:设置对应元素的JavaScript contenteditable属性;         浏览器定义了多项文本编辑命令,为了执行这些命令,应该使用Document

    1.4K20

    自己写一个jqery的拖拽插件

    $.zUI.插件.unfn 这些规范,主要是为了以后写其它插件时,放在一起,精简代码用的,以后可能还会添加�其它规则,以写出一个骨架来。...拖拽的原理事实上比較简单,就是在鼠标落下后,加入�一个mousemove事件,让元素尾随鼠标移动,鼠标抬起后,移除刚才的事件。...); } } 须要说明的有几点: 1.鼠标落下后,要记录鼠标相对元素的位置,mousemove的过程中,要把这段距离减去; 2.jQuery的data方法,这种方法很方便,能够讲数据和相应的元素绑定...3.undraggable就是把事件函数去掉了 4.jQuery的on方法很强大,加入�后还能够使用trigger方法来触发,有兴趣的同学能够到官方看看API,on方法很暴躁,这里的自己定义函数,就是用这两个方法实现的...最后,用一个匿名函数自运行把他们都包起来,为了防止$符号被其它的插件使用,传一个jQuery过去: (function($){ ....... })(jQuery); 到此为止,

    1K20

    一款轻量级树形控件EasyTreeview

    使用方法 引入 的创建 在树控件的处理中,循环和递归结构必不可少,递归用以纵向处理树的深度,循环用以横向处理树的广度。... 初始化时标识节点是否为枝干节点(之后,节点特性由系统负责标识) 状态的切换 在控件创建时,树节点状态(用户可控:checked,collasped,系统记录:branched)是可初始化的;而在用户...选中/不选中 复选框、收缩/展开 子树、拖拽移动树节点 时,对应的 checked、collapsed、branched 状态值 也是需要切换的。...: 在循环创建树节点时,如何根据当前节点的 checked 属性同步其父子节点的 checked 属性 (在得到它的 checked 属性时, 它的 父子节点可能尚未创建完毕)。

    2.3K90

    Vue.js框架中权衡的艺术

    权衡之后,vue 决定按 一套 声明式框架来设计 性能与可维护的权衡 命令式框架的性能 优于 声明式的框架的性能 简单来说,就是jquery 性能优于 vue 当我们需要更新dom时 对于vue 框架来说...一般我们插入大量新HTML标记时,使用innerHTML 与 通过多次DOM操作先创建节点再指定它们之间的关系相比,效率更高,因为在设置innerHTML 时就会先创建一个HTML解析器,这个解析是在浏览器级别的基础上代码...创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量 innerHTML 虚拟DOM JavaScript运算 拼接html字符串 创建虚拟dom DOM构建 新建所有dom元素...新建所有dom元素 新建页面时,JavaScript运算和DOM构建层面相差不大,innerHTML 性能甚至优于 虚拟dom 当更新页面时 innerHTML 虚拟DOM JavaScript运算...dom的三个方法对比 innerHTML 虚拟dom 原生js(createElement) 心智负担重等性能差 心智负担小可维护性高性能不错 心智负担大可维护性差性能高 权衡之后,vue 使用的 虚拟

    1.7K20

    关于动态创建DOM元素的问题

    在我们实际的项目之中,相信有很多的朋友直接使用了以下的格式创建DOM元素 javascript"> document.getElementById("...在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素, 因为不同浏览器的显示引擎是不同的....但是如果我们使用Dom的CreateElement创建对象, 在所有的浏览器中几乎都可以. 但是在jQuery中如果传入的而是一个完整的HTML字符串, 内部也是使用innerHTML....document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上....第二种方式: 使用Jquery 当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如: //jQuery内部使用document.createElement

    2.2K20

    JavaScript学习笔记(四)—— jQuery入门

    ");//设置HTML内容 }); }); 对元素的值进行操作 在jQuery中,使用val()方法返回或设置被选元素的value属性。...简单动画 使用animate()方法创建简单动画时,其参数设置为: $(selector).animate({params}, speed, callback); - params参数为必须的,其定义形成动画的...事件名称 触发方式 返回值 keydown 在键盘上按下某键时触发,一直按一直触发 返回键盘代码 keypress 在键盘上按下一个能产生字符的按键时触发 返回ASCII码 keyup 松开某一键时触发...描述 keydown() 按下键盘上某个按键时触发 keypress() 按下键盘上某个产生字符的按键时触发 keyup() 释放某个按键的时候触发 javascript...绑定与接触事件 绑定事件 绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。

    11.2K50
    领券