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简单特效及摘要的更多相关文章

  1. Javascript网页特效开发技巧

    Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...

  2. 《JavaScript网页特效经典300例》

    <JavaScript网页特效经典300例> 基本信息 作者: 杨磊    张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...

  3. JavaScript简单入门(补充篇)

    本文是对上一篇 JavaScript简单入门 的一些细节补充. 一.全局变量和局部变量 在<script>标签内定义的变量是当前页面中的全局变量.即 <script>标签可以直 ...

  4. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  5. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  6. JavaScript 简单介绍

    一.简介 JavaScript是一门面向对象的动态语言,他一般用来处理以下任务: 修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 提供用户交互接口 生成用户交互组件 验证用户输入 ...

  7. [Java Web] 4、JavaScript 简单例子(高手略过)

    内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...

  8. javascript - 简单实现一个图片延迟加载的jQuery插件

    最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...

  9. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

随机推荐

  1. [转].Net Core上用于代替System.Drawing的类库

    本文转自:http://www.tuicool.com/wx/iuaINjy 目前.Net Core上没有System.Drawing这个类库,想要在.Net Core上处理图片得另辟蹊径. 微软给出 ...

  2. Devexpress Xtrareport 并排报表

    什么是并排报表呢? 按照我个人理解:并排报表是把两张或者两张以上的报表,放在一个报表页面. 注:为了方便,本示例使用同一个数据源,但是您可以使用相同的方法,而在一个报表文档中显示两个完全不同的 (使用 ...

  3. 网站架构：消息队列 Java后端架构

    2017-01-13  一.消息队列概述 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量削锋等问题.实现高性能,高可用,可伸缩和最终一致性架构.是大型分布式系统不可缺少的中间 ...

  4. 深入理解java虚拟机阅读笔记（1）运行时数据区域

    java虚拟机所管理的内存区域主要分为方法区.堆:虚拟机栈.本地方法栈.程序计数器,如图: 1.程序计数器是当前线程所执行的字节码行号指示器,用以记录当前指令执行的位置.程序计数器是线程私有的,每个线 ...

  5. SublimeText插件vue Syntax Highlight : vue语法高亮

    参考:http://www.cnblogs.com/cosnyang/p/6290950.html Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需 ...

  6. 20170802,css样式优先级

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  7. python3绘图示例3（基于matplotlib：折线图等）

    #!/usr/bin/env python# -*- coding:utf-8 -*-from pylab import *from numpy import *import numpy # 数据点图 ...

  8. Java Map应用

    一.基本API使用方法 直接上代码,注释讲解 package com.map; import java.util.HashMap; import java.util.Iterator; import ...

  9. mongoDB基础知识(一)

    mongoDB是一个基于分布式文件存储的数据库,介于关系型数据库和非关系型数据库之间,在非关系型数据库中功能最丰富, 最像关系型数据库.数据结构松散,类似于json的bson格式,可以存储比较复杂的数 ...

  10. 07、Spark集群的进程管理

    07.Spark集群的进程管理 7.1 概述 Spark standalone集群模式涉及master和worker两个守护进程.master进程是管理节点,worker进程是工作节点.spark提供 ...