U2随笔

Html 结构化

CSS 样式

JavaScript 行为交互

1、JavaScript基础

2、JavaScript操作BOM对象

3、JavaScript操作DOM对象*****

4、JavaScript的面向对象

------------------------------------------------------------------

jQuery（js）。css。js

jQuery选择器　　　　　*****

jQuery时间和动画

jQuery操作DOM对象　　*****

表单验证

表单验证的框架　　jquery　　validate

bootstrap　　封装了Html css js

JavaScript基础（liveScript）

1、和java的关系，只是借势！

2、是一个脚本语言，以（.js）结尾

3、流浪器编译JavaScript，解析器我们称之为JavaScript引擎！

4、无需预编译　　*****

　　js是一种弱语言类型　　var a=10;　　var a="101";　　var a=new Date();

5、运行在客户端　　***** 　　减轻服务器的压力

目的：

1、提升用户的体验

2、减轻服务器的压力、

组成部分：

1、ECMAScrip 规定了js的基本语法和基本对象

2、BOM（浏览器对象模型）提供了处理网页内容的方法和接口

3、DOM（文档对象模型）提供了与浏览器进行交互的方法和接口

我们一个页面中可以引入css文件还可以引入js文件？有没有顺序？

1、css写在head中

2、js文件的引入写在body的最下方

js的引入方式：

1、行内引入

2、内部引入

3、外部引人

js中的常用事件

1、不想让a超链接立即跳转至指定的页面

2、想让用户点击的时候　做一些处理工作

javascript：伪协议

　　1、先去执行js代码

　　2、根据js代码做操作

　　alert（‘就是不跳转’）　　后续会换成某个操作的函数（方法）

伪协议　　javascript：

onclick　　点击事件

onblur　　失去焦点事件

onfocus　获取焦点事件

js数据类型

undefined：声明但是没赋予初始值！没有被定义的变量！

　　　　var　　name；

　　　　alert（name）；//什么都没有

　　　　alert（typeof （name））；//undefined

number：包含了整数和浮点数

　　typeof （20）

　　typeof（20.2）

string：被单引号和双引号括起来的内容都是字符串

　　typeof （20）

　　typeof（20.2）

boolean：true 和 false

　　alert（typeof（TRUE））；//把TRUE当成一个变量名

　　alert（typeof（true））；　　// √

　　alert（typeof（“true”））；　　//string

object：js中的对象，包含数组，null和对象！

null：控制，表示对象不存在，等于undefined！

typeof 检测变量的数据类型

1、typeof 空格变量名称

2、typeof（变量名称）*****

初识JavaScript

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>初识JS</title>
	<!--
	JavaScript:
	组成：
	01.ECMAScript描述了js语言的语法和基本的对象！
	02.DOM（文档对象模型）描述了处理网页内容的方法和接口
	03.BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口
	特点：
	01.无需预编译弱语言类型
	02.运行在客户端减轻服务器压力

	网页中引入css和js文件的顺序！
	css引入在head标签中！目的就是在用户看到页面的时候有样式！
	js引入在body标签中的对下面！目的是在交互过程中，确保所有的内容加载完毕！
	-->
	</head>
	<!--01.行内 onload="alert('大家辛苦了1！');alert('大家辛苦了2！');"-->
	<body>


	<!-- 02.内部-->
	<script type="text/javascript">
	/* alert("大家辛苦了！");*/
	</script>

	<!--03.外部样式引入-->
	<script type="text/javascript" src="js/alert.js"></script>
	</body>
	</html>

基本事件

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>基本事件</title>
	</head>
	<body>
	<!--
	javascript: 伪协议！
	当我们运行到javascript: 的时候，程序会先执行对应的js代码！之后再操作！
	无论是超链接还是提交按钮，都不会立即执行！
	-->
	<a href="javascript:">跳转</a> <br/>
	<input type="button" value="普通按钮" onclick="javascript:alert('你说可以');"> <br/>

	<input type="text" placeholder="请输入用户名" on onblur="javascript:alert('失去焦点');">
	<!--
	onfocus="javascript:alert('获取焦点');"
	-->
	</body>
	</html>

