2019年05月_木生火

原创前端讲义58_5分钟精通AngularJS的MVC基本概念

Angular的MVC基本概念模型(model) ：应用的所需数据--- angular变量($scope.XX)控制器(controller)：应用的行为(业务控制逻辑)--- -angular函数(function)视图(view)：应用的界面(显示给用户看到的) ---Html+Angular指令双向绑定：控制器是Javascript代码设计的，视图模板是用HTML代码设计的，...

2019-05-28 00:46:19 142

原创前端讲义57_AngularJS数组循环

ng-repeat 指令会重复一个 HTML 元素，对于集合中（数组中）的每项会克隆一次HTML元素。效果如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS循环取出数组值</title><script src="an...

2019-05-24 06:01:47 230

原创前端讲义56_AngularJS的数组（含二维演示）

一维数组与二维数组的，代码案例<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS 数组 </title><script src="angular/angular-1.6.2.min.js"></script>...

2019-05-23 21:20:08 216

原创前端讲义55_AngularJS对象

AngularJS表达式支持对象,数组等复合类型<!DOCTYPE html><html><head><meta charset="utf-8"><title>AngularJS 对象 </title><script src="angular/angular-1.6.2.min.js"></s...

2019-05-23 20:46:37 122

原创前端讲义54_AngularJS的基本设计

ng-app指令加入body标签中，这个设计意味所有处于<body>…</body>元素内，可使用AngularJS指令，比如，下面AngularJS指令含义ng-init指令定义了初始值ng-model指令绑定 HTML 元素到应用程序数据{{}} 输出表达式代码举例<!DOCTYPE html><html&gt...

2019-05-22 23:04:42 227

转载前端讲义53_AngularJS安装

AngularJS最实用的特性:双向数据绑定到HTML元素下载 https://www.angularjs.net.cn/download/<head><meta charset="utf-8"><script src="angular/angular.min.js"></script></head>MVC三层架构M...

2019-05-19 23:03:15 117

原创前端讲义52_Bootstrap精简表格

类------描述.table 添加基本样式.table-striped 添加斑马线形式的条纹.table-bordered 为单元格添加边框.table-hover 启用鼠标悬停状态.table-condensed 表格更加紧凑<!DOCTYPE html><html><head><meta name="viewport" ...

2019-05-19 20:57:31 637

转载前端讲义51_Bootstrap安装

Bootstrap安装Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架下载本地 https://getbootstrap.com/docs/4.0/getting-started/download/CDN<head><meta charset="utf-8"><title>Bootstrap</title...

2019-05-19 20:55:02 132

原创 jQuery入学09_jQueryModie表单元素应用

文本输入框<input type="text" name="name" id="name" placeholder="全名">文本域<textarea name="addinfo" id="info" placeholder="工作经验"></textarea>单选按钮<fieldset data-role="controlgroup" data-ty...

2019-05-19 12:09:06 153

原创 jQuery入学16_jQueryModie搜索列表

data-filter="true" 属性可过滤的元素1表单 <form> 元素使用 "ui-filterable" 类，表单中放置<input> 元素，并指定 <input> 元素id，且加上 data-type="search" 属性如下：<form class="ui-filterable"> <input id="empid"...

2019-05-19 09:29:09 162

原创 jQuery入学15_jQueryModie响应式表格

一般用户各种移动设备采用响应式设计响应式表格有两种类型：回流与列切换回流模型:表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。在 <table> 元素上添加 data-role="table" 和 "ui-responsive" 类列切换模型:在宽度不够时隐藏数据在 <table> 元素上添加 data-role="table...

2019-05-17 22:53:40 202

原创 jQuery入学14_jQueryModie折叠内容块

为存储更多信息,使用可折叠块允许您隐藏或显示内容容器（div）添加 data-role="collapsible" 属性<div data-role="collapsible" </div>如需在页面加载时展开内容，请使用 data-collapsed="false"：<div data-role="collapsible" data-collapsed="false"...

2019-05-17 22:48:47 163

原创 jQuery入学13_jQueryModie头部和尾部栏定位

Inline - 默认。头部栏和尾部栏与页面内容内联。Fixed - 头部栏和尾部栏固定在页面的顶部和底部。Fullscreen 与 Fixed 定位模式基本相同，适用于照片、图像和视频。<div data-role="header" data-position="inline"></div><div data-role="footer" data-position...

2019-05-17 22:42:56 144

原创 jQuery入学12_jQueryMobie图标按钮

将图标添加到按钮，<a> <input> <button> 元素上使用ui-icon 类, 能定位图标位置按钮中添加图标<input type="button" value="刷新" data-icon="refresh"><button class="ui-btn ui-icon-refresh ui-btn-icon-left"&...

