Javascript简单特效及摘要
1.js中的Element对象
** var input1=docuemnt.getElementById("input1");
//alert(input1.value);
//alert(input1.getAttribute("属性名"));
//alert(input1.setAttribute("属性名","属性值"));
//input1.removeAttribute("属性名"); 此方法不能用于删除value值。
2.node对象
<span id="spanid">哈哈哈</span>
var span1=document.getElementById("spanid");
alert(span1.innerHTML); //获取标签文本内容,也可以设置内容。
alert(span1.value);
alert(span1.nodeType); //1
alert(span1.nodeName); //SPAN
alert(span1.nodeValue); //null
var id1=span1.getAttributeNode("id");
alert(id1.nodeType); //2
alert(id1.nodeName); //id
alert(id1.nodeValue); //spanid
var text1=span1.firstChild;
alert(text1.nodeType); //3
alert(text1.nodeName); //#text
alert(text1.nodeValue); //哈哈哈
3.得到父辈节点,子节点,兄弟节点的方法
<ul id=ulid>
<li id=li1>hahgagh</li>
<li id=li2>dasaadad</li>
<li id=li3>cxzzcccxcv</li>
</ul>
var li1=document.getElementById("li1");
//得到ul结点
var ul1=li1.parentNode;
alert(ul1.id); //ul
li1.nextSibling; //获取它的下一个兄弟节点
li1.previousSibling; //获取他的前一个兄弟
var ul1=document.getElementById("ulid");
alert(ul1.firstChild); //li
alert(ul1.lastChild);
appendChild(""); //类似于剪切黏贴的效果
父节点 . insertBefore("新节点","旧节点"); //在某个旧节点之前插入一个新节点
插入新节点,新节点不存在,所以要先创建节点。
父节点 . removeChild("子节点"); //删除子节点
父节点 . replaceChild("新节点","旧节点"); //以新节点替换旧节点
某个节点 . cloneNode(true); //复制某个节点
//案例:实现全选和全不选
<script type="text/javascript">
function selAll(){
var boxArray=document.getElementsByName("hobbey");
for(var i=0;i<=boxArray.length;i++){
boxArray[i].checked=true;
}
}
function selNo(){
var boxArray=document.getElementsByName("hobbey");
for(var i=0;i<=boxArray.length;i++){
boxArray[i].checked=false;
}
}
function selSome(){
var boxArray=document.getElementsByName("hobbey");
for(var i=0;i<=boxArray.length;i++){
if(boxArray[i].checked==true){
boxArray[i].checked=false;
}else if(boxArray[i].checked==false){
boxArray[i].checked=true;
}
}
}
function selAllNo(){
var box=document.getElementById("boxid");
if(box.checked==true){
selAll();
}else{
selNo();
}
}
</script>
<input type="checkbox"id="boxid" onclick="selAllNo()"/>全选/全不选<br/>
<input type="checkbox"name="hobbey"/>西瓜<br/>
<input type="checkbox"name="hobbey"/>草莓<br/>
<input type="checkbox"name="hobbey"/>苹果<br/>
<input type="checkbox"name="hobbey"/>荔枝<br/>
<input type="button"name="button"value="全选"onclick="selAll()"/>
<input type="button"name="hobbey"value="全不选"onclick="selNo()"/>
<input type="button"name="hobbey"value="反选"onclick="selSome()"/>
**表单输入框的聚焦与失去焦点的效果
<input type="text"id="text"value="请输入........"onfocus="focus1();"onblur="blur1();"/>
<script type="text/javascript">
function focus1(){
var inputid=document.getElementById("text");
inputid.value=" ";
}
function blur1(){
var inputid=document.getElementById("text");
inputid.value="请输入...... ";
}
</script>
此动态效果类似于电脑c盘下的搜索效果。可自行实验效果。
** 鼠标悬停事件代码
<html>
<head>
<meta http-equiv="content-type"content="text/html charset=utf-8"/>
<style type="text/css">
.span{background:white;}
</style>
<script type="text/javascript">
function over(){
var span=document.getElementById("span");
span.style.background="#ccffff";
}
function out(){
var span=document.getElementById("span");
span.style.background="white";
}
function down(){
var span=document.getElementById("span");
span.style.background="grey";
}
</script>
</head>
<span id="span"class="span"onmouseover="over();"onmousedown="down();"onmouseout="out();">苏宝娟</span>
</html>
Javascript简单特效及摘要的更多相关文章
- Javascript网页特效开发技巧
Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...
- 《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息 作者: 杨磊 张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
- JavaScript简单入门(补充篇)
本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...
- 《javascript高级程序设计》读书笔记(一)javascript简单介绍
第一章:javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- JavaScript 简单介绍
一.简介 JavaScript是一门面向对象的动态语言,他一般用来处理以下任务: 修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 提供用户交互接口 生成用户交互组件 验证用户输入 ...
- [Java Web] 4、JavaScript 简单例子(高手略过)
内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...
- javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...
- javascript 简单的计算器
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
随机推荐
- MemoryCache缓存 ---缓存时效
MemoryCache缓存 ---缓存时效测试 var cachePool = new MyCachePool(); //Thread.Sleep(1000); var value = cachePo ...
- SonarQube代码质量管理平台介绍与搭建
前 言 1.SonarQube的介绍 SonarQube是一个管理代码质量的开放平台. 可以从七个维度检测代码质量(为什么要用SonarQube): (1) 复杂度分布(complexity):代码复 ...
- 水晶报表分组,统计,求和,sum()函数使用
--Sum()函数统计的是明细所有的和 Sum(字段名) --根据分组字段统计的和 Sum ({xh_Getdinggoudan;1.Djine} ,{xh_Getdinggoudan;1.Ddgda ...
- hive数据仓库建设
hive数据仓库建设 1.设计原生日志表 原生日志表用来存放上报的原始日志,数据经过清洗加工后会进入到各个日志表中. 1.1 创建数据库 #创建数据库 $hive>create database ...
- 1、HDFS分布式文件系统
1.HDFS分布式文件系统 分布式存储 分布式计算 2.hadoop hadoop含有四个模块,分别是 common. hdfs和yarn. common 公共模块. HDFS hadoop dist ...
- js 流程控制语句
1.复合语句 2.switch语句 3.do...while语句 4.while语句 5.for语句 6.for...in语句 7.break和continue语句 9.with语句 10.if语句 ...
- python从字符串中提取数字,使用正则表达式
使用正则表达式 import re D = re.findall(r"\d+\.?\d*",line) print(D) -7.23246 10.8959 5.19534 0.06 ...
- webpack踩坑
1.当你用webpack2实现css文件单独成一个文件的时候: 可能遇到这种错误Error: Breaking change: extract now only takes a single argu ...
- Javascript作业—数组去重(要求:原型链上添加函数)
数组去重(要求:原型链上添加函数) <script> //数组去重,要求:在原型链上添加函数 //存储不重复的--仅循环一次 if(!Array.prototype.unique1){ A ...
- [转载]Memcached缓存服务的简单安装
1.Linux下的安装方法 下载:wget http://memcached.org/latest tar -zxvf memcached-1.x.x.tar.gz cd memcached-1.x. ...