<!DOCTYPE HTML>
<HTML>
<head>
<script text="text/javascript">
//DHTM-BOM 浏览器对象模型
// -DOM 文档对象模型
//BOM:WINDOW(浏览器中打开的窗口)--->Location(浏览器地址栏 跳转,刷新)
// navigator(有关浏览器的信息)
// screen（客户端显示屏幕的信息）
// history((在浏览器窗口中）访问过的 URL)
//-------------------------WINDOW(浏览器中打开的窗口)---------------------------------
//------------------------其中window代表上下文可以省去，直接写方法------------------
//1.onactivate 当对象设置为活动元素时触发。onactivate
/*
window.onactivate=function(){
alert("我被激活了")
}
*/
//2.使元素失去焦点并触发 onblur 事件。 onblur
/*
window.onblur=function(){
alert("我失去焦点")
}
*/
//3.页面加载过后触发的方法 onload
/*
window.onload=function(){
var ele = document.getElementById("div01")
console.log(ele)
}
*/
//4.浏览器改变大小 onresize
/*
window.onresize=function(){
console.log("我被改变了大小")
}
*/
//5.三种对话框
// 消息的对话框alert 确认对话框confirm 提示对话框prompt
//5.1消息的对话框alert
//alert("警告！！！您已超速，罚款200~")
//5.2确认对话框confim
/*
var flag = confirm("你确认要关闭我吗 是否确认")
if(flag){
alert("你好残忍")
}else{
alert("你真好，不忍心")
}
*/
//5.3提示对话框prompt 其中带有一条消息和一个输入框。
/*
var str = prompt("请输入您的密码","")
if("123" == str){
alert("密码正确 ")
}else{
alert("密码错误 ")
}
*/
//6.定时器 setInterval(code,millisec)循环 按照指定的周期（以毫秒计）来调用函数或计算表达式
window.setInterval(function(){
var div2 = document.getElementById("div02")
div2.innerHTML = new Date().toLocaleString(); //向div2标签对象插入内容innerHTML -> new Date().toLocaleString()获取现在时间
}, 1000);
//--定时器 setTimeout(code,millisec)只计算一次 在指定的毫秒数后调用函数或计算表达式。
/*
window.setTimeout(function(){
window.location.href="http://www.baidu.com"
}, 3000);
*/
//------------------------Location(浏览器地址栏 跳转,刷新)-------------------------
console.log(window.location.host) //host 设置或返回主机名和当前 URL 的端口号。
console.log(window.location.hostname) //hostname 返回URL的主机名
console.log(window.location.port) //port 返回一个URL服务器使用的端口号
console.log(window.location.href) //href 设置或返回完整的 URL。
//-------------------------navigator(有关浏览器的信息)---------------------------------------------
console.log(window.navigator.appName) //appName 返回浏览器的名称
console.log(window.navigator.platform) //platform 返回运行浏览器的操作系统平台。
//------------------------screen（客户端显示屏幕的信息）--------------------------------------------------
console.log(window.screen.availWidth) //availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
console.log(window.screen.availHeight) //availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)
//------------------------------history((在浏览器窗口中）访问过的 URL)------------------------------
console.log(window.history.length) //length 返回浏览器历史列表中的 URL 数量。
function forward(){
window.history.forward(); //forward() 加载 history 列表中的下一个 URL。
}
function back(){
window.history.back(); //back() 加载 history 列表中的前一个 URL。
}
</script>
</head>
<body>
<div id="div01" style="font-size:50px;color:pink;"></div>
<div id="div02" style="font-size:50px;color:pink;"></div>
<br>
<input type="button" value="前进" onclick="forward()" /> <!--onclick="forward()" 前进调用forward方法 -->
<input type="button" value="后退" onclick="back()"/> <!--onclick="back()" 前进调用back方法 -->
<a href="http://www.baidu.com">百度</a>
</body>
</HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM 1.获取对象</title>
<script text="text/javascript">
//获取对象
//1.根据id获取页面中的元素 document.getElementById(“xxx”); 无s Element
function demo1(){
var unEle=document.getElementById("username");
alert(unEle.value) //获取值 .value
}
//2.根据name获取页面中的元素 document.getElementsByName(“xxx”); 有s Elements name可以重复，Id不可以
function demo2(){
var psw = document.getElementsByName("password")[0];
alert(psw.value) //获取值 .value
}
//3.根据标签名获取页面中的元素 document.getElementsByTagName(“xxx”); 有s Elements
function demo3(){
var inps = document.getElementsByTagName("input");
for(var i = 0;i<inps.length ;i++){
alert(inps[i].value);
}
}
function demo4(){
var p = document.getElementById("pid");
alert(p.innerHTML); //innerHTML 从对象的起始位置到终止位置的全部内容,包括Html标签 输出 <font color="red">获取P标签中的文字</font>
alert(p.innerText); //innerText 从起始位置到终止位置的内容, 但它去除Html标签 输出 获取P标签中的文字
p.innerHTML += "<font color='blue'>aaa</font>" //输出+aaa 有标签innerHTML
p.innerText += "<font color='blue'>aaa</font>" //输出+<font color='blue'>aaa</font> 当成纯文本innerText
}
</script>
</head>
<body>
用户名称：<input type="text" name="username" id="username"/><br />
用户密码：<input type="password" name="password" id="password" /><br />
用户密码2：<input type="password" name="password" id="password2" /><br />
<hr />
<input type="button" value="通过ID获取节点的值" onclick="demo1()" />
<input type="button" value="通过NAME获取节点的值" onclick="demo2()" />
<input type="button" value="通过TAG获取节点的值" onclick="demo3()" />
<hr />
<p id="pid"><font color="red">获取P标签中的文字</font></p>
<input type="button" value="获取P中文字" onclick="demo4()" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><title>DOM 2.进行增删改查</title></title>
<!--加入样式表-->
<style type="text/css">
div {
border:#0099FF 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#00FFFF;
}
#div_2{
background-color:#FF3399;
}
#div_3{
background-color:#0000FF;
}
#div_4{
background-color:#FFFF66;
}
</style>
<script type="text/javascript">
//AAA在父节点上增加子节点 parentNode.appendChild(childNode);
function addNode(){
//1.凭空创建节点 document.createElement()
var newdiv = document.createElement("div");
newdiv.innerText="haha";
//2.获取body标签
var body = document.getElementsByTagName("body")[0];
//---------------------重要------父节点.appendChild(要增加的子节点)---------------添加到末尾--------------------------
//body.appendChild(newdiv) //这个是将新标签newdiv插在body标签最后
//parentNode.appendChild(childNode);
//-------------------重要--------父节点.insertBefore(要插入的，插入到谁前面)----插入到指定位置之前-----------------------------------
//3.获取div3标签
var div3 = document.getElementById("div_3");
//4.在body标签内，将创建的div标签插到div3之前
// .insertBefore(要插入的,插入到谁前面)
body.insertBefore(newdiv,div3);
}
//BBB在父节点上删除子节点 .removeChild(要删除的节点)
function deleteNode(){
//1.获取div3标签
var div3 = document.getElementById("div_3");
//-----------------------重要---被删除的子节点.parentNode.removeChild(被删除的子节点);-------------------
//2.获取div3标签的父标签 div3.parentNode
//3.删除div3标签 .removeChild(div3)
div3.parentNode.removeChild(div3);
}
//CCC在父节点上替换子节点 .replaceChild(替换节点,要被替换的节点)
function updateNode(){
//1.创建一个新的节点 document.createElement()
var div = document.createElement("div");
div.innerText = "我替换你了";
//2.获取div2标签
var div2 = document.getElementById("div_2");
//-----------------------重要---被替换的子节点.parentNode.replaceChild(替换节点,被替换的子节点);-------------------
//3.获取div2标签的父标签 parentNode
//4.在div2标签的父标签上替换div2节点 .replaceChild(替换节点,要被替换的节点)
div2.parentNode.replaceChild(div,div2);
}
//DDD在父节点上克隆子节点 var ele2 = ele.cloneNode(true);克隆当前元素包括子元素
function copyNode(){
//1.获取div4标签
var div4 = document.getElementById("div_4");
//---------------------重要- var ele2 = ele.cloneNode(true);克隆当前元素包括子元素-----------------------------------
//---------------------------var ele2 = ele.cloneNode();只克隆当前元素-----------------------------------------------
//2.克隆标签
var div4_clone = div4.cloneNode(true); //如果没有true,没有克隆子元素，不会出现里面的文字
//3.获取要克隆节点的父节点 .parentNode
//4.父节点内增加子节点 .appendChild(要添加的节点)
div4.parentNode.appendChild(div4_clone);
}
</script>
</head>
<body>
<div id="div_1">
</div>
<div id="div_2">
div区域2
</div>
<div id="div_3">
div区域3
</div>
<div id="div_4">
div区域4
</div>
<hr />
<input type="button" value="创建并添加节点" onclick="addNode()" />
<input type="button" value="删除节点" onclick="deleteNode()" />
<input type="button" value="替换节点" onclick="updateNode()" />
<input type="button" value="克隆节点" onclick="copyNode()" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻广告</title>
<style type="text/css">
<!-- 伪元素选择器 -->
a:link,a:visited {
color:#FF9900;
text-decoration:none;
font-size:15px;
}
a:hover {
color:#0099FF;
}
.newsstyle {
border:#0099FF 1px solid;
font-size:16px;
width:400px;
}
/*
预先定一些选择器
*/
.max {
border:#0099FF 1px solid;
font-size:20px;
color:#FF0000;
background-color:#CCFFFF;
width:400px;
}
.min {
border:#0099FF 1px solid;
font-size:12px;
color:#0000FF;
background-color:#FFFFFF;
width:400px;
}
</style>
<script type="text/javascript">
//DOM修改样式 方式一：通过class属性修改样式
//document.getElementById("tagName").className =”newClzName”;
function resize(size){
var div = document.getElementById("newstext");//获取字体的div
div.className = size; //修改字体的css的class名
}
</script>
</head>
<body>
<h2>这是一个大新闻.</h2>
<!-- href="javascript:void(0)"往往是为了保留链接的样式，但不让链接执行实际操作-->
<a href="javascript:void(0)" onclick="resize('min')">小字体</a>
<a href="javascript:void(0)" onclick="resize('newsstyle')">中字体</a>
<a href="javascript:void(0)" onclick="resize('max')">大字体</a>
<hr />
<div id="newstext" class="newsstyle">
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
width:100px;
border-collapse:collapse;
}
table td{
border:#0066FF 1px solid;
background-color:#FF9900;
text-align:center;
}
table td div {
background-color:#FFFF99;
text-align:left;
}
table td a:link, table td a:visited {
color:#00ffFF;
text-decoration:none;
}
table td a:hover {
color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div {
display:none;
}
.open {
display:block;
}
.close {
display:none;
}
</style>
<script type="text/javascript">
//DOM修改样式 方式二：直接修改css样式 tagEle.style.stylename = “stylevalue”
function openDiv(obj){
//1.获取div
var div = obj.parentNode.getElementsByTagName("div")[0]; //传过来当前标签a，因为div和a是兄弟标签，所以先获取传过来a标签的父标签，父标签获取div
//2.显示div
//这一步是为了自己打开的时候隐藏别的，自己隐藏别人也隐藏
var divs = document.getElementsByTagName("div"); //获取所有的div
for(var i = 0;i<divs.length;i++){
if(divs[i]!=div) //如果不是当前的div，就隐藏
divs[i].style.display = "none";
}
//if（打开状态bolck）{点击就关闭none} else(关闭状态none) {点击就打开block}
div.style.display= div.style.display == "block" ? "none" : "block";
}
</script>
</head>
<body>
<table>
<tr>
<td>
<!-- href="javascript:void(0)"往往是为了保留链接的样式，但不让链接执行实际操作-->
<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a> <!--传入this,代表当前a标签-->
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
李彦宏<br />
</div>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建表格</title>
<!-- 定义一些样式,将来给表格用 -->
<style type="text/css">
table{
border:#0099FF 1px solid;
width:600px;
border-collapse:collapse;
}
table td{
border:#0099FF 1px solid;
padding:10px 20px 3px 1px;
}
</style>
<script type="text/javascript">
//创建一行一列表格
function createTable(){
var div = document.getElementById("xx");
//创建一个新的节点 document.createElement()
var tab = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
tr.appendChild(td); //tr添加td
tab.appendChild(tr); //table添加tr
div.appendChild(tab); //在父节点上增加子节点 parentNode.appendChild(childNode)
//上面全部等价于
//document.getElementById("xx").innerHTML="<table><tr><td></td></tr></table>"
}
//创建5行6列表格
function createTable2(){
var div = document.getElementById("xx");
var tab = document.createElement("table"); //凭空创建节点document.createElement(标签名)
for(var r = 1;r<=5;r++){
var tr = document.createElement("tr");
for(var c=1;c<=6;c++){
var td = document.createElement("td");
td.innerText = r+"行"+c+"列";
tr.appendChild(td); //1个tr添加6个td 添加父节点.appendChild(要添加的节点)
}
tab.appendChild(tr); //1个table添加5个tr
}
div.appendChild(tab); //div id="xx"添加一个table //在父节点上增加子节点 parentNode.appendChild(childNode)
}
//创建用户自定义输入的行和列
//这里与上面不同的是，将指定数字换为用户输入的row,col
function createTable3(){
var row = document.getElementById("row").value; //获取用户输入得值 .value
var col = document.getElementById("col").value;
var div = document.getElementById("xx");
var tab = document.createElement("table"); //凭空创建节点document.createElement(标签名)
for(var r = 1;r<=row;r++){
var tr = document.createElement("tr");
for(var c=1;c<=col;c++){
var td = document.createElement("td");
td.innerText = r+"行"+c+"列";
tr.appendChild(td); //1个tr添加col个td 添加父节点.appendChild(要添加的节点)
}
tab.appendChild(tr); //1个table添加row个tr
}
div.appendChild(tab); //div id="xx"添加一个table //在父节点上增加子节点 parentNode.appendChild(childNode)
}
</script>
</head>
<body>
<div id="div_id">
</div>
<input type="button" value="创建表格" onclick="createTable()" /><br />
<input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br />
行数:<input type="text" name="row" id="row"/><br />
列数:<input type="text" name="col" id="col"/><br />
<input type="button" name="createButton" value="创建表格(行列用户输入)" onclick="createTable3()" />
<div id="xx">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
<style type="text/css">
#all div{
display:none;
}
</style>
<script type="text/javaScript">
function show(obj){
//隐藏所有
//先获取到所有的"您的性格，很**" 隐藏所有
document.getElementById("result1").style.display="none";
document.getElementById("result2").style.display="none";
document.getElementById("result3").style.display="none";
document.getElementById("result4").style.display="none";
//显示当前
var value = obj.value; //获取传过来的input标签的值 this.value
var div = document.getElementById("result"+value);
div.style.display = "block"; //获取result+value标签，样式设置为显示
}
</script>
</head>
<body>
<div>
<h3>测试你的性格:</h3>
<div>请选择下列一种水果:</div>
<input type="radio" name="fruit" value="1" onclick="show(this)" />苹果<br /> <!--this传入当前的input标签 -->
<input type="radio" name="fruit" value="2" onclick="show(this)" />西瓜<br />
<input type="radio" name="fruit" value="3" onclick="show(this)"/>葡萄<br />
<input type="radio" name="fruit" value="4" onclick="show(this)"/>芒果<br />
<div id="all">
<div id="result1">
您的性格,很羞涩.
</div>
<div id="result2">
您的性格,很开朗.
</div>
<div id="result3">
您的性格,很内向.
</div>
<div id="result4">
您的性格,很醇香.
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选反选问题</title>
<script>
//全选
//思想：获取所有的checkbox，让其他的checkbox的选中状态等于全选的选中状态
function checkAll(obj){
var items = document.getElementsByName("item"); //获取所有的item
for(var i = 0;i<items.length;i++){
items[i].checked = obj.checked; //checkbox.checked==true/false表示选中和未选中状态 让所有的item选中状态 等于= 全选按钮的选择状态
}
}
//单个checkbox选中不选中
//等页面加载完触发方法，因为没有写onclick()方法
window.onload = function(){
var items = document.getElementsByName("item");//所有checkbox
var all1 = document.getElementById("all1"); //全选
for(var i = 0;i<items.length;i++){
items[i].onclick = function(){ //每个item上的点击事件，if（只要有一个按钮未选中）全选未选中，else(每个按钮全选中)全选选中
var flag = true;
for(var j = 0;j<items.length;j++){
if(items[j].checked==false){
flag = false;
break;
}
}
all1.checked = flag;
}
}
}
//反选
//思想：获取所有的checkbox，遍历将其状态取反
function check(){
var items = document.getElementsByName("item");
for(var i=0;i<items.length;i++){
items[i].checked = !items[i].checked; //每个item状态=之前状态的取反
}
}
//计算金额
//思想：获取所有的checkbox，遍历如果选中，获取它的值相加
function getSum(){
var money = 0;
var items = document.getElementsByName("item");
for(var i=0;i<items.length;i++){ //获取所有的item，如果选中items[i].checked=true，金额相加money += parseInt(items[i].value)
if(items[i].checked){
money += parseInt(items[i].value);
}
}
document.getElementById("sumId").innerText = money;
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br />
<input type="checkbox" id="all1" name="all" onclick="checkAll(this)"/>全选<br />
<input type="checkbox" id="all2" name="all" onclick="check()"/>反选<br />
<input type="button" value="总金额" onclick="getSum()" /><span id="sumId"></span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动菜单</title>
<!--
ie9的select 不支持innerHTML
删除option时，由于删除后，options长度发生了变化，所以直接用for循环会删除不干净，可以由后向前删除，可以避免这样的问题
-->
<script>
//思想：先获取所选省份的option，province.options[province.selectedIndex]
// 再获取option里的文字即省份
// 根据省份去数组里找该省份的的城市名，先创建节点，添加城市名，最后添加到城市列表中
// 注意：每次获取之前的城市选项中要清除所有的城市信息，不然就是将数组的城市名拼接到最后
function selectCity(province){
var provSelc = document.getElementById("province");
var citySelc = document.getElementById("city");
var data = {
"北京市":["海淀区","朝阳区","丰台区"],
"河北省":["石家庄","唐山","秦皇岛"],
"辽宁省":["沈阳","大连","鞍山"],
"山东省":["青岛","济南","烟台"]
};
//清除城市信息
for(var i = citySelc.options.length-1;i>0;i--){ //选择卡.options.length长度
citySelc.remove(i); //选项卡.remove(节点)
}
//获取所选省份
var provOpt = provSelc.options[provSelc.selectedIndex]; //选择省份卡=（选择卡).options[选择卡.selectedIndex]
var prov = provOpt.innerText; //省份文字=选择省份卡的文字
//找到对应城市信息添加
// 根据省份去数组里找该省份的的城市名，先创建节点，添加城市名，最后添加到城市列表中
var cities = data[prov]; //data[省份]
for(var i = 0;i<cities.length;i++){
var opt = document.createElement("option"); //创建option节点
opt.innerText = cities[i]; //option节点增加城市文字
citySelc.appendChild(opt); //城市.appendChild(option节点)
}
}
</script>
</head>
<!--
"海淀区","朝阳区","丰台区"
"石家庄","唐山","秦皇岛"
"沈阳","大连","鞍山"
"青岛","济南","烟台"
-->
<body>
<select id="province" onchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<select id="city">
<option>--选择城市--</option>
</select>
</body>
</html>
<html>
<head>
<title>表单页面</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script>
function checkData(){
var canSub = true;
//非空校验 传入(Id,提示信息)
canSub = checkNull("username","用户名不能为空！") && canSub; //&&cansub将整个判断是否为flase,如果有一个错误，就return flase不进行提交
canSub = checkNull("password","密码不能为空！")&& canSub;
canSub = checkNull("password2","确认密码不能为空！")&& canSub;
canSub = checkNull("nickname","昵称不能为空！")&& canSub;
canSub = checkNull("email","邮箱不能为空！")&& canSub;
canSub = checkNull("valistr","验证码不能为空！")&& canSub;
canSub = checkNull("img","头像不能为空！")&& canSub;
//传入(Id,提示信息)
/*检验非空公共方法*/
function checkNull(name,msg){
document.getElementById(name+"_msg").innerText = ""; //获取input后面的span标签来进行提示信息
var tag = document.getElementsByName(name)[0]; //根据传入的id来换取指定标签
if(tag.value == ""){
document.getElementById(name+"_msg").innerText = msg;//如果为空，提示信息和返回flase
return false;
}
return true; //如果不为空，返回true
}
//描述信息非空校验
document.getElementById("desc_msg").innerText = "";
var desc = document.getElementsByName("desc")[0];
if(desc.value == "请输入描述信息~！"){ //判断textarea是否为空，即其的textarea.value没有改变，一直是初始值“请输入描述信息~”
document.getElementById("desc_msg").innerText = "描述信息不能为空！";
canSub = false;
}
//爱好非空校验
document.getElementById("like_msg").innerText = "";
var likes = document.getElementsByName("like");
var hasLike = false;
for(var i = 0;i<likes.length;i++){
if(likes[i].checked == true){
hasLike = true;
break;
}
}
if(!hasLike){
document.getElementById("like_msg").innerText = "爱好不能为空！";
canSub = false;
}
//性别非空校验
document.getElementById("gender_msg").innerText = ""; //获取input后面的span标签来进行提示信息
var genders = document.getElementsByName("gender"); //获取name=gender的标签
var hasGender = false;
for(var i = 0;i<genders.length;i++){
if(genders[i].checked == true){ //判断单选按钮radio是否选中，.checked=true/false
hasGender = true;
break;
}
}
if(!hasGender){
document.getElementById("gender_msg").innerText = "性别不能为空！"; //如果没有性别，给提示信息且cansub=false
canSub = false;
}
//两次密码一致的校验
var psw1 = document.getElementsByName("password")[0].value; //获取执行Name的标签的值 .value
var psw2 = document.getElementsByName("password2")[0].value;
if(psw1 != "" && psw2 !="" && psw1 != psw2){
document.getElementById("password2_msg").innerText = "两次密码不一致！";
canSub = false;
}
//邮箱格式的校验
var email = document.getElementsByName("email")[0].value;
if(email.value != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){
document.getElementById("email_msg").innerText = "邮箱格式不正确！";
canSub = false;
}
return canSub;
}
//描述信息处理
//获得焦点处理 ，传入的obj是this 是textarea标签
function descFocus(obj){
if(obj.value == "请输入描述信息~！"){//获取值 obj.value
obj.value = "";
}
}
//失去焦点处理 传入的obj是this 是textarea标签
function descBlur(obj){
if(obj.value == ""){ //获取值 obj.value
obj.value = "请输入描述信息~！";
}
}
</script>
<style type="text/css">
span{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<!--onsubmit="return checkData()"决定要不要提交 return true提交 return false不提交 否则不写这个，无论验证是否成功都会提交 -->
<form action="http://localhost:8080" method="POST" onsubmit="return checkData()">
<table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink">
<caption><font color="red" size="6">注册表单</font></caption>
<input type="hidden" name="id" value="9527"/>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" /> <span id="username_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"/> <span id="password_msg"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="password2"/> <span id="password2_msg"></span></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span>
</td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email"/> <span id="email_msg"></span></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="like" value="lq"/>篮球
<input type="checkbox" name="like" value="zq"/>足球
<input type="checkbox" name="like" value="qq"/>铅球
<input type="checkbox" name="like" value="blq"/>玻璃球
<span id="like_msg"></span>
</td>
</tr>
<tr>
<td>客户类型：</td>
<td>
<select name="type">
<option value="pm">平民</option>
<option value="sxdy">少先队员</option>
<option value="gqty">共青团员</option>
<option value="ybdy">预备党员</option>
<option value="zsdy">正式党员</option>
</select>
<span id="type_msg"></span>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="img"/> <span id="img_msg"></span>
</td>
</tr>
<tr>
<td>描述信息：</td>
<td>
<!--onfocus得到焦点 onblur失去焦点 -->
<textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" name="valistr"/>
<img src="1.jpg" width="100px" height="20px"/>
<span id="valistr_msg"></span>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="提 交"/>
<input type="reset" value="重 置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<HEAD>
<title>JQuery核心用法</title>
<!--jQuery引入
在html页面通过script标签像引入一个普通js文件一样引入jquery的js文件即可
<script type="text/javascript" src="jquery-1.4.2.js"></script>
-->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//$符号等价于jQuery,$()相当于调用jQuery()
/*
JQuery核心用法：
通过$("css选择器")可以从页面中快速选择元素 选出的元素是jquery对象 而不是普通的dom对象
通过$("html元素字符串")可以直接将字符串描述的html元素创建出来构成一个jquery对象
通过$(document).ready(function(){//xxxx});可以设定当html页面加载完成后要执行的函数，也可以简写成${function(){...}},等价于dom编程中的window.onload=function(){}
通过$(jQuery)[0] 或 $(jQuery).get(0) 可以将jquery对象 转换为普通的dom对象
通过$(dom对象) 可以将一个dom对象转换为jquery对象
*/
function alertName(){
//通过点击按钮获取用户名的值，分别将jQuery对象转换成js对象和js对象转换为jQuery对象
//dom方式
var un_dom = document.getElementById("username")
alert(un_dom.value)
//注意JQuery的值是val(),而Dom的值是value()
//1.jquery方式
alert($("#username").val())
//2.dom对象转换为jquery对象
var un_dom = document.getElementById("username")
alert($(un_dom).val())
//3.jquery对象转换为dom对象
alert($("#username")[0].value)
}
</script>
</HEAD>
<BODY>
用户名：<input type="text" id="username"/>
<input type="button" id="btn" onclick="alertName()" value="获取用户名">
</input>
</BODY>
</html>
<!DOCTYPE>
<html>
<head>
<title>基本选择器练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-family: "微软雅黑"
}
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 40px;
height: 43px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
/*
2.选择器 - 基本选择器
元素名选择器：
$("div")
id选择器：
$("#id")
class选择器：
$(".className")
匹配所有元素选择器：
$("*")
多元素选择器：
$("div,span,p.myClass")
*/
/*文档就绪事件
$(document).ready(function(){
//xxxx
});
作用相当于: dom编程里的window.onload = function(){ //xxx }
简写形式为:
$(function(){
//xxxx
});
*/
//让整个页面加载完成,因为没写onclick()点击事件
$(document).ready(function() {
/* ---------基本选择器练习--------- */
//改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1"
$("#b1").click(function(){ //JQuery中的点击事件 .click(function(){})
$("div").css("background-color", "#FF69B4"); //基本选择器1.元素名选择器 $("div") – 匹配所有的div元素，子孙div元素也是
//拿到是数组，在dom中遍历设置，在JQuery中可以集中设置
});
//改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("#one").css("background-color", "#9ACD32"); //基本选择器2.id选择器 $("#d1")–匹配所有id值为d1的元素
// $("div#d1")–匹配所有id值为d1的div元素
});
//改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$(".mini").css("background-color", "#FF0033"); //基本选择器3.class选择器 $(".c1") – 匹配所有class值为c1的元素
// $("div.c1") – 匹配所有class值为c1的div元素
});
//改变所有元素的背景色为 #FDF5E6" id="b4"
$("#b4").click(function(){
$("*").css("background-color", "#FDF5E6"); //基本选择器4.*号匹配符 $("*") – 匹配所有的元素
});
//改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5"
$("#b5").click(function(){
$("span,#two").css("background-color", "#FF1493");//基本选择器5.多元素选择器
// $("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素。。。
});
//改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6"
$("#b6").click(function(){
$("span,#two,#one,.mini").css("background-color", "#006400");
});
});
</script>
</head>
<body>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
<input type="button" value=" 改变 id 为 one 的元素的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3" />
<input type="button" value=" 改变所有元素的背景色为 #FDF5E6" id="b4" />
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493"
id="b5" />
<input type="button"
value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"
id="b6" />
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">id为one</div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
<span class="spanone"> span </span>
<span class="mini"> span class是mini </span>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* ---------层级选择器练习---------
3.选择器 - 层级选择器
后代元素选择器
$("form input")
子元素选择器
$("#div01 > span")
下一个兄弟选择器
$("#div01 + span")
后续所有兄弟选择器
$("#div01 ~ span")
**除了以上的层级选择器，还可以通过jquery中提供的方法，进一步筛选元素
children([expr])
closest([expr])
find(expr)
next([expr])
nextAll([expr])
nextUntil([expr])
offsetParent()
parent([expr])
parents([expr])
parentsUntil([expr])
prev([expr])
prevAll([expr])
prevUntil([expr])
siblings([expr])
*/
//改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1"
$("#b1").click(function(){
$("body div").css("background-color", "#F08080"); //层级选择器1. $("div span") – 匹配div下所有的span元素包含子元素
});
/*
$("#b1").click(function(){})
等价于:
document.getElementById("b1").onclick = function(){};
*/
//改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"
$("#b2").click(function(){
$("body>div").css("background-color", "#FF0033"); //层级选择器2. $("div>span") – 匹配div下所有的span子元素
});
//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"
$("#b3").click(function(){
$("#one+div").css("background-color", "#0000FF"); //层级选择器3. $("div+span") – 匹配div后面紧邻的span兄弟元素
});
//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4"
$("#b4").click(function(){
$("#two~div").css("background-color", "#0000FF"); //层级选择器4. $("div~span") – 匹配div后面所有的span兄弟元素
});
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5" 是id为two的所有兄弟元素，前也是后也是
$("#b5").click(function(){
$("#two").siblings("div").css("background-color", "#0000FF"); //层级选择器5. siblings()返回被选元素的所有同胞元素
//$("#two").next("div").css("background-color", "#0000FF");//选择id为two元素后面紧邻的div兄弟元素
//$("#two").nextAll("div").css("background-color", "#0000FF");//选择id为two元素后面所有的div兄弟元素
//$("#two").prev("div").css("background-color", "#0000FF");//选择id为two元素前面紧邻的div兄弟元素
//$("#two").prevAll().css("background-color", "#0000FF");//选择id为two元素前面所有的兄弟元素
});
})
</script>
</head>
<body>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
id="b3" />
<input type="button"
value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"
id="b5" />
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------基本过滤选择器练习---------
4.选择器 - 基本过滤选择器
:first 筛选第一个
:last 筛选最后一个
:not 剔除符合条件的
:even 筛选索引位置为偶数的 ，索引值从0开始
:odd 筛选索引位置为奇数的 ，索引值从0开始
:eq 筛选索引值为等于给定值的
:gt 筛选索引值为大于定值的
:lt 筛选索引值为小于给定值的
:header 筛选所有的h1~h6的标题的元素
:animated 筛选所有正在执行动画的元素
*/
//改变第一个 div 元素的背景色为 #FF6347" id="b1"
$("#b1").click(function(){
$("div:first").css("background-color", "#FF6347"); //基本过滤选择器1 $("div:first") – 匹配所有div中的第一个div元素
});
//改变最后一个 div 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:last").css("background-color", "#FF6347"); //基本过滤选择器2 $("div:last") – 匹配所有div中的最后一个div元素
});
//改变class不为 one 的所有 div 元素（子孙元素都是）的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:not(.one)").css("background-color", "#FF0033"); //基本过滤选择器3 $("div:not(.one)") – 匹配所有class值不为one的div元素
});
//改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4"
$("#b4").click(function(){
$("div:eq(3)").css("background-color", "#006400"); //基本过滤选择器4 $("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始 ,实际上是第4个，div里面的子div也算
});
//改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5"/>
$("#b5").click(function(){
$("div:lt(3)").css("background-color", "#FF69B4"); //基本过滤选择器5 $("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始
});
//改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6"
$("#b6").click(function(){
$("div:gt(3)").css("background-color", "#F08080"); //基本过滤选择器6 $("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始
});
//改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7"
$("#b7").click(function(){
$("div:even").css("background-color", "#F08080"); //基本过滤选择器7 $("div:even") – 匹配所有div中索引值为偶数的div元素，0开始
});
//改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8"
$("#b8").click(function(){
$("div:odd").css("background-color", "#FF1493"); //基本过滤选择器8 $("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始
});
})
</script>
</head>
<body>
<input type="button" value=" 改变第一个 div 元素的背景色为 #FF6347" id="b1" />
<input type="button" value=" 改变最后一个 div 元素的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" />
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #006400" id="b4" />
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #FF69B4" id="b5" />
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #F08080" id="b6" />
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7" />
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8" />
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="aa">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>内容选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------内容选择器---------
5.选择器 - 内容选择器
:contains 过滤出标签体中包含指定内容的元素
:empty 过滤出标签体为空的元素
:has 过滤出标签中含有指定元素的标签
:parent 过滤出有子元素（包括文本元素）的标签
6.选择器 - 可见性选择器
:hidden 过滤出隐藏元素
:visible 过滤出可见元素
*/
//改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" <div>xxidxx</div>
$("#b1").click(function(){
$("div:contains('id')").css("background-color", "#FF6347"); //内容选择器1 $("div:contians('abc')") – 匹配所有div中包含abc内容的div元素 如: <div>xxxabcxx</div>
});
//改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div:empty").css("background-color", "#9ACD32"); //内容选择器2 $("div:empty") – 匹配所有内容为空的div元素 如: <div></div>
});
//改变包含div子元素的div元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("div:has(div)").css("background-color", "#FF0033"); //内容选择器3 $("div:has(p)") – 匹配所有包含p元素的div元素 如: <div><p></p></div>
});
//改变非空div元素的背景色为 #006400" id="b4"
$("#b4").click(function(){
$("div:parent").css("background-color", "#006400"); //内容选择器4 $("div:parent") – 匹配所有内容不为空的div元素 如: <div>xxxxx</div>
});
//====================================================
/* ---------可见选择器练习--------- */
//改变所有可见 div 元素背景色为 #F08080" id="b5"
$("#b5").click(function() {
$("div:visible").css("background-color", "#F08080"); //可见选择器1 $("div:visible") – 匹配所有可见的div元素
})
//让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6"
$("#b6").click(function() {
$("div:hidden").css("background-color", "red").css("display","block") //可见选择器2 $("div:hidden") – 匹配所有隐藏的div元素
//等价于$("div:hidden").css("background-color":"red","display":"block")
//$("div:visible").hide();
//$("div").toggle();//切换元素的可见状态, 如果显示则设置为隐藏, 如果隐藏则设置为显示
})
})
</script>
</head>
<body>
<input type="button" value=" 改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" />
<input type="button" value=" 改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 改变包含div子元素的div元素的背景色为 #FF0033" id="b3" />
<input type="button" value=" 改变非空div元素的背景色为 #006400" id="b4" />
<hr/>
<hr/>
<input type="button" value=" 改变所有可见 div 元素背景色为 #F08080" id="b5" />
<input type="button" value=" 让所有隐藏元素显示, 并改变背景色为 #FF69B4" id="b6" />
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="aa">
class是 one
<div class="mini"></div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover"></div>
<br>
<div style="display:none">看不见我...,看不见我....</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------属性选择器练习---------
$("div[id]") – 匹配所有具有id属性的div元素
$("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素
$("div[id!='d1']") – 匹配所有id属性值不为d1的div元素
$("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素
$("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素
$("div[id*='d1']") - 匹配所有id属性值包含d1的div元素
$[selector1][selector2][selectorN] 多属性选择器
---------子元素选择器练习---------
$("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。
$("div:first-child") –匹配div中第1个子元素。
$("div:last-child") – 匹配div中最后一个子元素。
$(only-child)
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
*/
//改变包含id属性的 div 元素的背景色为 #FF6347" id="b1"
$("#b1").click(function(){
$("div[id]").css("background-color", "#FF6347"); //属性选择器1 $("div[id]") – 匹配所有具有id属性的div元素
});
//改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("div[title='aa']").css("background-color", "#9ACD32"); //属性选择器2 $("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素
});
//改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$("input[type!='button']").css("background-color", "#9ACD32"); //属性选择器2 $("div[id!='d1']") – 匹配所有id属性值不为d1的div元素
});
//=================================================
/* ---------子元素选择器练习--------- */
//改变div 第二个子元素的背景色为 #006400" id="b4"
$("#b4").click(function() { //注意:n从1开始，只要div下有第二个子div就可以找到，可以多个
$("div:nth-child(2)").css("background-color", "#006400"); //两个变 子元素选择器1 $("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。
})
//改变div 第一个子元素的背景色为 #FF69B4" id="b5"
$("#b5").click(function() {
//$("div:nth-child(1)").css("background-color", "#FF69B4"); //注意:n从1开始，只要div下有能满足的子div就可以找到，可以多个
$("div:first-child").css("background-color", "#FF69B4"); //三个变 子元素选择器2 $("div:first-child") –匹配div中第1个子元素。
//$("div:last-child").css("background-color", "#FF69B4"); // 子元素选择器3 $("div:last-child") – 匹配div中最后一个子元素。
})
})
</script>
</head>
<body>
<input type="button" value=" 改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" />
<input type="button" value=" 改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" />
<hr/>
<hr/>
<input type="button" value=" 改变div 第二个子元素的背景色为 #006400" id="b4" />
<input type="button" value=" 改变div 第一个子元素的背景色为 #FF69B4" id="b5" />
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="aa">
class是 one title为aa
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="bb">
class是 one title为bb
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">id为mover 动画</div>
<br>
<input type="submit"/>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>表单选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------表单选择器练习---------
$(":input") – 匹配所有的input(包含文本框、密码框、单选框、复选框)、select框、textarea、button。
$(":password") – 匹配所有的密码框
$(":radio") – 匹配所有的单选框
$(":checkbox") – 匹配所有的复选框
$(":checked") – 匹配所有的被选中的单选框/复选框/option
$("input:checked")匹配所有的被选中的单选框/复选框
$(":selected") – 匹配所有被选中的option选项
$(":disabled")- 匹配所有被禁用的元素
*/
//改变所有:input 元素的背景色为 #F08080" id="b1"
$("#b1").click(function() {
$(":input").css("background-color", "#F08080"); //表单选择器1 $(":input") – 匹配所有的input(文本框、密码框、单选框、复选框)、select框、textarea、button。
alert($(":input").length); //计算被选中的表单标签的长度 .length
});
//改变:password 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function() {
$(":password").css("background-color", "#9ACD32"); //表单选择器2 $(":password") – 匹配所有的密码框
});
//弹出 :radio 元素的个数" id="b3"
$("#b3").click(function() {
alert($(":radio").length); //$(":radio").length length计算radio 元素的个数
//表单选择器3 $(":radio") – 匹配所有的单选框
});
//弹出所有 :checked 元素的value值" id="b4"
$("#b4").click(function() {
$(":checked").each(function(){ //$(":checked").each() each()遍历所有选择的元素
alert($(this).val()); //等价于dom的this.value()//$(this).val()等价于dom的this.value() val()计算值
}); //表单选择器4 $(":checked") – 匹配所有的被选中的单选框/复选框/option
});
//弹出所有 :selected 元素的value值" id="b5"
$("#b5").click(function() {
$(":selected").each(function(){ //$(":checked").each() each()遍历所有选择的元素
alert($(this).val()); //等价于dom的this.value()//$(this).val()等价于dom的this.value() val()计算值
}); //表单选择器5 $(":selected") – 匹配所有被选中的option选项
});
})
</script>
</head>
<body>
<input type="button" value=" 改变所有input 元素的背景色为 #F08080" id="b1" />
<input type="button" value=" 改变:password 元素的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 打印 :radio 元素的个数" id="b3" />
<input type="button" value=" 打印所有 :checked 元素的value值" id="b4" />
<input type="button" value=" 打印所有 :selected 元素的value值" id="b5" />
<h1>天气冷了</h1>
用户名：<input type="text" disabled="disabled" name="username" value="被禁用了"/>
密码：<input type="password" name="password" value="123"/>
性别：<input type="radio" name="gender" value="man"/> 男
<input type="radio" name="gender" value="woman" checked="checked" />女
<br>
<br>
爱好：
<input type="checkbox" name="like" value="lanqiu" checked="checked" /> 篮球
<input type="checkbox" name="like" value="taiqiu"/> 台球
<input type="checkbox" name="like" value="zuqiu"/> 足球
出生地：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected="selected">上海</option>
<option value="guangzhou">广州</option>
</select>
简介：
<textarea name="discription" rows="2" cols="10">请求输入个人描述...</textarea>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
body{
font-family: "微软雅黑";
}
table {
border:#0099FF 1px solid;
width:100px;
border-collapse:collapse;
margin:15px 10px;
width:10%;
}
table td{
border:#0066FF 1px solid;
background-color:#6f5f3e;
text-align:center;
padding: 5px 0px;
}
table td div {
background-color:#FFFF99;
text-align:left;
line-height: 24px;
padding-left: 14px;
}
table td a:link, table td a:visited {
color:#00ffFF;
text-decoration:none;
}
table td a:hover {
color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div { display:none; }
.open { display:block; }
.close { display:none; }
</style>
<!--引入jquery的js库-->
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
/* --通过jQuery实现访QQ列表好友分组-- */
//thisobj传过来的是<a href标签> a标签和div标签是兄弟标签
function openDiv(thisobj){
//思想：1.将所有div关闭，2.然后指将自己点击的div切换状态(打开就关闭，关闭就打开)
//1.将所有div关闭
//thisobj传过来的是<a href标签> a标签和div标签是兄弟标签
//先获取传过来的标签的祖先元素tr ------> $(thisobj).parents("tr")
//祖先元素tr的所有兄弟tr ------> .siblings()
//tr的所有后代div()隐藏 -----> .find("div").hide() 注意：find()注意包括子元素，孙元素等等 这里tr找到子元素td,找到孙元素div
$(thisobj).parents("tr").siblings().find("div").hide();
//2.然后指将自己点击的div切换状态(打开就关闭，关闭就打开)
$(thisobj).next().toggle(); //a标签的兄弟标签div $("div").next() – 获取所匹配元素后面紧邻的兄弟元素
// $("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.
}
/* --通过js实现访QQ列表好友分组--
function openDiv(thisobj){
var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
var aDiv = document.getElementsByTagName("div");
//判断当前分组div是展开还是关闭
if(oDiv.style.display == "block"){
//如果当前div是打开的, 只需关闭该div即可
oDiv.style.display = "none";
}else{
//如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的
for(var i=0;i<aDiv.length; i++){
aDiv[i].style.display = "none";
}
oDiv.style.display = "block";
}
}
*/
</script>
<!--
-----------------------------------------------4.文档操作-----------------------------------------------------------
parent()
$("#d1").parent() – 获取id为d1元素的父元素
parents()
$("#d1").parents() – 获取id为d1元素的祖先元素
$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素
next()
$("div").next() – 获取所匹配元素后面紧邻的兄弟元素
$("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素
nextAll()
$("div").nextAll() – 获取所匹配元素后面所有的兄弟元素
$("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素
prev()
$("div").prev() – 获取所匹配元素前面紧邻的兄弟元素
$("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素
prevAll()
$("div").prevAll() – 获取所匹配元素前面所有的兄弟元素
$("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素
siblings()
$("div").siblings() – 获取所匹配元素前后所有的兄弟元素
$("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素
append()
$("div").append("<span></span>") –为所匹配元素追加一个span子元素
remove()
$("div").remove() – 删除所匹配元素
html()
$("div").html() – 获取所匹配元素的html内容
$("div").html("xxx") – 为所匹配元素设置html内容
text()
$("div").text() – 获取所匹配元素的文本内容
$("div").text("xxx") – 为所匹配元素设置文本内容
attr()
$("div").attr("id") – 获取所匹配元素的id属性值
$("div").attr("id", "xx") – 为所匹配元素设置id属性
css
$("div").css("width") – 获取所匹配元素的width样式属性值
$("div").css("width", "200px") – 为所匹配元素设置width样式属性
$("div").css({"width":"200px", "color":"red","font-size":"24px" }) ; – 为所匹配元素设置width样式属性
------------------------------------------5.事件----------------------------------------------------
click()
$("div").click(function(){}) – 为所匹配元素绑定点击事件
blur()
$("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件
focus()
$("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件
change()
$("select").change(function(){}) – 为所匹配元素绑定选项切换事件
ready()
$(document).ready(function(){}) – 文档就绪事件
其作用相当于: window.onload = function(){}
简写形式为:
$(function(){}) – 在整个文档加载完成后立即执行
-----------------------------------------6.效果------------------------------------------------------
show()
$("div").show() – 将隐藏元素设置为显示(底层操作的是display);
hide()
$("div").hide() – 将显示元素设置为隐藏(底层操作的是display);
toggle()
$("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.
-->
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
黎活明<br />
</div>
</td>
</tr>
</table>
</body>
</html>