数据类型

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>数据类型</title>
	</head>
	<body>
	<!--
	undefined :只声明了变量，但是没有赋予初始值，就是undefined
	//声明变量
	var myName;
	alert("姓名是："+myName); //name什么都没有
	alert("name的数据类型是："+(typeof(myName)));


	null：空值，不存在的对象等于undefined
	alert(null==undefined);

	number：包含了整数和浮点数
	alert("20的数据类型："+typeof(20));
	alert("20.5的数据类型："+typeof(20.5));
	boolean：true 和 false
	alert(typeof(TRUE)); // 把TRUE当成了一个变量所以输出 undefined
	alert(typeof(true));
	alert(typeof("true")); //string

	string ：被单引号或者双引号引起来的文本
	alert(typeof('a'));
	alert(typeof("a"));

	object：js中的对象，包含数组，对象和null
	var arr1=new Array(1,2,3);
	var arr2=new Array("小黑","小白");
	var arr3=[];
	arr3[0]=1;
	arr3[1]=12.2;
	arr3[2]="小黑"; //可以存放不同的数据类型

	alert("arr3的数据类型"+typeof(arr3));
	alert("arr3的第3个元素"+arr3[2]);
	alert("null的数据类型"+typeof(null));
	var date=new Date();
	alert("date的数据类型"+typeof(date));
	-->


	<script type="text/javascript">



	</script>
	</body>
	</html>

输入和确认

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>输入和确认</title>
	</head>
	<body>

	<!--
	alert("大家\n辛苦了"); // \n是换行
	alert：是一个提示框，具有确定按钮！
	confirm：是一个提示框，具有确定和取消按钮！
	prompt：是一个对话框，有两个参数
	01.第1个参数，是提示语
	02.第2个参数，是输入框的默认值，可以省略此参数
	-->
	<script type="text/javascript">

	var flag= confirm("你想迎娶白富美吗？");
	if(flag){ //用户点击的是确定
	var answer= prompt("你月收入多少呀？","请输入收入"); //获取用户的输入
	document.write("您的收入是："+answer);
	}else{
	alert("你就一屌丝！")
	}


	</script>

	</body>
	</html>

类型转换

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<script type="text/javascript">
	var num1="123.45a",num2="a123.45";
	/*
	* parseInt()：前提字符串第一个位置必须是数字，直到遇到 . 或者非数字时返回得到整数
	* parseFloat():前提字符串第一个位置必须是数字直到遇到非数字时返回得到浮点数
	*/
	document.write(parseInt(num1)+"<br/>");
	document.write(parseInt(num2)+"<br/>"); //NaN 说明不是一个数字
	document.write(parseFloat(num1)+"<br/>");
	document.write("<hr/>");
	/**
	* 强制类型转换
	* Boolean():里面的参数只要不是false,0,null,undefied,空,NaN,未定义的变量之外都会返回true
	* Number(): 是把整个字符串作为参数之后进行强制类型转换！要确保参数是数值类型或者boolean true=1 false=0;
	* String()
	*/
	document.write(Boolean(true)+"<br/>");
	document.write(Number(num1)+"<br/>");
	document.write(String(typeof (num1))+"<br/>");
	alert(typeof 1);
	alert(typeof (1)); //推荐使用

	</script>

	</body>
	</html>

运算符

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>常用的运算符</title>


	</head>
	<body>
	<script type="text/javascript">
	/**
	* 常用的运算符
	*/
	document.write("+运算："+(5+5)+"<br/>");
	document.write("-运算："+(5-5)+"<br/>");
	document.write("运算："+(55)+"<br/>");
	document.write("/运算："+(5/5)+"<br/>");
	// % 取余
	var num=3;
	/*
	++在变量前先自身加1 之后参与运算
	++在变量后先参与运算之后自身加1
	*/
	document.write("%运算："+(5%3)+"<br/>");
	document.write("++运算："+(num++)+"<br/>");
	document.write("--运算："+(num--)+"<br/>");
	document.write("--运算之后："+(num)+"<br/>");


	</script>

	</body>
	</html>

