タスク今日
JS完全なページ愛用ポップアップ広告
完成したフォームバリデーションの使用JS
JSは、インターレース色の変化を使用してフォームを完成します
JS使用する]チェックボックスを選択効果を完了するために
JSの使用省連携の効果を完了するために
ドロップダウンリストの周りのJSコントロール
教育ナビゲーション
- BOMは、JSのオブジェクトを把握します
- 一般的なイベントのJS把握
- JSでの一般的なDOM操作をマスター
- 内蔵のJS内のオブジェクトを学びます
前回レビューの内容：
CSS：カスケーディングスタイルシート
主な機能：コードの再利用性を向上させ、ページ、造園やHTMLの分離を美化します
セレクター：
セレクタ要素：要素名{}
クラスセレクタ：初め。
IDセレクタ：#IDセレクタ
子孫セレクタ：1セレクタセレクタ2
セレクタのサブ要素：セレクタ1>セレクタ2
セレクタ群：セレクタ、セレクタ2、セレクタ{3}
属性セレクタ：セレクタ[プロパティの属性名=「値「]
疑似クラスセレクタ：
フロート：
フロート属性：左右
クリアフロート：
明確な属性：左右両方
ボックスモデル：右下をパディング左10pxの20ピクセル30px 40ピクセルの方向を時計回り
パディング：からコントロールボックス
国境：国境ボックス
余白：箱と箱との間の距離を制御します
絶対位置：位置：絶対;トップ：左
JS開発：スクリプト言語を実行するために、ブラウザによって解釈され、コンパイルする必要はありません。
JS変数宣言します。var変数名;
JS関数宣言：関数の関数名（パラメータ名）{}
JSの開発ステップ：
1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
0カルーセル図自動再生
要件：
そこの画像のセットは、3秒ごとであり、スイッチに行き、最終的には常にスイッチとなっています
技術的な分析：
画像の切り替え：
一つのことを行うために各3秒：
ステップ分析：
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
1.ページを完成ポップアップ広告を時限
1.1要求分析
私たちが最初に開いたときの一般的なページが、それは5秒後になると、広告が表示されます、私たちは5秒を見てみましょう、その後、彼の広告が自動的に消えます！
1.2テクニカル分析
-
タイマー
- setInterval：何ミリ秒ごとに機能を実行するために、
- setTimeout：何ミリ秒後に機能を実行します
- clearInterval
- clearTimeout
- ディスプレイ広告のimg.style.display =「ブロック」
- 隠された広告img.style.display =「なし」
ステップの1.3分析
- イベントを決定します。ページが読み込まれるのonloadイベントを
- トリガ機能へのイベント：initを（）
-
一つのことを行うためのinit関数内：
- タイマーを起動しますのsetTimeout（）
-
ディスプレイ広告
- その後、5秒時限開くために行く広告をオフに
1.4コードの実装
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>拡張1.5
- 導入のJSの仕方
検証を完了するために、フォームに記入し2.
2.1要求分析
昨日は、ユーザーが何かがうまくいかないとき、私たちは、変更を促すダイアログボックスがポップアップ入るたびシンプルなフォームの検証を、作られました。このユーザーの経験は非常に良いではありません。私たちは、ユーザが質問に情報を入力したとき、我々は彼に優しいヒントを与えるために箱の裏を再入力します、彼は修正を行うために、今日がある必要があります。
2.2テクニカル分析
[HTMLは、innerHTMLプロパティの属性]
[JSでの共通イベント]
イベントONFOCUS：フォーカスイベントを取得します
onblur：失うフォーカス
onkeyupの：ボタンアップイベント
ステップの2.3分析
2.4コードの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID,msg){
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//显示校验结果
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkPassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>朝のレビュー：
タイマー：
setInterval（「試験（）」、3000）を実行する機能毎に何ミリ秒
setTimeout（「テスト（）」、3000）何ミリ秒後に機能を実行します
タイマーコール上記timerIdの後
clearInterval（）
clearTimeout（）
スイッチング絵
img.src =「画像パス」
イベント：イベントonloadイベントは、文書の完成ロードを持っています
ディスプレイ広告：img.style.display =「ブロック」
隠された広告：img.style.display =「なし」
外部JSファイルの導入
<script src="js文件的路径" type="text/javascript"/>一般的に使用される形態の検証イベント：
イベントがフォーカスを取得します。ONFOCUS
ONBLURイベントがフォーカスを失いました
ボタンアップイベント：onkeyupの
JSの開発ステップ
1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerHTML属性... innerTEXT
3.フォームには、色の変化をインターレース
3.1要求分析
我々はあまりにも、各行は同じ色を表示する場合、人々は、ユーザーエクスペリエンスを向上させ、ユーザーが間違っを削減するために、彼らはインターレースの色の変化を形成するために必要な、めまいが表示されますことを情報のカテゴリ
3.2テクニカル分析
線の色を変更
ステップ3.3分析
-
OKイベント：ドキュメントのonloadロード
-
トリガ機能へのイベント：initを（）
- 関数：ページの要素を操作
テーブル運転の各行には、
背景色のダイナミックラインを変更します
- 関数：ページの要素を操作
-
3.4コードの実装
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>4.選択し、チェックボックスを選択し、全体されていません
4.1要求分析
カテゴリーは、私たちが箱の上に全体の時間をクリックすると、我々は、キャンセルする場合、商品の全てを選択したい、私たちはすべての商品を選択する必要はありません、インタフェース
4.2テクニカル分析
イベント：onclickのクリックイベント
ステップの4.3分析
すべての[選択なし段階の分析を選択します。
1.イベントを決定します。onclickのシングルイベント
2.イベントトリガ機能：checkAll（）
3.機能を何かをします：
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态コードの実装
function checkAll(){
// 获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}連関効果省
5.1要求分析
5.2テクニカル分析
DOMとは何か：ドキュメントオブジェクトモデル：私たちのドキュメントCRUDルールを管理します
[中] HTML DOM操作
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点ステップの5.3分析
5.4コードの実装
6.左右の選択ドロップダウンコントロールJS
6.1要件分析：
私たちのカテゴリ管理では、我々は少し時間を変更するとき、あなたが商品の分類の説明や分類、この分類の名前を変更することができ、ページへのジャンプを編集することができ、当社の機密情報を変更することができるようにしたいです
分析ステップ6.2：
6.3コードの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>今日のコンテンツの簡単なレビュー：
タイマー：
setInterval
setTimeout
clearInterval
clearTimeout
画像を非表示にします
img.style.display = "ブロック"
img.style.display = "なし"
一般的なイベントに使用される形式：
ONFOCUS：フォーカスイベントを取得
onblur：失われたフォーカスイベント
onkeyupの：キーイベントが発生しました
onclickの：イベントをクリックします
れるondblclick：ダブルクリックイベント
表には、色の変化をインターレース、および削除変色にマウスを移動します。
onmouseenter：マウスを動かします
れるonmouseout：マウスアウト
onloadイベント：ドキュメントロードイベント
onSubmit：提出
onchange：コンテンツの変更のドロップダウンリスト
選択checkbox.checked
DOMドキュメントアクション：
appendChild：ノードの追加
ノードを作成しますのdocument.createElementを
テキストノードを作成します。document.createTextNode（）
JSの開発ステップ：
1. 确认事件
2. 事件触发函数
3. 函数里面要做一些交互