2019-05-17 22:35:33 127

原创 jQuery入学11_jQueryMobile页面切换

使用 data-transition 属性的链接或表单实现页面切换data-transition属性用法<a href="#link" data-transition="slide">从右向左滑动,切换到下一页</a><a href="#link" data-transition="slide" data-direction="reverse">从左向右滑...

2019-05-17 22:31:17 149

原创 jQuery入学10_jQueryMobile对话框

链接中添加data-rel="dialog"让用户点击链接时弹出对话框<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link r...

2019-05-17 22:28:10 141

原创 jQuery入学08_jQueryMobile简单实例

简单代码案例<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="js/jque...

2019-05-17 22:21:51 151

原创 jQuery入学07_jQueryMobile安装

jQuery Mobile可创建智能手机与平板电脑web应用,从 jQuerymobile.com下载库文件 http://jquerymobile.com/download/jQuery Mobile可创建智能手机与平板电脑web应用<head><meta name="viewport" conte...

2019-05-17 22:14:51 108

原创 jQuery入学06_网站基础色调

网站基础色调柔和-明亮-温和洁净-爽朗冷静-自然简单-洁净简单-高雅传统-优雅稳重-古典自然-安稳华丽-花哨(女性化的)华丽-动感(女性化的)活泼-快乐可爱-有趣忠厚-稳重...

2019-05-16 14:18:07 120

原创 jQuery入学05_jQuery延迟ready()事件

holdReady()函数$.holdReady(true); // 开始延迟//页面装载完成后自动回调$(() => { alert("页面装载完成！");});//以下调用一个函数$.holdReady(false); //即刻取消延迟window.setTimeout("$.holdReady(false);", 2000); //2秒后取消延迟holdRea...

2019-05-15 23:07:37 121

原创 jQuery入学04_jQuery核心函数

jQuery核心函数，主要用法jQuery(selector)jQuery(Element)jQuery(html)jQuery(callback)jQuery(selector)// 获取id为csdn的元素$("#csdn");// 获取class属性为test的元素，并为它们增加边框$(".test").css("border" , "3px dotted black")...

2019-05-15 22:57:28 105

原创 jQuery入学03_jQuery事件函数

在DOM事件都有一个等效的jQuery方法，比如页面HTML元素中指定一个点击事件，$(selector).click()添加函数到click事件：$(selector).click(function) 当click 事件发生时运行的function函数，举例，单击id="test" 的元素时弹出警报窗口文本<!DOCTYPE html><html>&...

2019-05-12 15:48:28 123

原创 jQuery入学02_jQuery 选择器

