js原生代码创建元素

2024-09-01

原生JS 实现点击按钮创建元素

要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小,位置,颜色基础HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&qu

js原生代码实现轮播图案例

一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用js原生代码,实现轮播图的常见效果!思路比较清晰,而且可重复性高,也几乎包含了现在网页上轮播实现的所有效果! 现在我们来看看它是什么样的效果,截一张图给大家看: 二.无论我们做什么特效,都要记住一个原则,先写静态的代码,再做动态的处理! 我们的轮播静态效果用html和css来实现: 1.为了代码的规范

仿jQuery的siblings效果的js原生代码

仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling> 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点). 如果不存在这样的节点,则该属性返回 null.//元素节点的节点类型是 1 obj.previousSibling.nodeType ==1; reverse() 方法用于颠倒数组中元素的顺序. push() 方法可向数组的末尾添加一个

用Node.js原生代码实现静态服务器

---恢复内容开始--- 后端中服务器类型有两种 1. web服务器[ 静态服务器 ] - 举例: wamp里面www目录 - 目的是为了展示页面内容 - 前端: nginx 2. 应用级服务器[ api服务器 ] - 后端接口 - tomcat 做什么? - 使用Node.js原生代码实现静态服务器 [ 必会 ] const http = require( 'http' ) const port = 3000 const hostname = 'localhost' // 127.0.0.1

原生JS和jQuery创建元素的方法

jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1>加油</h1>') 2.jQ代码 .html('加油')//会覆盖 A.append('<p>加油</p>')//不会覆盖,添加到A元素的最后面 A.prepend('<p>加油</p>')//不会覆盖,添加到A元素的最前面 A.before(

基于面向对象的图片轮播（js原生代码）

无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图片轮播.其效果如下所示: 正如图片所示这样我们要实现的效果,这里与我们以往不同的是我们的布局十分简洁.其中html布局如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

JS原生代码实现导航高亮

一实现原理根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联,并对相应的导航设置高亮样式. 二代码解析先简单写一个页面顶端的导航栏:<nav> <ul> <li><a class="nav active" href="#nav1">导航1</a></li> <li><a class="nav" href="#na

js和jQuery创建元素和把元素插入到文档中所用的方法

js创建元素: document.createElement(" 创建的元素"); //“创建的元素”指:p ,h1,div,span........ js插入元素: document.body.appendChild(要插入元素); //要插入元素:var p=document.createElement("p") jQuery创建元素: $("<h1></h1>"); //"<h1><

day28(ajax之js原生代码实现)

ajax ajax:异步页面无刷新技术 AJAX:异步的 JavaScript And XML. * 使用的是老的技术,用的是新的思想. AJAX的功能:完成页面的局部刷新,不中断用户的体验. XML:使用XML做为数据传递的格式: JSON: 异步与同步的区别: 同步(安全,效率低):同步指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系. 页面2会一直等待着页面1的响应,没有响应则会一直等待,直到超时. 异步(不安全,效率高):两个或两个以上的时间在发生的过程中没有时间的限制.页面

【笔记】js原生方法在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）

介绍的这个方法是:insetAdjacentHTML() 方法此方法接收两个参数: 第一个参数必为下列值: beforebegin:在调用的元素外部的前面添加一个目标元素 afterend:在调用元素外部的后面添加一个目标元素 afterbegin:在调用元素的内部第一个子元素前面添加一个目标元素 beforeend:在调用元素的内部最后一个子元素后面添加一个目标元素代码如下 var div2 = document.querySelector("#div2"); div2.inse

JS原生代码之倒计时抢购

学到了原声js改变input的disabled的属性值,因为想让倒计时结束的同时,抢购按钮可以被点击.代码为:document.getElementById("buy").disabled = "";或者disabled的值为false也可以. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

高效的js原生代码

1.遍历元素 //不推荐 var element = document.getElementsByTagName('div'); for(var i=0; i<element.length; i++){ element[i].innerHTML = '111'; element[i].style.color = 'red'; } //推荐var element = document.getElementsByTagName('div'); for(var i=0,e; e=element[i];

js原生动态创建表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js原生代码实现鼠标拖拽(超简单)

首先先来看这一张图在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示这些样式都不是重要的,这里加个margin是为了让其出现拖拽的时候出现鼠标偏移,好做演示而已,不然margin:0 auto 就可以实现盒子的居中首先通过offsetLeft的方法获取到盒子的偏移值,然后在通过clientX,clientY获取到鼠标的坐标,通过当前坐标减去offsetLeft的坐标就可以获取鼠标在div里面的具体数

js原生代码编写一个鼠标在页面移动坐标的检测功能，兼容各大浏览器

function mousePosition(e) { //IE9以上的浏览器获取 if (e.pageX || e.pageY) { return { x: e.pageX, y: e.pageY }; } //IE9以下 //IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和docu

js 原生获取Class元素

function getElementsByClassName(n) { var classElements = [] allElements = document.getElementsByTagName("*"); for (var i = 0; i < allElements.length; i++) { if (allElements[i].className == n) { classElements[classElements.length] = allElement

Android NDK开发篇(五)：Java与原生代码通信(数据操作)

尽管说使用NDK能够提高Android程序的运行效率,可是调用起来还是略微有点麻烦.NDK能够直接使用Java的原生数据类型,而引用类型,由于Java的引用类型的实如今NDK被屏蔽了,所以在NDK使用Java的引用类型则要做对应的处理. 一.对引用数据类型的操作尽管Java的引用类型的实如今NDK被屏蔽了,JNI还是提供了一组API,通过JNIEnv接口指针提供原生方法改动和使用Java的引用类型. 1.字符串操作 JNI把Java的字符串当作引用来处理,在NDK中使用Java的字符串,须要相

Android NDK开发篇：Java与原生代码通信(数据操作)

虽然说使用NDK可以提高Android程序的执行效率,但是调用起来还是稍微有点麻烦.NDK可以直接使用Java的原生数据类型,而引用类型,因为Java的引用类型的实现在NDK被屏蔽了,所以在NDK使用Java的引用类型则要做相应的处理. 一.对引用数据类型的操作虽然Java的引用类型的实现在NDK被屏蔽了,JNI还是提供了一组API,通过JNIEnv接口指针提供原生方法修改和使用Java的引用类型. 1.字符串操作 JNI把Java的字符串当作引用来处理,在NDK中使用Java的字符串,需要相

工作当中实际运用（3）——js原生实现鼠标点击弹出div层在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现鼠标点击弹出隐藏 div隐藏

Js原生实现抽奖功能

<div>代码按钮代码 JS原生代码完整的代码: <div style="width:365px;height:300px;border:2px solid green" id="names"> <script> for (var i = 1; i <= 40; i++) { document.write( '<div style="width:45px;height:35px;background:#

原生JS与JQ获取元素的区别

刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以看到我们获取到了id为div1的元素代码了 (2)通过元素标签名获取:document.getElementsByTagName(),它以数组的形式返

js原生代码 创建元素

热门专题

js原生代码创建元素