2018年01月_田江

原创 jQuery插件如何编写03_ 简单的全选反选插件

解释一下：这个代码没有吧全选前面的复选框和下面的复选框进行关联，在下一篇文章（jQuery插件如何编写04_ 简单的全选反选插件（关联了主复选框和子复选框，代码简单））中，会把这个功能实现了效果图：代码：全选反选 *{ margin: 0; padding:

2018-01-27 18:42:11 344

原创 jQuery插件如何编写05_ 简单的全选反选插件（完整版）

解释一下：这个版本是完整版，从“jQuery插件如何编写01”到“jQuery插件如何编写05”是让大家一步一步过渡过来，循序渐进地学习。效果图：代码：全选反选 *{ margin: 0; padding: 0; } ul {

2018-01-27 18:40:47 633 2

原创 jQuery插件如何编写02_ 简单的全选插件

解释一下：如果需要看进一步封装的效果，请进入“jQuery插件如何编写03_ 简单的全选反选插件”这篇文章效果图：代码：全选 *{ margin: 0; padding: 0; } ul { list-

2018-01-27 17:22:58 493

原创 jQuery插件如何编写01_ 插件的基本格式

插件的概念：插件（(Plug-in）就是一个一段程序代码，如果需要，调用即可。插件的好处是能够提高开发效率，高内聚，低耦合，程序不容易出现问题。生活中：插件就像u盘，usb鼠标，usb键盘，usb打印机一样，插上就能用，比如你的电脑没有打印功能，又想打印怎么办，买个“打印机”插件，插上就可以让你的电脑完成打印功能，打印机（插件）是提前做好的，谁的计

2018-01-27 17:09:40 771

原创原生js如何实现柱状图以及原生js柱状图结合ajax循环动态数据_JavaScript_柱状图（原生JavaScript做的柱状图）（03）_ajax获取数据

解释：原生JavaScript做的柱状图，数据是通过ajax从后端php代码中获取。如果有的柱子颜色是白色，就多点几次按钮。效果图：代码：前端html，css，js代码 /*整个显示柱状图的区域的高度的是500px;每个柱子的宽是50px;每个柱子的间隔是：50px；第一个柱子的left是100px；*/*{ mar

2018-01-25 15:14:24 2500

原创 JavaScript_柱状图（原生JavaScript做的柱状图）（02）

解释：该示例是把柱子对应的数据直接进行的赋值。如果需要用ajax从后台请求数据，只需要增加ajax请求部分即可。我在下一个示例中会写效果图：代码： *{ margin: 0px; padding: 0px; } #box{ position: relative; left:100px;

2018-01-25 15:13:32 3204

原创 JavaScript_柱状图布局（原生JavaScript做的柱状图）（01）

效果：解释：如果看不懂布局，可以把 #div1， #div2， #div3的css代码去掉，看看效果，方便理解代码： /*整个显示柱状图的区域的高度的是500px;每个柱子的宽是50px;每个柱子的间隔是：50px；第一个柱子的left是100px；*/*{ margin:0px; padding:0px;}#box{ width

2018-01-25 15:06:13 2278

原创 javascript_this的理解

文字解释：一、this的理解： this:是"这个"的意思，是代名词，代名词代表的意思要根据场景或情景决定。你，我，他，这个，那个，都是代名词。当有人说，"我在吃饭"时，那这个“我”是谁呢，就必须要看这句话是谁说的，谁说的，我就是谁，即“我”会根据说话的人变化而变化二、JavaScript中this的四种情况（this是函数的内置...

2018-01-25 15:05:59 2182 8

原创 JavaScript_如何使用arguments实现可变参数_的理解和应用02

//模拟substringfunction substring(str,start,stop){ let strTmp = ""; //判断传入参数的个数， if(arguments.length==2){ //如果一共传入了两个参数，说明没有传入stop，即获取到最后 var stop = str.length; } for(let i=start;i<stop;i++

2018-01-25 15:03:37 295

原创 JavaScript_如何使用arguments_的理解和应用01

arguments是什么： arguments是函数对象的内置对象，所以，arguments只能在函数里使用，该对象不用创建，可以直接使用。 arguments:保存着函数的所有的参数，可以当作数组使用（用下标访问），虽然可以像数组一样的访问每个参数，但是，并不是标准的数组（没法使用push等函数）。arguments的理解示意图：代码：

2018-01-25 15:02:54 232

原创 javascript_面向对象系列_03弹力球（ES6）

解释：可以把这个代码和“http://mp.blog.csdn.net/postedit/78954570”的ES3写法进行对比，你会发现，ES3和ES6只是写法不同，核心逻辑都是一样的，所以说，ES6只是个语法糖效果图：代码： *{ margin:0; padding:0; list-style:

2018-01-24 17:17:09 574 2

原创 javascript设计模式系列03_策略模式做的表单验证

效果图：代码： *{ padding:0; margin:0} 身份证号码：电话号码：电邮： //策略模式的代码开始var validator = { //写验证类型（描述了所有类型数

2018-01-24 14:36:45 453

原创 javascript_抛物线系列_04已知起点和终点画抛物线

代码： *{ margin:0; padding:0; list-style: none } #box{ position:absolute; left:0px; top:0px; width:100px; height:100px; background-color:p

2018-01-24 14:23:30 1291

原创抛物线系列_06购物车的抛物线

示意图：思路：//购物车的抛物线：//1、已知起点和终点//2、计算p的值//3、动态改变x的值，根据p来就算y的值。//4、把动态变换的点（x,y）赋给一张图片，//5、当图片到达终点时，隐藏即可代码： *{ margin:0; padding:0; list-style: none

2018-01-24 14:22:25 383

原创 cmd_把tooltip做成符合cmd规范

效果图：代码：解释一下：sea.js在网上可以自行下载html代码： Title *{ margin:0; padding:0; list-style: none; } #box1{ pos

2018-01-24 12:27:33 198

原创 jQuery_轮播图_淡入淡出效果（如何用jQuery实现一个淡入淡出轮播图）

解释：jQuery做的轮播图，淡入淡出效果，没有使用面向对象效果图：思路图：代码： *{ margin:0; padding:0; list-style: none; } #box{

2018-01-24 12:26:12 11077

原创 jQuery做的搜索提示框

效果图：代码： Title 张三疯张千锋王麻子张文浩王帆王雨 $(function () { $("#txtId").keyup(function () { $("li").css({"dis

2018-01-24 11:59:09 822

原创 jQuery写的隔行变色

效果图：代码： Title 我是box1 我是box3 我是box2 我是box4 我是box5 我是box6$(function () { $("div:even").css({"background-color":"yellow"}); $("div:odd").css({"b

2018-01-24 11:56:08 472

原创 javascript_tooltip插件_面向对象的写法（没有使用单例模式）

功能：鼠标放在指定的HTML元素上时，就会出现对应的提示框，提示框可以设置宽度，高度，背景颜色，字体颜色，字体大小，是否有边框，提示信息，是否有圆角。效果图：HTML代码： Title *{ margin:0; padding:0; list-st

2018-01-24 10:29:15 320

原创 javascript_面向对象_轮播图（淡入淡出）_ES3_使用prototype和构造函数

解释： 1、该轮播图的切换效果是淡入淡出 2、该轮播图使用了prototype属性，解决了上一版“http://blog.csdn.net/jiang7701037/article/details/78963256”javascript_面向对象_轮播图（淡入淡出）没有使用prototype的问题效果图：代码：HTML代码：

2018-01-24 10:04:31 602 2

原创 jQuery如何实现滑入滑出效果（跟随鼠标滑入滑出蒙板）

效果图：代码： *{ margin:0; padding:0; list-style: none } #box{ position:relative; margin: 100p

2018-01-23 20:29:49 3385 1

原创 jQuery怎么做插件_放大镜插件_单例

效果图：代码：html代码： *{ margin:0; padding:0; list-style: none } #box{ position:relative; wid

2018-01-23 20:21:52 649

原创 jQuery插件如何编写04_ 简单的全选反选插件（关联了主复选框和子复选框，代码简单）

解释一下：这个代码有一个bug：当点击“全选”后，紧接着点击“反选”按钮，那么全选的复选框状态和子复选框的状态不对应。下一个版本是完整版：jQuery插件如何编写05_ 简单的全选反选插件（完整版）效果图：代码：全选反选 *{ margin: 0; padd

2018-01-23 20:08:17 286

原创 jQuery_事件绑定如何用on实现事件委托

*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back

2018-01-23 20:03:33 3734 1

原创 jQuery_事件delegate

*{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:400px; height:300px; back

2018-01-23 20:00:11 362

原创 jQuery_事件_live

解释一下： live使用了事件委托，即把本该绑定在某个元素上的事件绑定在了HTML根元素上，由于这种做法比起delegate的效率低，所以，在jQuery1.9+中删除了live。 *{ margin:0; padding:0; list-style: non

2018-01-23 19:59:25 237

原创 jQuery_事件绑定_bind

解释一下： bind:能够完成基本的绑定事件的功能，比起直接使用click(),blur()等函数，bind可以一次绑定多个类型的事件 *{ margin:0; padding:0; list-style: none; }

2018-01-23 19:56:29 192

原创 jQuery中的绑定事件_on,bind,live,delegate的区别

bind:能够完成基本的绑定事件处理函数的功能，比起click(),mouseover()等的好处是，可以一次绑定多种事件类型 live:有事件委托，把事件处理函数委托给DOM根元素，效率比delegate低，所以很多新版jQuery去掉了live。 delegate:有事件委托，把事件处理函数委托给指定的父级元素，delegate比live的执行效率高 on:涵盖了以上所有的功能。 ...

2018-01-23 19:53:26 934 1

原创 jQuery_手风琴（不用下标）如何用jQuery做手风琴效果

效果图：代码： *{ margin: 0;padding: 0; } ul li{ list-style: none; } #box{ width:500px; heig

2018-01-23 19:47:49 307

原创 jQuery_手风琴（如何用jQuery做手风琴效果）

效果图：代码： *{ margin: 0;padding: 0; } ul li{ list-style: none; } #box{ width:500px; heig

2018-01-23 19:45:49 679 1

原创 javascript_面向对象系列_02用JS写一个类（ES3和ES6两种写法）

比如做HIS系统，有医生的角色（医生是一类人）ES3的写法//1）、定义类（型）function Doctor(workid,name,sex,age,dept){ //有什么，属性（成员变量） this.workid = workid;//this就是new出来的对象。 this.name = name; this.sex = sex; this.age =

2018-01-13 19:43:01 897

原创 javascript_面向对象系列_01概念

提纲： 1.为什么要使用面向对象 2.基本概念：类和对象 3.面向对象是什么 4.详细文字解释具体解释：一、为什么要使用面向对象1、现有的数据类型没法描述复杂的社会（复杂的数据），如：医生，患者，老师，学生等等。因为，现实生活中每个数据都是复杂（包括了很多数据）如：医生包括（工号，年龄，性别，科室等等）2、怎么

2018-01-13 19:28:31 890

原创 javascript设计模式系列01_单例模式应用_tooltip插件

效果图：代码： Title *{ margin:0; padding:0; list-style: none; } #box1{ position:relative; width

2018-01-11 12:16:27 561

原创 JavaScript设计模式系列02_工厂模式做的创建HTML标签

效果图：代码： Title let htmlFactory={ }; htmlFactory.createDom=function (tagName,obj) { let dom=document.createElement(tagName); for(let key in

2018-01-10 19:55:05 317

原创 JavaScript设计模式系列03_策略模式做的表单验证

效果图：代码： *{ padding:0; margin:0} 身份证号码：电话号码：电邮： function $(id) { return document.get

2018-01-10 19:51:56 440

原创 JavaScript提示框插件（tooltip）

效果图：代码： Title *{ margin:0; padding:0; list-style: none; } #box{ position:relative; width:40

2018-01-10 19:49:29 1416

原创 JavaScript设计模式系列05_观察者模式（发布订阅）写的数据联动（类似于vue的数据绑定）

效果图：代码： *{ padding:0; margin:0} 原始数字：平方：立方：三个数之和：function $(id) { return document.getElementById(id);}function $creat

2018-01-10 19:47:29 686

原创 JavaScript设计模式系列04_组合模式写的菜单

效果图：代码： *{ padding:0; margin:0} ul{ list-style:none} a{ text-decoration:none; display:block; width:200px; height:50px;} .one{ width:1000px; h

2018-01-09 20:00:48 390

原创 javascript_打砖块游戏_面向过程

效果图：代码：无标题文档*{ margin:0px; padding:0px;}#box{ width:500px; height:600px; border:5px solid red; background-color:black; margin:50px auto; position:relative;}.blockRo

2018-01-06 22:00:24 784 1

原创 showModalDialog的应用_数据的修改和删除

解释：以下代码只能在IE中使用，因为，showModalDialog只有IE浏览器支持效果图：代码：1、employee.html Document 姓名性别年龄操作狗蛋男18 二愣子女19 window.onload

2018-01-03 21:16:38 235

空空如也

空空如也