jQuery选择器使用HTML元素的 id、类、类型、属性、属性值等"查找"（或选择）。$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有 <p> 元素$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素$(".test").hide() - 隐藏所有 class="test"元素$("...

2019-05-12 15:25:28 168

原创 jQuery入学01_下载jQuery

下载jQuery https://code.jquery.com/Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）下载的文件放在网页的同一目录下，就可以使用jQuery，通过 src 属性来引用文件<head><script src=" jquery/jquer...

2019-05-12 15:22:59 115

原创前端讲义34_javascript使用HTML元素事件属性

比如当用户点击一个HTML元素时，事件发生了可以执行JavaScript代码，简单点代码<p onclick="this.innerHTML='谢谢!'">点击我!</p>或者<p onclick="changetext(this)">点我!</p><script> function changetext(id){...

2019-05-11 23:39:58 206

原创前端讲义33_javascript创建表单元素

创建表单元素：文本框text，按钮 button<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><p id="p1">创建表单项:文本,按钮 </p><script language="javascri...

2019-05-11 21:13:11 164

原创前端讲义32_javascript创建表格元素

DOM添加新元素，先创建该元素节点，然后把它追加到已有的元素上。<html><head><meta charset="utf-8"><title>DOM创建表格元素 </title><script language="javascript"> //创建表格 function createTable(w,h...

2019-05-10 22:37:33 156

原创前端讲义31_ javascript访问HTML DOM常用方法

HTML文档中的所有内容都是节点，整个文档是一个文档节点。每个元素是元素节点，元素内的文本是文本节点，元素的属性是属性节点举例<html> <head> <meta charset="utf-8"> <title>CSDN教程</title> </head> <body>...

2019-05-09 22:20:30 115

原创前端讲义30_javascript转换JSON数据为对象

一般从服务器中读取JSON数据，然后在网页中显示数据JSON数据格式 "name":"csdn"JSON对象格式 {"name":"csdn", "url":"www.csdn.net"}JSON数组格式"sites":[ {"name":"csdn", "url":"www.csdn.net"}, {"name":"msh2016", "url":"blog.csd...

2019-05-04 15:26:59 445

原创前端讲义29_Javascript简单验证有效Email

电子邮件地址最简短格式 X[a-z][0-9]@Y[a-z][0-9].ZZ[a-z][0-9] 其中X,Y,ZZ为不可缺的字符1必须包含 @ 符号和点号。2首字符不可以是@，@ 之后至少有一个点号3点号之后至少有两个字符<body><script>function validateForm(){ var x=document.forms["sen...

2019-05-04 14:57:39 384

原创前端讲义28_Javascript垃圾回收null

一个大对象用完，进行释放其内存时，设置为 nullvar empid = new Array();empid [0] = "C10094207";empid [1] = " C10094208";empid [2] = " C10094209";……empid [10000] = " C20094207";设置为 null，empid对象不再被任何变量引用，这时系统后台监控当前程序...

2019-05-04 00:02:57 180

原创前端讲义27_Javascript函数及自调用

函数声明后不会立刻执行，在需要时调用function functionName (parameters) { exec code...;}<body><p id="add"></p><script>function addFunc(a,b){return a+b;}document.getElementById("add")....

2019-05-03 23:24:44 175

原创前端讲义26_Javascript对象与方法

对象是拥有属性和方法可以使用字符来定义和创建 JavaScript 对象:var person = {firstName:"木",lastName:"生火",age:150,eyeColor:"black",id:”C10094207”};键值对写法为 name : value (键与值以冒号分割), 通常称为对象属性访问对象属性person. age;person["ag...

2019-05-03 14:02:27 151

转载前端讲义25_Javascript变量作用域

JavaScript没有块级作用域，取而代之地使用了函数作用域。函数里声明的所有变量（但不涉及赋值）都被"提前"至函数体的顶部。变量在函数外定义，即为全局变量变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。一般情况下，window对象的内置属性都拥有全局作用域，例如windo...

2019-05-03 12:44:30 85

原创前端讲义24_HTML5支持Javascript新特性defer async

在HTML5之前,浏览器解析到<script,,,/>元素时，浏览器会停止继续解析，执行HTML页面，而是执行以下两个动作：1，根据src属性下载对应的javascript脚本文件2，解析/执行javascrpt文件如果脚本文件先执行调用在其后加载HTML元素，则会出错HTML5增强属性defer 用于指定脚本延迟执行，它会告诉浏览器等整个页面加载之后再执行该<script...

2019-05-03 11:54:10 102

原创前端讲义23_Javascript数组应用实例-级联的下拉列表

选中第一个列表项，级联第二个下拉列表运行效果HTM5规范，源码代码文件cascadeMenu.html , 如下：<!DOCTYPE html><html><head> <meta name="author" content="msh" /> <meta http-equiv="Content-Type" co...

2019-05-02 21:16:46 224

原创前端讲义22_javascript事件分类

javascript事件分类一般事件onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 按下鼠标后松开鼠标触发此事件 onmousemove 当鼠标移动时触发此事件 onmouseover 当鼠标移动到某对象范围的上方时触发此事件 onmouseout 当鼠标离开某对象范围时触发此事件...

2019-05-02 20:47:09 118

原创前端讲义21_Javascript数组Array拼接成新数组

concat()方法用于基于当前数组创建一个新数组。首先创建原数组的一个副本，然后将接收的参数添加到数组末尾，返回新数组。var arr = [1,2,3], arr2 = arr.concat([4,5]), arr3 = arr.concat(6,7), arr4 = arr.concat(8,[9,10]);alert(arr); //1,2,3alert(a...

2019-05-02 20:41:14 379

原创前端讲义20_Javascript数组Array增删改

splice()方法splice(a,b,c)接收三个参数a代表执行操作的位置b代表在操作位置执行删除操作的次数c代表需要插入操作位置的值，可以是多个，返回值为删除的数组项根据a,b,c三个参数传入的情况不同可以衍生出三种对数组的操作（删除、插入、替换）。删除var nameArr = ["Tom","Lily","Sam","Bill"], item = nameArr.spli...

2019-05-02 20:33:59 100

原创前端讲义19_Javascript数组Array栈与队列

栈与队列方法栈方法，“后进先出” push()方法为数组末尾添加若干项并返回新数组长度，pop()方法从数组末尾取出一项，并返回取出的项。var colorArr = ["yellow","orange"], count = colorArr.push("white","black");alert(count); //4var item = colorArr.p...

2019-05-02 20:23:35 276

空空如也

空空如也