<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script src="Scripts/assist.js"></script>
<link href="styles/selectstyle.css" rel="stylesheet" />
<title>基本选择器</title>
<script type="text/javascript">
$(function () {
//选择 id为 one 的元素#b6ff00
$("#btn1").click(function () {
$("#one").css("background-color", "#b6ff00");
});
//选择 class 为 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color", "#b6ff00");
});
//选择 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color", "#b6ff00");
});
//选择 所有的元素
$("#btn4").click(function () {
$("*").css("background-color", "#b6ff00");
});
//选择 所有的span元素和id为two的div元素
$("#btn5").click(function () {
$("#two,span").css("background-color", "#b6ff00");
});
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
<br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" />
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
<br />
<br />
<!-- 测试的元素 -->
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div(女警)
<div class="mini">class为mini的div(曙光)</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div(金克斯)
<div class="mini" title="other">class为mini,title为other的div(宝石)</div>
<div class="mini" title="test">class为mini,title为test的div(璐璐)</div>
</div>
<div class="one">
class为one的div(EZ)
<div class="mini">class为mini的div(琴女)</div>
<div class="mini">class为mini的div(众星之子)</div>
<div class="mini">class为mini的div(唤潮鲛姬)</div>
<div class="mini">class为mini的div(牛头)</div>
</div>
<div class="one">
class为one的div(奥巴马)
<div class="mini">class为mini的div(凤女)</div>
<div class="mini">class为mini的div(机器人)</div>
<div class="mini">class为mini的div(狗熊)</div>
<div class="mini" title="tesst">class为mini,title为tesst的div(雪人)</div>
</div>
<div style="display: none;" class="none">
style的display为"none"的div(VN)
</div>
<div class="hide">
class为"hide"的div(螃蟹)
</div>
<div>
包含input的type为"hidden"的div(飞机)
<input type="hidden" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
$("#result").attr("readonly", "readonly");
$("#btn_equal").click(function () {
var numone = parseFloat($("#Num_one").val());
var numtwo = parseFloat($("#Num_two").val());
var numresult = numone + numtwo;
$("#result").val(numresult);
});
});
</script>
</head>
<body>
<input type="Text" id="Num_one" value="" />+
<input type="Text" id="Num_two" value="" />
<input type="Button" id="btn_equal" value="=" />
<input type="Text" id="result" value="" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
$("#font_size ,#font_sizespan").click(function () {
alert("Hello Word");
}).mouseenter(function () {
$(this).css({ "color": "red", "background-color": "cyan" });
}).mouseout(function () {
$(this).css("color", "blue");
});
//改变字体颜色
$("#font_color").mousedown(function () {
$(this).css("color", "yellow");
});
//获取文本框内输入的值
$("#btn_login").click(function () {
var username = $("#user_Name").val();
$("#div_name").html(username);
});
//设定文本框内的值
//$("#btn_login").click(function () {
// var username = $("#user_Name").val("李白");
//});
});
</script>
<meta charset="utf-8" />
</head>
<body>
<div>
<span id="font_size">点我</span>
<br />
<span id="font_sizespan">点我</span>
<br />
<span id="font_color">点我变色</span>
<br />
<input type="text" id="user_Name" value="" />
<br />
<input type="button" id="btn_login" value="登录" />
<div id="div_name"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.11.3.js"></script>
<style>
table, tr, td {
/*设置边框样式*/
border: double;
}
</style>
<script>
$(function () {
$("#Button1").click(function () {
//判断昵称和评论是否为空
if ($("#txt_name").val() == "" || $("#txt_comment").val() == "") {
alert("昵称和评论不能为空!");
return;
}
else {
//用append追加 添加评论
$("table").append("<tr><td>" + $("#txt_name").val() + "</td><td>" + $("#txt_comment").val() + "</td></tr>");
}
});
});
</script>
<meta charset="utf-8" />
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td>评论</td>
</tr>
</table>
昵称:<input id="txt_name" type="text" /><br />
评论:<textarea id="txt_comment" rows="3" cols="20"> </textarea><br />
<input id="Button1" type="button" value="提交" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
$(".check_all").click(function () {
//设置复选框 checked为true 为选中
$("input[type='checkbox']").prop("checked", true);
});
$(".Invert_Selection").click(function () {
$("input[type='checkbox']").each(function () {
//当前被选中的事件等于当前未被选中的事件
this.checked = !this.checked;
})
});
$(".not_check_all").click(function () {
//设置复选框 checked为true 为全不选
$("input[type='checkbox']").prop("checked", false);
});
});
</script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<input type="checkbox" />龙
<input type="checkbox" />凤
<input type="checkbox" />饕餮
<input type="checkbox" />鸾凤
</div>
<div>
<input type="button" class="check_all" value="全选" />
<input type="button" class="Invert_Selection" value="反选" />
<input type="button" class="not_check_all" value="全不选" />
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录</title>
<script src="Scripts/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script>
//文档就绪函数
$(function () {
//登录
$("#login").click(function () {
//获取文本框内的用户名
var name = $("#User_Name").val();
//获取文本框内的密码
var pwd = $("#User_Pwd").val();
if (name == "" || pwd == "") {
alert("请输入账户或密码");
}
//判断用户信息
else if (name == "刘远" && pwd == "123456") {
alert("用户" + name + "登录成功!");
}
else {
alert("账户或密码错误!");
}
});
//重置
$("#reset").click(function () {
$("#User_Name,#User_Pwd").val("");
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:</td>
<td>
<input type="Text" id="User_Name" value="" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="User_Pwd" value="" />
</td>
</tr>
<tr>
<td>
<input type="Button" id="reset" value="重置" />
</td>
<td>
<input type="Button" id="login" value="登录" />
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
});
</script>
<meta charset="utf-8" />
</head>
<body>
<table>
<tr>
<td colspan="4">
<input type="Text" value="" />
</td>
</tr>
<tr>
<td>
<input type="Button" id="seven" value="7" />
</td>
<td>
<input type="Button" id="eight" value="8" />
</td>
<td>
<input type="Button" id="nine " value="9" />
</td>
<td>
<input type="Button" id="add" value="+" />
</td>
</tr>
<tr>
<td>
<input type="Button" id="four" value="4" />
</td>
<td>
<input type="Button" id="five " value="5" />
</td>
<td>
<input type="Button" id="six" value="6" />
</td>
<td>
<input type="Button" id="subtract" value="-" />
</td>
</tr>
<tr>
<td>
<input type="Button" id="one" value="1" />
</td>
<td>
<input type="Button" id="two" value="2" />
</td>
<td>
<input type="Button" id="three" value="3" />
</td>
<td>
<input type="Button" id="multiply " value="*" />
</td>
</tr>
<tr>
<td>
<input type="Button" id="naught" value="0" />
</td>
<td>
<input type="Button" id="dot" value="." />
</td>
<td>
<input type="Button" id="divide" value="/" />
</td>
<td>
<input type="Button" id="equal" value="=" />
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
//文档就绪函数
$(function () {
//鼠标指针移动时发生 mousemove 事件
$(document).mousemove(function (e) {
//获取鼠标坐标e.pageX e.pageY,给图片添加绝对位置 position:absolute 改变图片大小
$(".image_XY").css({ "width": "100px", "height": "100px", "position": "absolute", "left": e.pageX, "top": e.pageY });
});
});
</script>
</head>
<body>
<img src="image/img.gif" class="image_XY" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
//文档就绪函数
$(function () {
//鼠标指针移动到文本框内,并按下按钮时触发事件
$("#txt_content").mousedown(function () {
$(this).attr("placeholder", "");
});
//鼠标指针从文本框内移除时触发事件
$("#txt_content").mouseleave(function () {
$(this).attr("placeholder", "输入搜索内容:");
});
//点击按钮文本框清空输入内容
$("#btn_search").click(function () {
$("#txt_content").val("");
});
});
</script>
</head>
<body>
<input id="txt_content" type="text" placeholder="输入搜索内容:" />
<input id="btn_search" type="button" value="搜索" />
</body>
</html>
/*
辅助例子
1,自动重置
2,给元素添加动画
*/
$(document).ready(function () {
//手动重置页面元素
$("#reset").click(function () {
$("*").removeAttr("style");
$("div[class=none]").css({ "display": "none" });
});
//判断是否自动重置
$("input[type=button]").click(function () {
if ($("#isreset").is(":checked")) {
$("#reset").click();
}
});
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//表单对象属性过滤器
//重置所有表单元素
$("#reset").click(function () {
$(".usable").val("可用文本框");
$(".not_available").val("不可用文本框");
});
$("#usable").click(function () {
$(".usable").val("可用input进行赋值");
});
$("#not_available").click(function () {
$(".not_available").val("不可用input进行赋值");
});
$("input[type=checkbox]").click(function () {
var numcheck = $("input:checked").length;
$("#selectchecked").html("有" + numcheck + "个多选框被选中了");
});
//获取select选中的值
$("#optionone,#optiontwo").change(function () {
var txtone = $("#optionone").val();
var txttwo = $("#optiontwo").val();
$("#select").html("你选中的是:" + txtone + "," + txttwo);
});
})
div,span,p {
width:200px;
height:230px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Arial;
font-family:Verdana;
}
div.mini {
width:80px;
height:80px;
background-color: #aaa;
font-size:12px;
font-family:Arial;
}
div.hide {
display:none;
}
.select_ADC {
width: 12%;
height: 440px;
float: left;
}
.select_list {
width: 100%;
height: 220px;
background-color: #808080;
margin: 0 0 10px 0;
}
#check {
float: left;
margin-left: 1%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.11.3.js"></script>
<script>
function one() {
alert("one");
}
function two() {
alert("two");
}
window.onload = one;
window.onload = two;
//$(document).ready(function () {
// alert("one");
//});
//$(document).ready(function () {
// alert("two");
//});
</script>
<meta charset="utf-8" />
</head>
<body>
<div id="Use_click">点击</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.11.3.js"></script>
<title>表单对象属性过滤器</title>
<script src="Scripts/assist.js"></script>
<link href="styles/StyleSheet1.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<h2>表单对象属性过滤器.</h2>
<button id="reset">重置所有表单元素</button>
<br />
<br />
<input type="button" value="对表单内 可用input赋值操作." id="usable" />
<input type="button" value="对表单内 不可用input赋值操作" id="not_available" />
<br />
<br />
<div>
可用元素:<input type="Text" value="可用文本框" class="usable" />
</div>
<div>
不可用元素:<input type="Text" value="不可用文本框" disabled="disabled" class="not_available" />
</div>
<div>
可用元素:<input type="Text" value="可用文本框" class="usable" />
</div>
<div>
不可用元素:<input type="Text" value="不可用文本框" disabled="disabled" class="not_available" />
</div>
<br />
<div>多选框</div>
<div>
<div class="select_ADC">
<div class="select_list" id="selectchecked">
</div>
<div class="select_list" id="select">
你选中的是:
</div>
</div>
<div id="check">
<div>
<input id="check1" type="checkbox" />ADC
<input id="check2" type="checkbox" />辅助
<input id="check3" type="checkbox" />法师
<input id="check4" type="checkbox" />打野
<input id="check5" type="checkbox" />战士
<span>//展示多选框选中的个数 </span>
</div>
<br />
<div>
下拉列表ADC:
<br />
<select multiple id="optionone">
<option>女警</option>
<option>金克斯</option>
<option>EZ</option>
<option>奥巴马</option>
<option>飞机</option>
<option>寒冰</option>
<option>VN</option>
<option>德莱文</option>
</select>
</div>
<br />
<div>
下拉列表辅助:
<br />
<select id="optiontwo">
<option>机器人</option>
<option>天使</option>
<option>琴女</option>
<option>女巫</option>
<option>雪人</option>
</select>
</div>
</div>
</div>
</body>
</html>