switch

<!DOCTYPE html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>switch</title>

	</head>
	<body>



	<script type="text/javascript">
	var num=window.prompt("请问：今天周几？"); //让用户输入整数
	switch (parseInt(num)){ // 因为用户输入的是字符串要么 case "1" 要么 parseInt(num)
	case 1:
	alert(1);
	break;
	alert(111); // 没有意义但是不会报错
	case 2:
	alert(2);
	break;
	case 3:
	alert(3);
	break;
	default :
	alert("default");
	}


	</script>
	</body>

	</html>

7、break continue

<!DOCTYPE html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>break,continue</title>
	</head>
	<body>
	<script type="text/javascript">
	for(var i=0;i<=5;i++){ //break
	if(i==5) break;
	document.write(i+"<br/>");
	}
	document.write("<hr/>");
	for(var i=0;i<=5;i++){ //continue
	if(i==3)continue;
	document.write(i+"<br/>");
	}

	</script>
	</body>

	</html>

= =和 = = =

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>== 和 ===</title>
	</head>
	<body>

	<!--
	== ：在比较的时候，会把相对来说复杂的类型转换成简单类型之后比较两个变量的值
	===:先比较两个变量的数据类型，如果数据类型一致，再比较值！
	-->
	<script type="text/javascript">
	var num1=5;
	var num2="5";
	document.write("num1==num2:::"+(num1==num2)+"<br/>");
	document.write("num1===num2:::"+(num1===num2));

	</script>

	</body>
	</html>

函数

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>函数</title>
	</head>
	<body>

	<!-- 方法的调用-->
	<input type="button" value="hello" onclick="sayHello();"> <br/>
	<input type="button" value="bye" onclick="sayBye();"><br/>
	<input type="button" value="haha" onclick="haha();"><br/>



	<script type="text/javascript">



	//01.定义一个函数
	function sayHello(){
	alert("大家好！");
	}
	//02.定义一个函数
	var sayBye=function(){
	alert("拜拜大家！");
	}


	function haha(){
	sayHello();
	sayBye();
	}

	</script>

	</body>
	</html>

数组

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>数组</title>
	</head>
	<body>



	<script type="text/javascript">
	var arr1=new Array(); //没有长度
	var arr2=new Array(5); //只有一个参数是长度
	var arr3=new Array(1,2,3,4,5); // 定义数组的同时开辟空间并赋值
	var arr4=[1];
	document.write("arr1.length"+arr1.length+"<br/>");
	document.write("arr2.length"+arr2.length+"<br/>");
	document.write("arr3.length"+arr3.length+"<br/>");
	document.write("arr4.length"+arr4.length+"<br/>");
	document.write("arr4[0]"+arr4[0]+"<br/>");
	document.write("arr4[1]"+arr4[1]+"<br/>");

	//定义一个字符串转换成数据
	var str="haha,heihei,hehe,houhou";
	var arr5= str.split(","); //返回一个数据
	document.write(arr5.length+"<br/>");
	//向数组中添加一个元素
	arr5.push("heiheihahahehe");
	document.write("arr5[4]"+arr5[4]+"<br/>");
	//把数组中的每一个元素通过一个分隔符连接在一起形成新的字符串
	str=arr5.join("+");
	document.write(str);

	</script>

	</body>
	</html>

for in

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>for in</title>
	</head>
	<body>


	<script type="text/javascript">
	var arr=[1,2,3,4,5,6];
	/* i 是下标 */
	for(var i in arr){
	document.write(arr[i]);
	}

	</script>
	</body>
	</html>

捕获异常

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>捕获异常</title>
	</head>
	<body>


	<script type="text/javascript">
	/*
	* ex.name 错误名称
	* ex.message 错误信息
	*/
	try{
	sasas
	}catch(ex){
	alert(ex.name+":"+ex.message);
	}
	alert("大家辛苦了2");
	</script>
	</body>
	</html>

