dom | 易学教程

jQuery 基础DOM和CSS操作

阅读更多关于 jQuery 基础DOM和CSS操作

一、设置元素及内容 html() 获取元素中的HTML内容 html(value) 设置元素中的HTML内容 text()　　　获取元素中的文本内容 text(value) 设置元素中的文本内容 val() 　　　获取表单中的文本内容 val(value) 设置表单中的文本内容注意：当使用html()和text()设置元素的内容时，会清空原来的数据。如果希望追加信息，需要先获取原来的数据。 $('#box').html($('#box').html + 'extra html'); 如果想设置多个选定状态，比如下拉列表、单选复选框等，可以通过数组传递操作。 $("input").val(["check1","check2","radio1"]); //value值是这些的将被选定二、元素属性操作 attr(key)　　　　　　　　　　　　获取某个元素key属性的属性值 attr(key,value)　　　　　　　　设置某个元素key属性的属性值 attr({key1:value1,key2:value2...}) 设置某个元素多个key属性的属性值 atrr(key,function(index,value){}) 设置某个元素key通过函数来设置注意：attr()方法里面的function() {}可以不传参数。可以只传一个参数index，表示当前元素的索引（从0

DOM操作

阅读更多关于 DOM操作

什么是DOM？　　DOM，即Document Object Model，对象文本模型，用于方便开发者对HTML结构元素内容进行展示和修改 DOM的三种形式：DOM、HTML DOM、CSS DOM 元素内容的操作　　html()：获取元素中的HTML内容　　html(value)：设置元素中的HTML内容　　text()：获取元素中的文本内容　　text()：设置元素中的文本内容　　val()：获取表单中的文本内容　　val(value)：设置表单中的文本内容　　val(array[])：设置表单首选项元素属性操作　　attr(property)：获取属性property的值　　attr(property,value)：设置属性property的值　　attr({property1:value1,property2:value2,...})：设置多个属性及属性值　　attr(property,function([index][,value]){return result})：设置属性property的值用function返回，index为下标，value为原来的值　　removeAttr(property)：移除属性property 元素样式操作　　css(style)：获取css样式值　　css(style,value)：设置css样式　　css

Jquery操作DOM

阅读更多关于 Jquery操作DOM

一：Jquery操作DOM节点 1，查找节点 2，创建节点 append() 3,删除节点 remove() 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //查找DOM节点 10 /* var li2=$("ul li:eq(1)"); 11 var li2_txt=li2.text(); 12 alert(li2_txt); */ 13 //添加DOM节点 14 /* var li1=$("<li title='我是马化腾'>马化腾</li>"); 15 var li2=$("<li title='我是李彦宏'>李彦宏</li>") 16 $("ul").append(li1);//在最后面添加 17 var li22=$("ul li:eq(1)");//在第二项之后添加 18 li2.insertAfter(li22); */ 19 //删除DOM节点 20 //

什么时候需要用的Vue.nextTick()

阅读更多关于什么时候需要用的Vue.nextTick()

什么时候需要用的Vue.nextTick() 你在Vue生命周期的 created() 钩子函数进行的DOM操作一定要放在 Vue.nextTick() 的回调函数中。原因是什么呢，原因是在 created() 钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted 钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除

HTML DOM addEventListener() 方法

阅读更多关于 HTML DOM addEventListener() 方法

//为 <button> 元素添加点击事件。当用户点击按钮时，在 id="demo" 的 <p> 元素上输出 "Hello World" :document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 　　该实例演示了在用户点击 <button> 元素时如何执行函数: document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } 　　您可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。该实例演示了如何在<button>元素中添加两个点击事件： document.getElementById("myBtn").addEventListener("click", myFunction); document.getElementById("myBtn").addEventListener("click",

jQuery基础知识笔记（一）

阅读更多关于 jQuery基础知识笔记（一）

jQuery官网： https://jquery.com/ 在线API: https://api.jquery.com/ jQuery UI： https://jqueryui.com/ API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码高版本的jQuery不支持IE浏览器，注意匹配 1. 框架库和jQuery介绍 jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JS实现的，所以并不是代替JS。可以说jQuery本身就是一堆JS函数，jQuery就是一个JS的函数库 2. jQuery文件使用（1）为什么要学习jQuery？ DOM中一个简单的功能需要大量的代码；兼容问题很多；代码容错性很差；window.onload也只能有一个（2）jQuery好处：解决浏览器兼容性问题，体积小，链式编程，隐式迭代，插件丰富，开源，免费（例题）点击按钮出现一个蓝色小方块 < script > //Dom中写法 window . onload = function ( ) { document . getElementById ( "btn" ) . onclick = function ( ) { var divObj = document . getElementById ( "dv" ) ; divObj . style .

