[TimLinux] JavaScript 元素动态显示

1. css的opacity属性这个属性用于:设置元素的不透明级别,取值范围:从 0.0 (完全透明)到 1.0(完全不透明),元素所在的文本流还在.这个属性的动态变化可以用来设置元素的淡入淡出效果. 2. JavaScript用法通过setInterval函数来周期性修改元素的opacity属性值,最后设置完成后,将这个setInterval函数进行clearInterval. var alpha = 50 ; var speed = 10 ; timer = setInterval(fu…

[TimLinux] JavaScript 获取元素节点的5种方法

1. getElementById document.getElementById("id_value") # 返回值为Node对象,没有元素时,返回 == undefined值(两个等号) 2. getElementsByName document.getElementsByName("name_value") # 返回值为NodeList数组,没有元素时,返回空数组[] 3. getElementsByTagName document.getElementsBy…

[TimLinux] JavaScript 如何在AJAX中替换元素的图片

1. 示例代码 /* * <img id="idTestImg" src="/static/test.png" /> */ var idTestImg = document.getElementById('idTestImg'); var tmpImgObj = new Image(); // 也可以使用document.creatElement('img'); 创建效果是一样的. tmpImgObj.src = '/static/new.png'; /…

在HTML中使用JavaScript元素

script属性<script async = async charset="utf-8" defer="defer" src="index.html" type="text/javascript"></script>async:可选,表示立即下载下载脚本,但是不妨碍页面中的其他操作,只对外部脚本文件有效,不保证按照指定它们的先后顺序执行charset:可选,表示通过src属性指定的代码的字符集,大多数…

javascript元素跟随鼠标在指定区域运动

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标区域</title> <style type="text/css"> *{margin:0;padding:0;} .area{ width:…

[TimLinux] JavaScript table的td内容超过宽度缩为三个点

1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table/td自动隐藏内容</title> <link rel="stylesheet" href="my.css" /> </h…

[TimLinux] JavaScript 事件

1. 简介 JavaScript与HTML之间的交互式通过事件来实现的,事件是文档或浏览器窗口中发生的一些特定的交互瞬间,使用事件处理程序来预订事件,从而在事件发生时,能够执行特定的代码.事件使页面的行为(JavaScript)与页面的外观(HTML.CSS)解耦.BOM.DOM都有支持的事件类型. 事件是发生在对象上的(比如:window对象,节点对象) 2. 事件流事件流:描述的是从页面接收事件的顺序.两种事件流:冒泡流,捕获流. 2.1. 事件冒泡事件冒泡:事件开始时由最具体的元素(嵌…

[TimLinux] JavaScript position为fixed时支持水平滚动条

1. 固定定位 position: fixed;设置好之后,元素在浏览器窗口中的位置就固定住了,这个时候,不论是水平移动滚动条,还是垂直移动滚动条,元素是打死都不会动的. 但是当用fixed定位的元素,作为header部分的时候,浏览器窗口一旦缩小了,不让移动,那就会导致右侧的导览看不到也点不到了,比如“登录”按钮,这个时候大家就想骂娘了,然后骂娘并没有卵用. 2. onscroll事件滚动条发生滚动的时候,window对象上发生了onscroll事件了.我们的方法就是,将一个函数(或者多个函…

原生javascript 元素依次掉落及上升

一.实现原理: ① 通过onoff开关,判断元素是往下走还是往上走,并在每次清除定时器后,把onoff 设为 !onoff,以便下次点击做判断 ②move函数的运用二.代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin:0;padding: 0;} div{position: absolute; w…

javascript元素绑定事件

js元素绑定事件想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=function(){ alert('b') } 我们发现它只弹出一个,有一个被覆盖了下面就说一下js中的绑定事件 attachEvent(IE中用) var oBtn = document.getElementById('btn1'); oBtn.attachEvent('onclick', fun…

JavaScript元素的创建、添加、删除

利用JavaScript实现动态显示表格且对应改变按键的value值

插入的代码并没有符合HTML5样式,只是为了实现利用JS动态显示表格,并且按键的value值会同时发生变化的功能. <!DOCTYPE > <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table width="760&quo…

JavaScript 元素的插入顺序以及动态加载js

*****************记录下今天的心得***************** 1.元素的插入顺序需求:异步从后台读取两个数据a和b,并动态加载到父容器x中,要求a必须在b的左边实际情况:一开始是用x.append(...)的方法将a.b添加进去,由于是异步加载,查询速度快的请求自然会先显示在页面中的左边,于是最终列表中,a.b是忽左忽右的. 解决办法:使用 a.prependTo(x) 函数,应该好理解,就是始终把a插入到x的最前面. 2.动态加载js 需求:页面加载完毕后,设置页面…

[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery - Drag</title> <style> .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(100, 100, 100, 0.5);…

[TimLinux] JavaScript BOM浏览器对象模型

1. 简介 ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关.BOM没有标准,各浏览器厂商间定义的公共对象,可以作为事实上的标准存在.W3C在HTML5中把BOM纳入了规范中. 2. window对象 window对象:表示浏览器的一个实例.window的双重角色:通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Gl…

[TimLinux] JavaScript querySelectorAll返回对象无法使用indexOf问题

1. querySelectorAll 该函数返回的对象类型为NodeList,这个类型并没有indexOf方法,如果需要使用indexOf方法,需要先将该对象每一项转存入Array对象中,然后就可以使用indexOf方法了 2. 场景对querySelectorAll返回的所有进行进行click事件注册时,在事件处理程序中,如果想判断当前元素在总列表中的索引,这时就需要用到indexOf,但是因为NodeList对象没有该接口,建议对事件进行注册之前,遍历的元素先改为Array类型,然后对A…

[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部

1. scrollIntoView函数这个函数控制滚动条顶部内容.还是底部内容呈现在视图窗口中,接收一个参数:boolean值. true: 顶部出现在视图窗口中 false: 底部存在在视图窗口中 2. 示例 <div> <pre>...</pre> </div> 如果内容长度在pre中,且是pre中的内容很长导致出现滚动条,则调用该函数应该是由pre元素,示例: var idPre = document.getElementById('idPre');…

[TimLinux] JavaScript 中循环执行和定时执行

1. 两对函数 // 循环执行 // 在每个毫秒数之后,调用函数 var timeid = window.setInterval(函数名, 毫秒数); window.clearInterval(timeid ); // 定时执行:1秒=== 1000毫秒 // 在毫秒数之后,调用函数 var timeid = window.setTimeout(函数名, 毫秒数); window.clearTimtout(timeid); 2. 闭包与循环调用今天在开发过程中,想对一个验证失败的循环列表中的元…

[TimLinux] JavaScript 面向对象程序设计

1. 面向对象面向对象语言有一个标志:都有类的概念.通过类可以创建任意多个具有相同属性和方法的对象.ECMAScript中没有类的概念,因此JavaScript中的对象夜雨基于类的语言中的面向对象有所不同. 定义: 无序属性的机会属性可以包含:基本值.对象或者函数对象:一组没有特定顺序的值,对象的每个属性或方法都有一个名字,每个名字都映射到一个值,想象成散列表:无非就是一组名值对,其中值可以是数据或者函数.每个对象都是基于一个引用类型创建的,这个引用类型可以是原生类型(Object类型.A…

[TimLinux] JavaScript 如何在html标签的data-*属性使用JSON数据

1. HTML data-*属性 H5引入的data-*属性,可以在JavaScript通过.dataset.*的方式来获取属性的值,例如: /* HTML标签: * <input id="idTest" data-mydata="this is my data"> */ var idTest = document.getElementById('idTest'); console.log(idTest.dataset.mydata); // 输出:th…

[TimLinux] JavaScript AJAX如何重定向页面

1. AJAX 异步JavaScript + XML,用于不通过页面from表单,来发送数据到后端服务器中 2. 如何重定向服务器后端无法直接将页面重定向,因为服务器后端传回的任何数据,都将被XMLHttpRequest()对象给接收.步骤只能为: 1. 前端请求: +----------+ +----------------+ | AJAX | -----发送请求到服务器----> | 服务器处理请求 | +----------+ +----------------+ 2. 后端返回: +-…

[TimLinux] JavaScript 判断 input checkbox选中的方法

1. input属性 <label> <span>选择</span> <input type="checkbox" name="id" value="2"> </label> 2. javascript选中 var inputElement = document.getElementByTagName('input')[0]; # 选中 inputElement.checked = tr…

[TimLinux] JavaScript AJAX接收到的数据转换为JSON格式

1. 接收数据 AJAX接收数据是通过xhr.responseText属性,这是一个属性不是一个方法,这个属性得到的数据为字符串. 2. 字符串内容当服务器发送的是一个JsonResponse({'name':'Tim', 'sex': 'male'})这样的数据时(Django服务器),前端 xhr.responseText 属性得到的字符串值为“{‘name':'Tim', 'sex':'male'’}”,再次强调这是一个字符串 3. 字符串转换为JSON 字符串转换为JSON,需要用到J…

[TimLinux] JavaScript 阻止父节点接收子节点事件的方法

1. 事件两种类型的事件:触发式.冒泡式 2. 冒泡式触发式:事件从DOM结构的顶层往下走的事件触发过程: 冒泡式:事件从DOM结构的底层往上走的事件触发过程. 3. 父子节点当父.子节点同时对一个事件进行监听的时候,冒泡式的事件方式中,发生在子节点中的事件,在完成子节点事件处理函数后,将继续执行父节点注册的事件处理函数. 父.子节点都对某事件进行了监听,比如:父节点监听了onclick,子节点也监听了onclick事件发生在子节点上的事件,子节点事件处理函数将优先被调用如果只发生在父…

[TimLinux] JavaScript 给表单提前之前进行验证的方法

1. onSubmit事件这个事件是注册到form表单上的,不是注册在input type="submit"这个input按钮上面的. 2. 注册方式 HTML内部注册:<form onSubmit="return check()"> JavaScript文件内注册:document.getElementById("myform").onsubmit = function (e) { e = e || window.event; }…

[TimLinux] JavaScript 原生AJAX介绍

1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象从IE7+,以及当前流行的Chrome,Firefox,Safri,Opera浏览器,提供用于AJAX操作的对象,均为XMLHttpRequest. var xmlhttp = XMLHttpRequest(); 3. 前端处理流程流程包括以下几个步骤: 创建XMLHttpRequest对象: 注册onready…

如何让JavaScript元素运动起来？

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 200px; height: 200px; background-color: red; position: absolute; left: 0; top: 50px; } <…

javascript 元素的大小

1.偏移量元素的可见大小由其高度.宽度决定,包括所有内边距.滚动条和边框大小(不包含外边距).通过下列4个属性可以获取元素的偏移量: offsetHeight: offsetWidth: offsetLeft:元素的左外边框包含元素的左内边距的像素距离: offsetTop:元素的上外边框至包含元素上内边距的像素距离. 其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中. 2.客户区大小元素的客户区大小,指的是元素内容及其内边…

[TimLinux] JavaScript 模态框可拖动功能实现——节流版

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>setTimeout - Drag</title> <style> .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(100, 100, 100, 0…

[TimLinux] JavaScript 模态框可拖动功能实现——原始版

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Normal - Drag</title> <style> .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(100, 100, 100, 0.5);…

【[TimLinux] JavaScript 元素动态显示】的更多相关文章