DOM+Javascript一些实例

1.内容+遮罩层+悬浮对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ background: rgba(0,0,0,.5); position: fixed; top:0; left:…

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测,对页面的增删改效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页面写入数据 2.删除页面数据 + 删除提示[确实]才删除 3.获取表单输入的内容,并简单验证 4.打开一个新的窗口 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&…

js的dom测试及实例代码

js的dom测试及实例代码一.总结一句话总结: 1.需要记得创建标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明"); 2.appendChild就是标签都可以干的活:document.body.appendChild(hr1); 1.需要记得创建标签和创建文本节点都是document的活? var div1 = document.createElement("div"); var t…

10种JavaScript特效实例让你的网站更吸引人

我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者.这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读. 您还可以参考以下JavaScript/Ajax相关教程及资源:<10个非常棒的Ajax及Javascript实例资源网站><12种Javascript解决常见浏览器兼容问题的方法>&l…

python 解析XML python模块xml.dom解析xml实例代码

分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html 一 .python模块 xml.dom 解析XML的API minidom.parse(filename)加载读取XML文件doc.documentElement获取XML文档对象node.getAttribute(AttributeName)获取XML节点属性值node.getElementsBy…

JavaScript小实例：拖拽应用（二）

经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: 这个是在万网的注册页中所截的图,大概的效果就是,当拖动那个拖拽框时,如果拖拽框没有拖到最右边,则拖拽框会移动到初始位置,如果拖动到最右边,则拖拽框显示为对勾,中间的文字也变了,但是我试了一下,他的验证码的框没有出来,不知道是改了还是怎么的,我没有继续点击确定往下进行,那不是我们要讲的重点,我就在他的…

javascript小实例，拖拽应用（一）

前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚动条,也可以理解为表单中的数量选择控件,也可以理解为进度条,等等,反正你可以改成很多你想要的效果,废话不多说,我们来看看这个是怎么做的吧! 想了想,感觉原理就不用说了吧,我在拖拽效果中就已经说的很清楚了,不清楚的同学可以出门左转,查看 javascript小实例,PC网页里的拖拽 ,我就直接贴代码了…

JavaScript图形实例：线段构图

在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段的集合会构成一幅幅精美的图形.下面我们继续给出一些用线段构造图形的实例,供大家欣赏和借鉴. 1．莫尔花纹图案设定曲线的坐标方程为: b=r*(1+ sin(2.5*θ)/2); x1=b*cos(θ); x2=b*cos(θ+π/4); y1=b* sin(θ); y2=b* sin(θ+π/4)…

JavaScript动画实例：李萨如曲线

在“JavaScript图形实例:阿基米德螺线”和“JavaScript图形实例:曲线方程”中,我们学习了利用曲线的方程绘制曲线的方法.如果想看看曲线是怎样绘制出来的,怎么办呢?编写简单的动画,就可以展示指定曲线的绘制过程. 1．李萨如曲线设定李萨如曲线的坐标方程为: X=SIN(2θ) Y=SIN(3θ) (0≤θ≤2π) 将0~2π区间等分512段,取θ的初始值π/256,按曲线方程求得坐标值(x,y),并在当前坐标处通过绘制一个实心圆的方式描点.之后每隔0.02秒,将θ的初始值加…

dom&JavaScript&Jquery

目录 dom&JavaScript&Jquery 建节点添加节点删除节点: 替换节点: 属性节点获取值操作 class的操作指定CSS操作操作节点获取input用户输入操作标签类事件常用事件绑定方式: 点击事件获取焦点事件定时器案例省市联动 jquery jquery初识 jquery基本选择器基本选择器层级选择器: 基本筛选器 jquery操作类属性表单筛选器属性选择器: 表单筛选器: 筛选器方法链式操作 find方法左侧菜单获取位置滚动条小火…

JavaScript动画实例：递归分形图动态展示