379 vue的异步 DOM 更新

阅读更多关于 379 vue的异步 DOM 更新

1、Vue 中采用了异步DOM更新的机制 2、如何更新页面数据发生改变后, vue 没有立即将数据的改变更新到视图中, 而是等到数据不再变化的时候一次性的将数据的改变更新到视图中 // 1. 验证了 for (let i = 0; i < 1000; i++) { this.count++ } 3、为什么是异步 DOM 更新性能的考虑因为对于前端来说, 修改数据进行 DOM 操作是常有的事情, 如果频繁操作 DOM, 会严重影响页面的加载性能 DOM 操作这是前端的性能的瓶颈比如 : for (let i = 1; i < 10000; i++>) ，如果同步，就要重新渲染 1000 次 4、验证异步 DOM 更新 // 2. 直接获取data 中的值, 会立马获取成功 console.log(this.count) this.count++ console.log(this.count) // 但是通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的 console.log(document.querySelector('h1').innerText) // 0 this.count = 100 console.log(document.querySelector('h1').innerText) // 0 5、需求 :

操作DOM元素(1)

阅读更多关于操作DOM元素(1)

JS操作DOM元素代码的编写 DOM树传统的html文档顺序是:document->html->(head,body) 根据 DOM，HTML 文档中的每个成分都是一个节点。整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点一、document对象(DOM核心对象) 1、dom属性 title 返回或设置当前文档的标题 URL 返回当前文档的url bgColor 设置文档的背景色 fgColor 设置文档的前景色(设置文字颜色) alert(document.title) document.title="HelloWorld"; alert(document.URL) alert(location.href) document.bgColor="red"; document.fgColor="blue"; 2.dom获取节点方法　　getElementById() 返回拥有指定id的（第一个）对象的引用　　getElementsByTagName() 返回带有指定标签名的对象的集合　　getElementsByName() 返回带有指定name指定名称的对象的集合，主要是适用于表单　　getElementsByClassName()

JQUERY框架的优点与面试题

阅读更多关于 JQUERY框架的优点与面试题

1 你觉得 jquery 有哪些好处？ jQuery 是轻量级的 javascript 框架强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 ajax 封装出色的浏览器的兼容性支持链式操作，隐式迭代支持丰富的插件 jquery 的文档也非常的丰富 2. jquery 对象和 dom 对象如何转换？ 1. jquery 转 DOM 对象: jQuery 对象是一个数组对象，可以通过[index]的丰富得到 DOM 对象还可以通过 get[index]去得到相应的 DOM 对象。 2. DOM 对象转 jQuery 对象: $(DOM 对象) 3 $(document).ready()方法和 window.onload 区别？答: 两个方法有相似的功能，但是在实行时机方面是有区别的。 1 window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。 2 $(document).ready() 方法可以在 DOM 载入就绪时就对其进行操纵，并调用执行绑定的函数。 4. 说说你对 JSON 的理解 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于标准 JavaScript 的一个子集,是一个 Js 对象或数组结构的字符串 JSON 有三类数据 1. 单个数据

jQuery常用操作

阅读更多关于 jQuery常用操作

jQuery 　　jQuery是一个轻量级的JS库，是一个被封装好的JS文件，提供了更为简便的元素操作方式，jQuery封装了DOM。使用jQuery 引入jQuery文件　　<scrtipt src='jquery-1.11.3.js'> </script> 　　注意：引入必须放在其他jQuery操作之前。 jQuery对象　　jQuery对象是由jQuery对页面元素进行封装后的一种体现　　jQuery中所提供的所有操作都只针对jQuery对象，其他对象（DOM）无法使用工厂函数 -- $() 　　想要获取jQuery对象，则必须使用工厂函数$() 　　在$()中允许传递一个选择器/DOM对象作为参数，$()能够将选择器和DOM对象全部封装成jQuery对象再进行返回例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery演示</title> </head> <body> <div id="main"> id是mian的div元素 </div> <button onclick="bClick()">获取元素</button> <script src="jquery-1.11.3.js"></script> <script> function bClick() {

订阅 dom