JavaScript资料,JavaScript文章,JavaScript文档-易库教程

js利用appendChild对<li>标签进行排序的实现方法

2017年02月06日 41 阅读

按照从大到小排序appendChild：假设父级a中已经有子节点b，那么a.appendChild（b）的作用是：1.先将子节点b从父级a中删除；2.再将子节点b添加到a中，放在最末尾。<body><button id="bt1">提交</button><ul id="ul1"> <li>32</li><li>243</li><li>43</...

JS实现动态增加和删除li标签行的实例代码

2017年02月06日 41 阅读

如下所示：function addDepartment（）{<span style="white-space:pre"></span>var x = document.getElementById（"department"）;<span style="white-space:pre"></span>var l = x.childNodes.length;<span style="white-space:...

利用jQuery对无序列表排序的简单方法

2017年02月06日 40 阅读

利用jQuery对无序列表排序的原理是：获取到无序列表中的所有列表项，并转成数组形式，使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready（）、get（）、text（）、each（）、append（）和JavaScript函数sort（）。1．jQuery函数介绍（1）jQuery函数get（）--获取匹配元素集合该函数取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，实际上是元素数组）。其语法形式如下：...

浅谈js对象的创建和对6种继承模式的理解和遐想

2017年02月06日 41 阅读

JS中总共有六种继承模式，包括原型链、借用构造函数、组合继承、原型式继承寄生式继承和寄生组合式继承。为了便于理解记忆，我遐想了一个过程，对6中模式进行了简单的阐述。很长的一个故事，姑且起个名字叫女娲造人吧。创建对象女娲一个一个的捏人（创建对象），这样太慢，于是设计了一种机器（函数），想造什么样的，告诉他这个人有哪些特点和功能，机器来制造。这就是工厂模式的（使用同一个接口创建对象，回产生大量重复代码，由此发明了一种函数（模具））。但是机器造人同样也比较麻烦（...

jQuery监听文件上传实现进度条效果的方法

2017年02月06日 38 阅读

原理：给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程var xhr=new XMLHttpRequest（）; xhr.upload.onprogress=function（e）{}因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现首先封装一...

js实现点击图片自动提交action的简单方法

2017年02月06日 39 阅读

利用js实现点击一张图片，直接上传到指定的action，方法简单，一看就会了，只需要用户点击图片一次就可以实现图片上传功能。主要用到了onclick, onchange, display属性，代码可以直接copy用。此代码适合上传单张图片，关于action部分此处没有，这里只简绍页面效果。html代码<form action="p1.html" id="form" ENCTYPE="multipart/form-data" method="post"...

类似于QQ的右滑删除效果的实现方法

2017年02月06日 39 阅读

原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib uri="http://java.sun...

移动端滑动插件Swipe教程

2017年02月06日 42 阅读

前言最近需要开发一个新的“微信活动平台”，手机端主页需要用到一个幻灯片。因为好一段时间没有全部手写移动端页面了，遂又重新找了一个下有没有什么好的幻灯片插件，毕竟重复造轮子没有必要啊。综合比较后发现，Swipe 这款插件还是比较不错的，所以这里特地写一篇文章以像大家推荐，并且作为记录，方便下次查看。简介Swipe 是一个轻量级的移动滑动组件，这点从文件大小不难看出。它支持 1:1 的触摸移动，阻力以及防滑。单纯从移动端来使用，应该满足基本的需求了。说明从gi...

js实现可旋转的立方体模型

2017年02月06日 42 阅读

这是一个简单的立方体应用，他是很多立方旋转变换的基础，例如实现3D轮播图的实现等。<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>可旋转立方体效果</title><style type="text/css">*{padding: 0; margin: 0}img{border: 0}ul l...

js+css3制作时钟特效

2017年02月06日 42 阅读

我们先来看看效果图吧再来奉上源码<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3 钟表</title><style>.clock{position: relative;width: 200px;height: 200px;border-radius: 110px;border: 10...

js实现碰撞检测特效代码分享

2017年02月06日 39 阅读

自己做了碰撞检测的封装,先看下实例demo,在看封装<！DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>碰撞检测</title> <style type="text/css">*{margin: 0;padding: 0;}#divA,#divB{width: 200px;height: 200px;back...

JavaScript正则表达式实例详解

2017年02月06日 37 阅读

废话不多说了，直接把小编多年总结汇总的代码奉献给大家<script type="text/javascript">var str2 = "YouCan3You8Up,no can no bibi！";var reg = /^[0-9a-zA-Z]{1,}$/;console.log（reg.test（str2））;//正则表达式的一般形式//正则表达式对象的创建：//var 对象名 = new RegExp（参数1，参数2）;//参数1：匹配规...

JavaScript 实现的checkbox经典实例分享

2017年02月06日 41 阅读

JavaScript 实现的checkbox经典实例分享<！DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮件删除</title> <style type="text/css">*{margin: 0;padding: 0;}table{width: 400px;margin-left:200px;marg...

原生JavaScript制作计算器

2017年02月06日 39 阅读

原生JavaScript制作计算器<！DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <！--第一个数X--> X:<input type="text" id="inp1" value="" /><br /> &l...

bootstrap读书笔记之CSS组件（上）

2017年02月06日 40 阅读

bootstrap三大核心之二。包括glyphicon图标，下拉菜单（dropdown），按钮组（button group）....等等。一. 图标字体bootstrap3提供了200多个免费图标字体。认为它是一个字。arial-hidden="true".sr-only（只读）1. 引入方法：<i class="glyphicon glyphicon-search"></i>i标签是已经废弃了的html斜体标签。用span也可以。...

JQuery中解决重复动画的方法

2017年02月06日 40 阅读

下面我们就来总结一下几个JQuery中解决重复动画的办法，这里有几个常见的动画效果，它们分别是：图片滚动轮播，回到页面顶部，联级菜单滑出，手风琴。图片滚动：$（"#banner-min-img1"）.mouseover（function （）{$（"#banner-img"）.animate（{left:"0px"},300）}$（"#banner-min-img2"）.mouseover（function （）{ $（"#banner-img"）.an...

JavaScript中的ajax功能的概念和示例详解

2017年02月06日 40 阅读

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）。个人理解：ajax就是无刷新提交，然后得到返回内容。对应的不使用ajax时的传统网页如果需要更新内容（或用php做处理时），必须重载整个网页页面。示例：html代码如下<！DOCTYPE html><html><head><meta charset="UTF-8"><title>Aja...

jQuery 实现ajax传入参数含有特殊字符的方法总结

2017年02月06日 42 阅读

在做ajax登录时候遇到的一个问题，当传入参数含有特殊字符，比如：“$"#@”等。参数传递会有问题，无法正确获取。$.ajax（{url: "/user/login.ydd",type:"post",data:"name=abce&password=abcd&pwd",success: function（data）{}}）我要传入的是用户名为：abc，密码为abcd&pwd的用户登录。但传入后台获取参数，会被password=abcd当作一个参数传递，&这...

使用开源工具制作网页验证码的方法

2017年02月06日 38 阅读

开发工具：eclipse、kaptcha-2.3.jar包。一、创建Web项目；二、新建一个Jsp页面（内容有，一个文本框，一个图片容器，一个提交按钮）<body> <img alt="random" src="randomcode.jpg" onclick="changeR（this）" style="cursor: pointer;"> <form action="check.jsp"> <input type...

js浏览器html5表单验证

2017年02月06日 39 阅读

html5表单添加了很多类型的表单，而且还自带验证的功能。在移动端，手机等设备能够根据不同的input类型弹出不同的键盘，例如iphone弹的键盘但是由于不同的浏览器对不合法输入提示文案不一致，样式也不一样，并且老的浏览器不兼容（IE9及以下），导致了在生产环境中比较少见到。例如对于邮箱格式的检验，不同浏览器的效果如下：ChromeFirefoxIEsafarihtml5的表单跨浏览器有很大的问题具体来说存在三个问题：（1）输入框blur的时候不会触发检...

首页 / 脚本样式 / JavaScript

js利用appendChild对&lt;li&gt;标签进行排序的实现方法

JS实现动态增加和删除li标签行的实例代码

利用jQuery对无序列表排序的简单方法

浅谈js对象的创建和对6种继承模式的理解和遐想

jQuery监听文件上传实现进度条效果的方法

js实现点击图片自动提交action的简单方法

类似于QQ的右滑删除效果的实现方法

移动端滑动插件Swipe教程

js实现可旋转的立方体模型

js+css3制作时钟特效

js实现碰撞检测特效代码分享

JavaScript正则表达式实例详解

JavaScript 实现的checkbox经典实例分享

原生JavaScript制作计算器

bootstrap读书笔记之CSS组件（上）

JQuery中解决重复动画的方法

JavaScript中的ajax功能的概念和示例详解

jQuery 实现ajax传入参数含有特殊字符的方法总结

使用开源工具制作网页验证码的方法

js浏览器html5表单验证

js利用appendChild对<li>标签进行排序的实现方法