在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的时间间隔后,增加递归深度重新绘制一次,这样就可以得到分形图形的动态生成效果. 1．SierPinski垫片递归深度depth从1开始,将递归绘制的SierPinski垫片每隔1秒后增加递归深度(depth++),重新绘制一遍,得到SierPinski垫片的动态生成动画效果. 编写如下的HTML代码…

JavaScript图形实例：再谈IFS生成图形

在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的一般形式为 X1=a*X0 + b*Y0 + e Y1=c*X0 + d*Y0 + f 给定不同的IFS码,可以生成不同的图形. 实际上,仿射变换函数的形式还可以是 X1= a * X0*cos(c/180) - b * Y0*sin(d/180) + e Y1= a * X0*sin(c/180…

JavaScript图形实例：随机SierPinski三角形

在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方法生成SierPinski三角形的方法.下面再介绍两种SierPinski三角形的构造方法,以扩展知识面. 1．随机点法采用随机点的方法可以得到SierPinski三角形.具体过程为: (1)任意取平面上三点A.B.C,组成一个三角形,并任意取三角形ABC内的一点P: (2)求出P和A.B.C三个…

JavaScript动画实例：曲线的绘制

在“JavaScript图形实例:曲线方程”一文中,我们给出了15个曲线方程绘制图形的实例.这些曲线都是根据其曲线方程,在[0,2π]区间取一系列角度值,根据给定角度值计算对应的各点坐标,然后在计算出的坐标位置描点,从而绘制出曲线. 我们可以将曲线的绘制过程动态展示出来. 例如,对于星形线的绘制,编写如下的HTML代码. <!DOCTYPE> <html> <head> <title>星形线的绘制</title> </head> &l…

JavaScript 的DOM操作及实例

一.Windows对象操作 (1).用代码打开窗口:window.open("第一部分","第二部分","第三部分","第四部分") 第一部分:写页面地址. 第二部分:打开的方式:_blank打开新窗口 self在原窗口打开. 第三部分:控制打开窗口的格式,可以写多个,用空格隔开. toolber=no //无工具条 menuber=no //无菜单栏 status=no //无状态栏 windth=100px heigh…

JAVAscript的DOM操作及实例

一.Windows对象操作 (1)用代码打开窗口:window.open("第一部分","第二部分","第三部分","第四部分") 第一部分:写页面地址. 第二部分:打开的方式:_blank打开新窗口 self在原窗口打开. 第三部分:控制打开窗口的格式,可以写多个,用空格隔开. toolber=no //无工具条 menuber=no //无菜单栏 status=no //无状态栏 windth=100px height…

JavaScript 经典实例收集整理

跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除事件 function removeEvent(obj,type,fn){ if(obj.removeEv…

javascript 对象实例

创建对象: var o = new Objct(); //创建一个空对象 var o = {}; var a = new Array(); //创建一个空数组 var a = []; var d = new Date(); //创建一个表示当前时间的日期对象对象属性的设置: book.edition = 6 //给book创建一个edition的属性 book[ "mainTile" ] = "ECMASript" //给mainTile属性赋值book[i] =…

javascript小实例，PC网页里的拖拽

几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个: 这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖…

javascript小实例，PC网页里的拖拽（转）

这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推掉了,换了另外的一个效果尽管项目经理不想要这个效果了,但是当时就在我心里留下了一个节,到今天都忘不了这个梗. 好了,这就是我今天想写这篇博客的初衷,希望能给想实现这类拖拽效果,但是不知道该怎么去实现的同学,提供一种思路,不给青春留遗憾,当然实现拖拽的方法有很多,这里就只介绍JavaScript中的…

JavaScript检测实例属性, 原型属性

0.前提 JavaScript对象的属性分为两种存在形态. 一种是存在实例中, 另一是存在原型对象中. 根据上述, 检测属性的时候会出现4种情况既不存在实例中, 也不存在原型对象中存在实例中, 不存在原型对象中不存在实例中, 存在原型对象中既存在实例中, 也存在原型对象中 1.hasOwnPrototype() hasOwnPrototype()接受一个字符串格式的属性名称, 如果实例本身存在该属性(情况2/情况4), 返回true. 否则, 返回false(情况1/情况3). func…

JavaScript正则表达式实例汇总

本文会持续更新 ------------------------------------------------------------------------------------------------------------- 基本语法关于语法部分就不啰嗦了,全世界都能找到相关知识详细信息请参阅:W3school参考手册JavaScript RegExp 对象当然,你也可以参考下面的博客园的他人博客,我就不重复造轮子了:js之正则表达式(上) JS正则表达式大全(整理详细…

编写自己的代码库（javascript常用实例的实现与封装）[转]

1.前言因为公司最近项目比较忙,没那么多空余的事件写文章了,所以这篇文章晚了几天发布.但是这也没什么关系,不过该来的,总是会来的.好了,其他的不多说的,大家在开发的时候应该知道,有很多常见的实例操作.比如数组去重,关键词高亮,打乱数组等.这些操作,代码一般不会很多,实现的逻辑也不会很难,下面的代码,我解释就不解释太多了,打上注释,相信大家就会懂了.但是,用的地方会比较,如果项目有哪个地方需要用,如果重复写的话,就是代码沉余,开发效率也不用,复用基本就是复制粘贴!这样是一个很不好的习惯,大家可以…

JavaScript 经典实例日常收集整理(常用经典)

作者:阿讯小飞原文来自:脚本之家跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除事件 function removeEvent(obj,type,fn…

深度理解DOM事件（实例）

前言通过如下两个实例来理解DOM事件实例1--点击别处关闭浮层 onclick与addEventListener的区别实例2--点击后颜色一层一个层出现的漂亮的彩虹圈 1 实例1--点击别处关闭浮层代码效果演示:原生JS . jQuery HTML代码 <div id="wrapper" class="wrapper"> <button id="clickMe">点我</button> <div…

JavaScript实战实例剖析——（激励倒计时日历）

如今JavaScript在前端开发中的地位越来越高,掌握JavaScript的深度往往能决定你职业道路深远,这次通过制作带着倒计时功能的激励日历的小实例,进一步细致的掌握JavaScript的语法与用法. 结构剖析: <!DOCTYPE html> <html> <meta charset="utf-8" author="DylanZZZ"> <head> <title>倒计…

JavaScript图形实例：图形的旋转变换

旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P(x,y) 旋转了θ之后,变成点P’(x,y) ,如图1所示. 图1 点P逆时针旋转由三角关系可得: 平面上一点P(x,y)若按顺时针方向旋转了θ之后,变成点P’(x,y) ,如图2所示. 图2 点P顺时针旋转由三角关系可得: 1．三角形旋转先绘制一个三角形,然后将该三角形依次顺时针旋转45°,…

JavaScript教程——实例对象与 new 命令

典型的面向对象编程语言(比如 C++ 和 Java),都有“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,JavaScript 语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype). JavaScript 语言使用构造函数(constructor)作为对象的模板.所谓”构造函数”,就是专门用来生成实例对象的函数.它就是对象的模板,描述实例对象的基本结构.一个构造函数,可以生成多个实例对象,这些实例对象都有相…

JavaScript面向对象实例与原型

JavaScript 面向对象和 C# 不太一样,js 的对象是继承自原型的如下: 首先创建一个 js 实例 new function function f () {} 这个函数会继承 Function 的所有属性. Function.prototype.cc='a' ;function f(){} f.cc f 相当于var f = new Function(); f.name = 'f' 用控制台打印Function 看不到源码,因为它是 C(还是C++ 不记得了) 实现的函数相当于…

javascript新手实例1-DOM基本操作

学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做,所以我们的口号是"每天一例,轻松javascript" 今天给大家带来第一个例子,简单Dom操作,效果先看下图 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">…

【DOM+Javascript一些实例】的更多相关文章