一 Javascript基础
概述：
Javascript主要是用来向HTML页面中添加交互的行为
Javascript是一种脚本语言，语法和Java类似
Javascript一般用来编写客户端的脚本
Javascript是一种解释性语言，边执行边解释
组成：
ECMAScript BOM DOM
基本结构：
<script type="text/javascript">
<!--
Javascript语句;
>
</script>
执行原理：
1，浏览器输入
发送请求
2，包含Javascript的请求页面
应用服务器
3，包含JavaScript的响应页面
返回响应
在网页中引用Javascript的方式：
1.使用<script>标签
2.使用外部Javascript文件
3.直接在Html标签中
数据类型：
undefined（未定义类型）
null（空类型）
number（数值类型）
String（字符串类型）
boolean（布尔类型）
String对象常用方法：
toString（）： 返回字符串
toLowerCase（）： 把字符串转换为小写
toUpperCase（）： 把字符串转换为大写
charAt（index）： 返回在指定位置的字符
indexOf（str，index）： 查找某个指定字符串的字符串中首次出现的位置
substring（index1，index2）： 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括index2对应的字符
split（str）: 将字符串分割为字符串数组
boolean返回结果：
undefined，number，String，boolean，object
数组常用方法：
属性： length： 设置或返回数组中元素的数目
方法： join（）： 把数组的所有元素放入一个字符串通过一个分隔符进行分割
sort（）： 对数组进行排序
push（）： 像数组末尾添加一个或更多元素，并返回新的长度
运算符号：
算数运算符：+,-,*,/,%,++,--
比较运算符：>,<,>=,<=,==,!=
逻辑运算符：&&,||,!
赋值运算符：=
逻辑控制语句：
1. 条件结构：
if结构：
语法：
if(表达式){
Javascript语句1;
}else{
Javascript语句2;
}
swtitch结构：
语法：
switch(表达式){
case 值1:
//javascript语句1;
break;
case 值2:
//javascript语句2;
break;
...
default:
//javascript语句N;
break;
}
2. 循环结构：
for循环语句：
语法：
for(初始化；条件；增量或减量){
//javascript语句;
}
while循环语句：
语法：
while(条件){
//Javascript语句;
}
do-while循环语句：
语法：
do{
//javascript语句0
}while(条件);
for-in循环语句：
语法：
for(变量 in 数组){
//javascript语句;
}
中断循环：
break:可以立即退出整个循环
continue：只是退出当前循环，根据判断条件决定是否进行下一次循环
注释：
//: 单行注释
/*多行注释*/
输入和输出：
1.警告（alert）
语法：
alert('提示信息');
2.提示（prompt）
prompt（）： 弹出一个提示对话框，等待用户输入一行数据
语法：
prompt("提示信息","输入框默认信息");
函数：
1.parseInt():
解析一个字符串，并返回一个整数
语法： parseInt("字符串");
2.parseFloat():
解析一个字符串，并返回一个浮点数
语法： parseFloat("字符串");
3.isNaN():
用于检查其参数是否是非法数字
语法：iaNaN(x);
4.自定义函数：
1. 语法：
function 函数名(参数1，2,3){
//javascript语句
[return 返回值]
};
2. 调用函数：
语法：
事件名=“函数名（）”；
二：
<!DOCTYPE html>
<html>
<head>
<title>shangji1.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
day-02 javascript对象
1.history
function fafa() {
history.go(0);
}
function fa() {
history.back();
}
function f() {
history.foward();
}
2.location
location.href location.reaload() location.replace()
3.document
window.οnlοad=function()
{
var lis=document.getElementsByName("li");
for(var i=0;i<i.length;i++)
{
lis[i].style.cssText="background:pink";
list[i].style.BackGroundColor="pink";
list[i].style.FontSize="15xp";
}
1.使用window对象可以实现弹出窗口，关闭当前窗口，弹出页面消息框等效果。
2.使用date对象可以获得当前系统的日期，时间。
3.使用特定的函数与date()可以制作时钟特效。
4.使用history和location对象的相关属性和方法可以轻松的实现浏览器中“后退”，前进“和”刷新“按钮的功能。
5.document对象的getElementById()方法用于访问唯一的元素。
6.document对象的getElementByName()方法用于访问相同name属性的一组数组。
7.document对象的getElementByTagName方法用于访问相同标签的一组数组元素。
</script>
</head>
<body>
<input type="button" οnclick="fafa()" value="点击">
<input type="button" οnclick="fa()" value="点击">
<input type="button" οnclick="f()" value="点击">
<div>
<ui>
<li>香蕉<>
<li>桃子<>
</ui>
</div>
</body>
<ml>
三；
01.!DOCTYPE html>
02.<html>
03. <head>
04. <title>3.html</title>
05. <script type="text/javascript">
06.//第三章 juery
07.//一：事件注册 表单元素：所有input开头
08. 触发事件
09. window.οnlοad=function()
10. {
11. var shijian=document.getElementById("div");
12. shijian.οnclick=function(){
13. alert("我是div");
14. };
15. };
16. 文本/标签的区别 innerText/innerHtml
17. //二：$(function(){});/window.οnlοad=function(){}的区别
18. $()：执行次数多 等待标签加载完
19. window.οnlοad=function(){}：执行次数少(一次) 等待所有的加载完
20. 三：jurey和js对象的相互转换
21. $(function() {
22. var dom=document.getElementById("id");
23. var $f=$(dom);//转换为query
24. alert($f.text());
25. //还原dom
26. var dom=$f[0];
27. alert(dom.innerText);
28. });
29. 四：//光棒效果
30. mouseover mouseout
31. $(function() {
32. $("li").mouseover(function() {
33. this.style.cssText = "background-color:pink";
34. }).mouseout(function() {
35. this.style.cssText = "background-color: ";
36. }
37.
38. );
39. });
40. 五：在juery下设置样式
41. 1.$(function() {
42. $("li").mouseover(function() {
43. this.style.cssText = "background-color:pink";
44. }).mouseout(function() {
45. $(this).css("background-color","");
46. }
47.
48. );
49. });
50. 2.css和addclass()区别：
51. $ (function(){
52. $("#box").css("width","300px").css("heigth","300px").css("border","1px solid green");
53. $("#box").addClass("m");
54. });
55.
56. </script>
57.
58. </head>
59.
60. <body>
61. 一.<div id="div">我是div</div>
62. 三：<h1 id="id">每天都在学习，每天都很开兴</h1>
63. 四：<ul>
64. <li>熊大</li>
65. <li>熊二</li>
66. <li>光头强</li>
67. </ul>
68. 五：
69. <div id="box">我是盒子</div>
70. </body>
71.</html>
四：
!DOCTYPE html>
02.<html>
03. <head>
04. <title>3.html</title>
05. <script type="text/javascript">
06.
07. //一：类选折器 标签选择器
08. 并集选折器/交集选折器/全局选折器
09. //1.交集
10. /* $(
11. function()
12. {
13. $("div#today").css("color","green");
14. }
15. ); */
16. //2.并集
17. /* $(
18. function()
19. {
20. $("#today,#tomary").css("color","pink");
21. }
22. ); */
23. //3.全局
24. $(function() {
25. $("*").css("color", "yellow");
26. });
27. //4.后代选折器 不直接 空格 子元素
28. //5.子选折器 > 直接子
29. 5、6.相邻选折器 + 后一个 向后查找之前的不行
30. 7.同辈~
31. 三：同辈选折器("[href]")/("[href=]")键值
32. ^ 以谁开头 "[href^=cn]"
33. $ 以谁结尾 "[href$=cn]"
34. * 包含 "[href$*=cn]"
35. 复合选折器 ( "a[href$*=cn]")
36. 四：过滤选择器
37. 1.$(
38. function(){
39. //$("li:first").css("color","pink");第一个
40. $("li:last").css("color","pink");最后一个
41. $("li:eq(1)").css("color","pink");某一个
42. $("li:gt(1)").css("color","pink");大于1
43. $("li:odd").css("color","pink");奇数
44. //$("li:even").css("color","pink");偶数
45. $("[id=box]").css("color","pink");
46. $("div:hidden");隐藏
47. $("div:hidden").show();显示
48. }
49. }
50. );
51. //2.可见性过过滤选折器/不可见性过过滤选折器
52. hidden();
53. </script>
54.
55. </head>
56.
57. <body>
58. <div id="today">如果爱可以重来</div>
59. <div id="tomary">把最美好的留在昨天</div>
60. //四：过滤选择器
61. <ul>
62. <li>吃饭</li>
63. <li>睡觉</li>
64. <li>冰果消消乐</li>
65. </ul>
66. </body>
67.</html>
五：
<!DOCTYPE html>
02.<html>
03. <head>
04. <title>shangji1.html</title>
05. <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
06. <script type="text/javascript">
07. //day-05 事件和动画
08. 事件：1.鼠标 click mouseover mouseout 光棒效果
09.
10. 2.键盘 keyup keypress(过程) keydown
11. $(function() {
12. $("input").keydown(function() {
13. $("span").append("keydown");
14. }).keypress(function() {
15. $("span").append("keypress");
16. }).keyup(function() {
17. $("span").append("keypup");
18. });
19. });
20.
21. 3.表单事件 focus blur 移入/移出
22.
23. $(function() {
24. $("input").focus(function() {
25. $(this).addClass("mycolor");
26. }).blur(function() {
27. $(this).removeClass("mycolor");
28. });
29. });
30. 4.复合事件 hover 移入/移出
31. $(function(){
32. $("li").hover(
33. function(){
34. $(this).css("background-color","pink");
35. }
36. ,function(){
37. $(this).css("background-color","");
38. });
39. });
40.
41. 绑定和移除事件 bind() unbind()
42. $(
43. function(){
44. $("li").bind("mouseover",
45. function()
46. {
47. (this).css("background","pink");
48. }
49. ).bind("mouseout",function()
50. {
51. (this).css("background","");
52. }
53. );
54. $("li").unbind("mouseout","mouseover");
55. }
56. );
57. on off live
58. toggle() 三连击
59. 动画：
60. 简单 显示和隐藏 show() hide()
61. 淡入淡出 fadeIn() fadeOut()
62. 改变元素高度 slideUp() slideDwon()
63.
64. $(function()
65. {
66. $("#butOut").click(function()
67. {
68. $("img").hide("");
69. });
70. $("#butIn").click(function()
71. {
72. $("img").show("slow");
73. });
74.
75. });
76.
77. 复杂 animate({})
78.
79.
80.
81. </script>
82. </head>
83.<body>
84.3.
85. 用户名<input type="text"></input>
86. 密码 <input type="password"></input>
87. 4.<ul>
88. <li>熊大</li>
89. <li>熊二</li>
90. <li>光头强</li>
91. </ul>
92.
93.</body>
94.</html>
六
<!DOCTYPE html>
<html>
<head>
<title>day0200.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="textml; charset=UTF-8">
<script type="text/javascript">
$(function(){
//添加节点
//添加到结尾
/*$("#d").click(function(){
var jq=$("<li>3333<>");
$("ul").append(jq);
});
*/
//添加到开头
/*$("#d").click(function(){
var jq=$("<li>3333<>");
$("ul").prepend(jq);
});
*/
//替换
/*$("#a").click(function(){
$("li:eq(0)").replaceWith("<li>ppp<>");
});*/
$("#u").click(function(){
/ar jq=$("<li>3333<>");
$("ul li:eq(0)").clone(true).appendTo("ul");
});
});
</script>
</head>
<body>
<ul>
<li>1111<>
<li>2222<>
</ul>
<input type="button" id="d" value="添加"/>
<input type="button" id="a" value="替换"/>
<input type="button" id="u" value="克隆"/>
</body>
<ml>
<span style="font-size:32px;">
</span>
七
[javascript] view plain copy
01.<pre class="javascript" name="code"><pre class="javascript" name="code">body>
02. <div id="header" class="main">
03. <div id="headerLeft">
04. <img src="images/logo.gif" /></div>
05. <div id="headerRight">注册 | 登录 | 帮助</div>
06. </div>
07. <div class="main">
08. <table id="center" border="0" cellspacing="0" cellpadding="0">
09. <tr>
10. <td>
11. <img src="images_l_t.gif" /></td>
12. </tr>
13. <tr>
14. <td class="bg">
15. <table width="100%" border="0" cellspacing="0" cellpadding="0">
16. <tr>
17. <td class="bold">登录休闲网</td>
18. </tr>
19. <form action="tiao.jsp" method="post" id="myform" name="myform" >
20. <tr>
21. <td>Email：<input id="email" type="text" name="email" class="inputs" /><span id="semail"></span></td>
22. </tr>
23. <tr>
24. <td> 密码：<input id="pwd" type="password" name="pwd" class="inputs" /><span id="spwd"></span></td>
25. </tr>
26. <tr>
27. <td style="height: 35px; padding-left: 30px;">
28. <input id="btn" type="submit" value="登录" class="rb1" /></td>
29. </tr>
30. </form>
31. </table>
32. </td>
33. </tr>
34. <tr>
35. <td>
36. <img src="images_l_b.gif" width="362" height="5" /></td>
37. </tr>
38. </table>
39. </div>
40. <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
41.</body>
42.<ml>
43.</pre><br>
44.表单校验的常见内容包括验证输入是否为空，验证数据格式是否正确，验证数据的范围，验证数据的长度等。 在表单校验中通常需要用到String对象的成员，包括indexOf( )，substring( )和length等。 表单校验中常用的两个事件是onsubmit和onblur，常用来激发验证。 使用正则表达式可验证用户输入的内容，如验证电子邮箱地址，电话号码等。 定义正则表达式有两种构造形式，一种是普通方式，另一种是构造函数的方式。 正则表达式的模式分为简单模式和复合模式。 通常使用RegExp对象的test(
45. )方法检测一个字符串是否匹配某个模式。 String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。 使用表单选择器和表单属性过滤器可以方便的获取匹配的表单元素。<pre class="javascript" name="code" snippet_file_name="blog_20170503_2_4925031" code_snippet_id="2369383">//验证密码
46.</pre>
47.<pre></pre>
48.<pre class="javascript" name="code" snippet_file_name="blog_20170503_3_17988" code_snippet_id="2369383"><!DOCTYPE html>
49.<html>
50.<head>
51.<title>1.html</title>
52.<title>购物车添加实现.html</title>
53.<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
54.<script type="text/javascript">
55. $(function() {
56. var dom = $("[type=text]");
57. dom.blur(function() {
58. var length = dom.val().length;
59. if (length < 6) {
60. $("span").text('不合法');
61. }
62.
63. });
64. });
65.</script>
66.</head>\
67.<body>
68. <form id="myform" action="提交的目标地址" method="post">
69. 用户名:<input type="text" value="Happy" /><span id="unamemsg"></span> 密码：<input
70. type="password" />
71. </form>
72.</body>
73.</html>
74.</pre>
75.<pre></pre>
76.<pre class="javascript" name="code" snippet_file_name="blog_20170503_4_4063386" code_snippet_id="2369383"><pre class="javascript" name="code" snippet_file_name="blog_20170503_4_4063386" code_snippet_id="2369383"><!DOCTYPE html>
77.<html>
78.<head>
79.<title>2.html</title>
80.<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
81.<script type="text/javascript">
82. function deng() {
83. var flag = true;
84. var dom = $("[id=email]");
85. var value = dom.val();
86. if (value.indexOf("@") == -1) {
87. alert("郵箱地址錯誤");
88. falg = false;
89. }
90. if (value.indexOf(".") == -1) {
91. alert("郵箱中必須包含.");
92. falg = false;
93. }
94. retur
95. flag;
96. }
97.
98. $(function() {
99. var form = $("form");
100. form.submit(function() {
101. return deng();
102. });
103. });
104.</script>
105.</head>
106.
107.<body>
108. <div id="header" class="main">
109. <div id="headerLeft">
110. <img src="images/logo.gif" />
111. </div>
112. <div id="headerRight">注册 | 登录 | 帮助</div>
113. </div>
114. <div class="main">
115. <table id="center" border="0" cellspacing="0" cellpadding="0">
116. <tr>
117. <td><img src="images/dl_l_t.gif" /></td>
118. </tr>
119. <tr>
120. <td class="bg">
121. <table width="100%" border="0" cellspacing="0" cellpadding="0">
122. <tr>
123. <td class="bold">登录休闲网</td>
124. </tr>
125. <form action="success.html" method="post" id="myform"
126. name="myform">
127. <tr>
128. <td>Email：<input id="email" type="text" name="email"
129. class="inputs" /></td>
130. </tr>
131. <tr>
132. <td> 密码：<input id="pwd" type="password" name="pwd"
133. class="inputs" /></td>
134. </tr>
135. <tr>
136. <td style="height: 35px; padding-left: 30px;"><input
137. id="btn" type="submit" value="登录" class="rb1" /></td>
138. </tr>
139. </form>
140. </table>
141. </td>
142. </tr>
143. <tr>
144. <td><img src="images/dl_l_b.gif" width="362" height="5" /></td>
145. </tr>
146. </table>
147. </div>
148. <div id="footer" class="main">
149. <a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a
150. href="#">帮助中心</a>
151. </div>
152.
153.</body>
154.</html><pre class="javascript" name="code" snippet_file_name="blog_20170503_4_4063386" code_snippet_id="2369383">function yname(num) {
155. var ename = $("[id=email]").val().length;
156. if (ename < 6) {
157. $("#semail").text("不合法");
158. num = 1;
159. } else {
160. $("#semail").text("合法");
161. }
162. return num;
163. }
164.
165. function pass(num) {
166. var ename = $("[id=pwd]").val().length;
167. if (ename < 6) {
168. $("#spwd").text("不合法");
169. num = 1;
170. } else {
171. $("#spwd").text("合法");
172. }
173. return num;
174. }
175.
176.$(function() {
177. var myforms=$("form");
178. myforms.submit(function() {
179.
180. var num1 = yname(0);
181. var num2 = pass(0);
182. var sum = num1 + num2;
183. if (sum > 0) {
184. return false;
185. }
186.
187. return true;
188. });
189. });
190.</pre><br>
191.<pre></pre>
192.<pre></pre>
193.<br>
194.<div style="top: 0px;"></div>
195.
196.</pre></pre></pre> 
10-27
591
591
03-23
853
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