debug

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>debug</title>
	</head>
	<body>

	<!--
	网页中 F12
	如果网页有代码错误会在console台中显示错误信息
	之后选中错误出现的行！
	就到达 sources页面
	就可以打断点（选择行号）



	NetWork 是我们所有访问的资源文件
	-->

	<img src="data:images/a.jpg">

	<script type="text/javascript">

	document.write(1+"<br/>");
	document.write(2+"<br/>");
	document.write(3+"<br/>");
	sasaasa
	document.write(4+"<br/>");
	document.write(5+"<br/>");
	document.write(6+"<br/>");
	</script>
	</body>
	</html>

待续

U2随笔的更多相关文章

Matlab随笔之线性规划
原文:Matlab随笔之线性规划 LP(Linear programming,线性规划)是一种优化方法,在优化问题中目标函数和约束函数均为向量变量的线性函数,LP问题可描述为:min xs.t. ...
AI人工智能系列随笔
初探 AI人工智能系列随笔:syntaxnet 初探(1)
【置顶】CoreCLR系列随笔
CoreCLR配置系列在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...
C++随笔：.NET CoreCLR之GC探索（4）
今天继续来带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...
C++随笔：从Hello World 探秘CoreCLR的内部(1)
紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...
ASP.NET MVC 系列随笔汇总[未完待续……]
ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...
使用Beautiful Soup编写一个爬虫系列随笔汇总
这几篇博文只是为了记录学习Beautiful Soup的过程,不仅方便自己以后查看,也许能帮到同样在学习这个技术的朋友.通过学习Beautiful Soup基础知识完成了一个简单的爬虫服务:从all ...
利用Python进行数据分析基础系列随笔汇总
一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

phpStudy 虚拟主机
转载:http://blog.csdn.net/sinat_35861664/article/details/53557574 windows下配置虚拟主机,实现多域名访问本地项目目录 1.Apach ...
Use of exceptionless, 作全局日志分布式记录处理
Download latest release of exceptionless on github and deploy on Window server, by default exception ...
bzoj 2653 二分答案+可持久化线段树
首先离散化,然后我们知道如果对于一个询问的区间[l1,r1],[l2,r2],我们二分到一个答案x,将[l1,r2]区间中的元素大于等于x的设为1,其余的设为-1,那么如果[l1,r1]的最大右区间和 ...
var_dump打印出来格式太乱怎么调
var_dump()和print_r() 输出的都是文本格式,在浏览器中就是这样如果你加载了 xdebug 扩展,那么 var_dump() 就会以 html 格式输出
（5）剑指Offer之栈变队列和栈的压入、弹出序列
一用两个栈实现队列题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 问题分析: 先来回顾一下栈和队列的基本特点: 栈:后进先出(LIFO) 队列: ...
AD服务器安装文档
Windows Server 2008 R2 AD服务器搭建 1. AD服务器简介应用到: Windows Server 2003, Windows Server 2003 R2, Windows ...
出现ERROR: While executing gem ... (Gem::FilePermissionError)这种错误的解决办法
重新安装ruby即可解决 brew install ruby
windows 10开启bash on windows，配置sshd，部署hadoop
1.安装Bash on Windows 这个参考官网步骤,很容易安装,https://msdn.microsoft.com/en-us/commandline/wsl/install_guide 安装 ...
响应式设计：根据不同设备引不同css样式
<link rel="stylesheet" media="screen and (max-width:600px)" href="small. ...
PHP–图像XX因其本身有错无法显示
1.你输出的图像格式 PHP不支持,检查GD库有没有开启对应的图像格式是不是支持2.文件里面的格式是否一致如果是UTF-8的检查文件格式是不是UTF-8 [UTF-8+BOM很多IDE默认是这个格 ...

U2随笔

U2随笔的更多相关文章

随机推荐

热门专题