Day44 jQuery-2
83575 ワード
01-jqueryのイベントメカニズム学習
02-jQueryのアニメーション効果
03-jqueryアクションテーブル
04-jqueryフォームチェック
my.css:
jQueryは簡易計算機を実現
cls.css
cls.js:
html:
jQuery実装フラッシュ
flash.css
flash.js:
html:
まとめ:
01-jQueryのイベントメカニズム学習02-jQueryのアニメーション効果03-jQuery操作テーブル04-jQueryフォームチェック05-jQuery簡易計算機06-jQuery実現フラッシュ注意:
資料:jquery-1.9.1.js
<html>
<head>
<title>jquery title>
<meta charset="UTF-8"/>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//
//js ：
window.οnlοad=function(){
alert(" ");
}
window.οnlοad=function(){
alert(" ");
}
//jQuery ：
$(document).ready(function(){
alert(" ");
})
$(document).ready(function(){
alert(" 111");
})
//
$(function(){
alert(" ， ？");
})
//bind
$(function(){
//
$("#btn").bind("click",function(){
alert(" bind 1");
})
$("#btn").bind("click",function(){
alert(" bind 2");
})
$("#btn").bind("click",function(){
alert(" bind 3");
})
// one
$("#btn2").one("click",function(){
alert(" ");
})
//unbind--
$("#btn3").bind("click",function(){
$("#btn").unbind("click");
$("#btn2").unbind("click");
})
//trigger
$("#btn4").bind("click",function(){
$("input[type=button]:not(input[type=button]:last)").trigger("click")
})
//
$("#btn5").click(function(){
alert(" ， ， ");
})
})
script>
head>
<body>
<h3>jQuery h3>
<hr />
<input type="button" id="btn" value=" bind"/>
<input type="button" id="btn2" value=" one"/>
<input type="button" id="btn3" value=" unbind"/>
<input type="button" id="btn4" value=" trigger"/>
<input type="button" id="btn5" value=" "/>
body>
html>02-jQueryのアニメーション効果
<html>
<head>
<title>jquery title>
<meta charset="UTF-8"/>
<style type="text/css">
#div01{
height: 400px;
background-color: orange;
/* div*/
display: none;
}
#div02{
height: 400px;
background-color: darkmagenta;
}
style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function(){
$("#div01").show(2000);
$("#div02").hide(2000);
$("div").toggle(2000);
$("#div01").slideDown(2000);
$("#div02").slideUp(2000);
$("#div02").slideToggle(2000);
$("#div01").fadeOut(2000);
$("#div01").fadeIn(2000);
})
script>
head>
<body>
<div id="div01">
div>
<div id="div02">
div>
body>
html>03-jqueryアクションテーブル
<html>
<head>
<title> title>
<meta charset="UTF-8"/>
<style type="text/css">
table{
border: solid 1px;
}
tr{
height: 35px;
}
td{
width: 50px;
border: solid 1px;
}
style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function(){
//
$("#btn1").click(function(){
// checkbox
$("input[type=checkbox]").prop("checked","true");
})
//
$("#btn2").click(function(){
// checkbox
$("input[type=checkbox]").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
})
})
//
$("#btn3").click(function(){
$("input[type=checkbox]:checked").each(function(){
$(this).parents("tr").remove();
})
})
//
$("#btn4").click(function(){
$("tr:last").clone().appendTo("table");
})
//
$("#btn5").click(function(){
$("tr:even").css("background-color","orange");
$("tr:odd").css("background-color","darkcyan");
})
})
script>
head>
<body>
<h3>jquery h3>
<input type="button" id="btn1" value=" " />
<input type="button" id="btn2" value=" " />
<input type="button" id="btn3" value=" " />
<input type="button" id="btn4" value=" " />
<input type="button" id="btn5" value=" " />
<hr />
<table cellpadding="0px" cellspacing="0">
<tr id="t">
<td><input type="checkbox" name="" id="" value="" />td>
<td>1122222222td>
<td>333td>
<td>444td>
<td>55666td>
<td>666td>
<td>777td>
<td>8888td>
tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />td>
<td>1122td>
<td>333td>
<td>444td>
<td>55666td>
<td>666td>
<td>777td>
<td>8888td>
tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />td>
<td>1122td>
<td>333td>
<td>444td>
<td>55666td>
<td>666td>
<td>777td>
<td>8888td>
tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />td>
<td>1122td>
<td>333td>
<td>444td>
<td>55666td>
<td>666td>
<td>777td>
<td>8888td>
tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />td>
<td>1122td>
<td>333td>
<td>444td>
<td>55666td>
<td>666td>
<td>777td>
<td>8888td>
tr>
<tr>
<td><input type="checkbox" name="" id="" value="" />td>
<td>1122td>
<td>333td>
<td>444td>
<td>55666td>
<td>666td>
<td>777td>
<td>8888td>
tr>
table>
body>
html>04-jqueryフォームチェック
<html>
<head>
<meta charset="utf-8">
<title> title>
<link rel="stylesheet" type="text/css" href="css/my.css"/>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
// ，
$(function(){
//
$("#uname").blur(function(){
checkData(this,/^[\u4e00-\u9fa5]{2,4}$/)
// //
// var data=$(this).val()
// //
// var reg=/^[\u4e00-\u9fa5]{2,4}$/
// //
// if(data==""||data==null){
// $(this).next().html("*"+this.alt+" ").css("color","red");
// }else if(reg.test(data)){
// $(this).next().html("*"+this.alt+" ").css("color","green");
// }else{
// $(this).next().html("*"+this.alt+" ").css("color","red");
// }
})
//
$("#pwd").blur(function(){
checkData(this,/^[a-z]\w{5,7}$/)
})
//
$("#mail").blur(function(){
checkData(this,/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)
})
//
$("#phone").blur(function(){
checkData(this,/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/)
})
//
$("#intro").blur(function(){
//
var data=$(this).val();
//
if(data==""||data==null){
$(this).siblings("span").html("* ").css("color","red").addClass("error");
}else if(data.length<5){
$(this).siblings("span").html("* ").css("color","green").addClass("success");
}else{
$(this).siblings("span").html("* ").css("color","red").addClass("error");
}
})
//
$("input[name=fav]").click(function(){
if($("input[name=fav]:checked").length>0){
$("input[name=fav]:last").next().html("* ").css("color","green").addClass("success");
}else{
$("input[name=fav]:last").next().html("* ").css("color","red").addClass("error");
}
})
//
$("#agree").click(function(){
// if($(this).prop("checked")){
// $("#sub").prop("disabled",false);
// }else{
// $("#sub").prop("disabled",true);
// }
$("#sub").prop("disabled",!$(this).prop("checked"));
})
//
$("form").submit(function(){
$("input[type=text]").trigger("blur");// 、 、
$("input[type=password]").trigger("blur");//
$("#intro").trigger("blur");//
//
if($("input[name=fav]:checked").length>0){
$("input[name=fav]:last").next().html("* ").css("color","green").addClass("success");
}else{
$("input[name=fav]:last").next().html("* ").css("color","red").addClass("error");
}
// span
if($(".error").length>0){
return false;
}else{
return true;
}
})
//
function checkData(obj,reg){
//
var data=$(obj).val();
//
if(data==""||data==null){
$(obj).next().html("*"+obj.alt+" ").css("color","red").addClass("error");
}else if(reg.test(data)){
$(obj).next().html("*"+obj.alt+" ").css("color","green").addClass("success");
}else{
$(obj).next().html("*"+obj.alt+" ").css("color","red").addClass("error");
}
}
})
script>
head>
<body>
<hr />
<form action="#" method="get">
<div id="showdiv">
<table cellpadding="0" cellspacing="0">
<tr>
<td> :td>
<td>
<input type="text" name="uname" id="uname" value="" alt=" "/><span>span>
td>
tr>
<tr>
<td width="70px"> :td>
<td width="310px">
<input type="password" name="pwd" id="pwd" value="" alt=" "/><span>span>
td>
tr>
<tr>
<td> :td>
<td>
<input type="text" name="mail" id="mail" value="" alt=" "/><span>span>
td>
tr>
<tr>
<td> :td>
<td>
<input type="text" name="phone" id="phone" value="" alt=" "/><span>span>
td>
tr>
<tr>
<td> :td>
<td>
: <input type="radio" name="sex" id="" value="1" checked="checked"/>
: <input type="radio" name="sex" id="" value="0" />
td>
tr>
<tr>
<td> :td>
<td>
<input type="checkbox" name="fav" id="" value="1" />
<input type="checkbox" name="fav" id="" value="2" />
<input type="checkbox" name="fav" id="" value="3" />
<span>span>
td>
tr>
<tr>
<td> :td>
<td>
<select name="address" id="">
<option value="1"> option>
<option value="2"> option>
<option value="3"> option>
select>
td>
tr>
<tr>
<td> :td>
<td>
<textarea name="intro" id="intro" rows="4" cols="20">textarea><br /><span>span>
td>
tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" name="" id="agree" value="" />
td>
tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="" id="sub" value=" " disabled="disabled" />
td>
tr>
table>
div>
form>
body>
html>
my.css:
/* body*/
body{background-color: gray;}
/* */
table{margin: auto;margin-top: 10px;}
tr{height: 35px;}
/* div */
#showdiv{border: solid 1px; width: 400px; height: 450px;margin: auto;margin-top: 40px;
border-radius: 10px;background-color: orange;
}
jQueryは簡易計算機を実現
cls.css
h3{
text-align: center;
}
body{
background-color: gray;
}
#div1{
margin: auto;
border: solid 1px;
width: 300px;
height: 400px;
background-color: pink;
border-radius: 10px;
text-align: center;
}
input[type=text]{
width: 280px;
height: 30px;
margin-top:20px ;
margin-bottom:20px ;
}
input[type=button]{
width: 60px;
height: 40px;
margin: 5px;
border-radius: 10px;
font-size: 30px;
margin-top: 25px;
background-color: aquamarine;
}
cls.js:
$(function(){
$("input[type=button]").click(function(){
var value=$(this).val();
switch(value){
case "C":
$("#t").val("");
break;
case "=":
$("#t").val(eval($("#t").val()));
break;
default:
$("#t").val($("#t").val()+value);
break;
}
})
})html:
"utf-8">
"stylesheet" type="text/css" href="css/cls.css"/>
"js/jquery-1.9.1.js"</span> <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/javascript"</span> charset=<span class="hljs-string">"utf-8"</span>>
"js/cls.js"</span> <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text/javascript"</span> charset=<span class="hljs-string">"utf-8"</span>>
"div1">
type="text" name="" id="t" value="" />
type="button" id="" value="7" />
type="button" id="" value="8" />
type="button" id="" value="9" />
type="button" id="" value="*" />
type="button" id="" value="4" />
type="button" id="" value="5" />
type="button" id="" value="6" />
type="button" id="" value="-" />
type="button" id="" value="1" />
type="button" id="" value="2" />
type="button" id="" value="3" />
type="button" id="" value="+" />
type="button" id="" value="/" />
type="button" id="" value="0" />
type="button" id="" value="C" />
type="button" id="" value="=" />
jQuery実装フラッシュ
flash.css
#div1{
margin: auto;
margin-top: 50px;
width: 300px;
height: 300px;
border: solid 1px;
background-color: red;
}
#1{
}
body{
background-color: gray;
text-align: center;
}
flash.js:
$(function(){
var id;
$("#1").click(function(){
id=window.setInterval(function(){
var color=["red","green","yellow","pink","blue","black"];
var num=Math.floor(Math.random()*6);
$("#div1").css("background-color",color[num]);
},500)
})
$("#2").click(function(){
$("#div1").css("background-color","#808080");
})
$("#3").click(function(){
window.clearInterval(id);
})
$("#4").click(function(){
window.location.href="about:blank";
window.close();
})
})html:
<html>
<head>
<meta charset="utf-8">
<title> title>
<link rel="stylesheet" type="text/css" href="css/flash.css"/>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8">script>
<script src="js/flash.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<input type="button" id="1" value=" " />
<input type="button" id="2" value=" " />
<input type="button" id="3" value=" " />
<input type="button" id="4" value=" " />
<div id="div1">
div>
body>
html>
まとめ:
01-jQueryのイベントメカニズム学習02-jQueryのアニメーション効果03-jQuery操作テーブル04-jQueryフォームチェック05-jQuery簡易計算機06-jQuery実現フラッシュ注意:
1.words： onload ready unbind trigger display show hide toggle
slideToggle fadeOut fadeIn prop parents remove checked even odd
val alt prop
2.HBuilder ： rgb
if($("span").css("color")=="rgb(255, 0, 0)"){
return false;
}else{
return true;
}
3. jQuery
$(" ").val( );
4. ： ， 。
資料:jquery-1.9.1.js