HTML
hx标签:
<!--
hx标签:
作用:设置标题
效果:换行,上下留白
用法:x取1~6
<hx>
标题
</hx>
-->
<h1>王宝强</h1>
<h2>王宝强</h2>
font标签
<!--
font标签:
用来设置文字效果:大小 颜色 字体库
<font color="设置颜色 单词/16进制"
size="设置大小 1~7"
face="设置字体库 宋体"
>
文字
</font>
-->
<font color="#4190F3" size="7" face="黑体">
王宝强
</font>
b标签
<!--
1.b标签
<b>
加粗
</b>
2.strong标签
<strong>
加粗
</strong>
3.i标签
<i>
倾斜
</i>
-->
<b>加粗</b>
<strong>
加粗
</strong>
<i>
倾斜
</i>
<strong><i>加粗倾斜</i></strong>
<i><b>加粗倾斜</b></i>
p标签
<!--
p标签:
用来分段 换行 留白
<p>
段落
</p>
-->
<p>
班长笑嘻嘻
</p>
br标签:
<!--
br标签: 换行
<br/>
-->
大家都笑着呢<br/>大家都笑着呢<br/>大家都笑着呢
hr标签
<!--
hr标签:用来显示分割线
<hr
width="设置宽度 百分比/使用像素"
algin="设置对齐方向 left左right右center居中"
/>
-->
<hr width="50%" align="right" />
img标签
<!--
img标签:告诉浏览器展示一个图片资源
<img
src="设置图片资源"
width="设置宽度 像素px/百分比"
height="设置宽度 像素px/百分比"
alt="设置图片消失后的文字说明"
/>
-->
<img src="img/huangtu2.jpg" width="30%" alt="这是一张很黄的图" />、
超链接
<!--
超链接:将资源隐藏到文字背后,点击可以打开显示
<a
href="设置资源 "
target="设置资源的显示位置 _self 当前窗口
_blank 新窗口"
>文字</a>
-->
<a href="img/huangtu.jpg" target="_self">这是一张黄图</a>
排序
<!--
列表:排列方式
无序表:无顺序影响
<ul type="设置li前面的符号 square方块 circle空心 disc实心 "> unorder list
<li>记录1</li> list item
<li>记录2</li> list item
</ul>
-->
四大名著:西游记 水浒传 三国 红楼梦
<ul type="square">
<li>西游记</li>
<li>水浒传</li>
<li> 三国</li>
<li> 红楼梦</li>
</ul>
论纯洁程度
<!--1.班长 2.大牛 3.二牛 4.三牛-->
<!--有序表:有顺序影响
<ol type="设置li前面的顺序 1自然数 a小写字母 A大写字母 I罗马数字 i小写罗马数字"> order list
<li>记录1</li> list item
</ol>
-->
<ol type="i">
<li>班长</li>
<li>大牛</li>
<li>二牛</li>
<li>三牛</li>
</ol>
表格
表格:
table标签:
<table border="设置边界线 1px"
width="设置宽度 像素或者百分比">表格
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>行
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>行
</table>
th:加粗内容与居中的单元格,一般放在第一行
<!--合并单元格-->
跨列合并:水平向右合并单元格
<td colspan="2">2 3</td>
跨行合并:向下合并单元格
<td colspan="2">1 2</td>
frameset:框架集,小窗口集合.
作用:整合多个页面
<frameset rows="依次设置窗口的高度比例 比例使用逗号隔开 "
cols="依次设置窗口的宽度比例 比例使用逗号隔开">
<frame noresize="noresize"/>
<frame src="设置加载的html页面"/>
<frame name="设置当前窗口的名字 给链接的target"/>
</frameset>
注意:1.不能与body共存
2.没有设置每个窗口的比例
形式一
<frameset rows="30%,*,30%">
<frame />
<frame />
<frame/>
形式二
<frameset cols="30%,*,30%">
<frame />
<frame />
<frame/>
</frameset>
</frameset>
一个表单
<form action="" method="post">
//文本输入框
银行卡账号:<input type="test" value=:"21位银行卡号"/>
//密码输入框
<br />银行卡密码:<input type="password" value="六位密码"/>
//单选按钮输入框 checked默认选中
<br /><input type="radio" name="sex" value="1" checked />男
<input type="radio" name="sex" value="2" />女
//复选框
<br />先定几个小目标<input type="checkbox" name="name" checked="checked" value="0" />先赚他一个亿
<input type="checkbox" name="name" checked="checked" value="1"/>给朋友投资五亿,不多,不多。
<input type="checkbox" name="name" checked="checked" value="2" />一人分你们100万
<br /><b>进行转账操作</b>
<br />输入姓名<input type="test" name="name" value="" />
<br />输入密码<input type="password" name="name" value="" />
//下拉框
<br /><select>
<option value="5">视频服务</option>
<option value="6">上门服务</option>
</select>
//大文本框
<br /><br /><textarea cols="50" rows="5"></textarea>
<br /> <input type="image" src="img/确认转账.bmp" />
</form>
div的使用
<div>我是DIV</div>
<div style="background-color: blue;">我是DIV02</div>
<div style="background-color: yellow;">我是DIV03</div>
<div style="background-color: yellowgreen;">
//表单内的元素
<span style="background-color: blueviolet;">
爱情 span行内元素
</span>
</div>
<style>标签设置div
#abc{
background-color: blue;
width : 100px;
height: 32px;
}
<dir id="abc">
哈哈哈
</dir>
JavaScript
script标签下alert
<script type="text/javascript">
alert(5==5);
//上面是 等于 下面是全等 比较值和数据类型
alert(5===5);
</script>
alert校验
<form action="#" method="get" οnsubmit="return getBoolean()">
<input id="UsernameID" type="text" name="username" value=""/?>
<input type="submit" />
</form>
<script type="text/javascript">
function getBoolean(){
//校验 通过表单id获得表单input框
var inputObj = document.getElementById("UsernameID")
//表内容等于0 什么都不返回
if(inputObj.value.length == 0){
alert(没有输入任何内容);
}
return false;
}
</script>
控制表单提交
<script type="text/javascript">
function getSim(){
//控制提交表单
return false;
}
</script>
<form action="index.html" οnsubmit="return getSum()">
<input type="text" name="word" id="d1" />
<input type="submit" value="搜索"/>
</form>
表单属性:prompt 输入框 confirm 确认取消框
<script type="text/javascript">
/*prompt 输入框
* confirm 确认取消框
* alert 是 报警框 前面的window可以不加
*/
var d1 = window.prompt("请输入密码:");
alert("您输入的密码是:" + d1)
var d2 = window.confirm();
alert(d2);
</script>
表单添加单击事件
<input id="d2" type="button" value="周帅杰" οnclick="test()" />
<script type="text/javascript">
function test(){
alert("爽");
}
</script>
定时广告
/*
* * 实现思路:
* 1、页面存储一张广告图片,只是不显示
* 2、页面加载完,创建一个一次性计时器,隔3000毫秒,调用函数1
* 3、函数1获取图片,设置css 属性变为显示
* 4、再创建一个一次性计时器,隔一会调用函数2,函数2隐藏图片
*/
<div id="dsgg" style="display: none;">
<img src="products/1/cs10002.jpg" width="100%" />
</div>
window.οnlοad=function(){
var gg = document.getElementById("dsgg")
window.setTimeout(function(){
//执行图片操作
gg.style.display="";//不写默认block
//执行 限时关闭 不显示
window.setTimeout(function(){
gg.style.display="none";
},10000);
},3000);
}
两种确认方法
<!--两种方法-->
<script type="text/javascript">
// function myCom(){
// alert("好,确认。")
// }
//第二种 减少耦合性 两种都要用
window.onload = function(){
var dd = document.getElementById("dd")
dd.onclick = function(){
alert("不好,反悔了。")
}
}
</script>
</head>
<body>
<input type="button" value="确认" οnclick="myCom()" />
<input type="button" id="dd" value="确认"/>
</body>
焦点事件
<!--焦点获得 onfocus 失去onblur-->
<!--匿名实现-->
<script type="text/javascript">
window.onload = function(){
var da = document.getElementById("da")
var db = document.getElementById("db")
var dc = document.getElementById("dc")
var dd = document.getElementById("dd")
//t1获得焦点在t2显示
da.onfocus = function(){
db.value="da获得焦点"
}
da.onblur = function(){
db.value="da失去焦点"
}
dc.onfocus = function(){
dd.value="dc获得焦点"
}
dc.onblur = function(){
dd.value="dc失去焦点"
}
}
</script>
</head>
<body>
<input type="text" id="da"/>
<input type="text" id="db"/>
<br />
<input type="text" id="dc"/>
<input type="text" id="dd"/>
</body>
上面实现了焦点事件可以直接打印 获取当前标签的内容
alert(this.value) 建议使用者种
alert(da.value)//可能会出问题
获得标签框 三种方式
<!--获得标签 div class name 值 数组 ,只能返回个数-->
<!--匿名实现 alct获得个数-->
<script>
window.onload = function(){
//获得div格式的标签框
// var dd = document.getElementsByTagName("div")
// alert(dd.length)
//获得class是asd是标签框
// var dd = document.getElementsByClassName("asd")
// alert(dd.length)
//获得 name是name是标签框
var dd = document.getElementsByName("name")
alert(dd.length)
}
隔行换色实现 鼠标移入移除
需求:
* 隔一行设置一个背景色
*
* 思路:
* 1、设置背景色,通过class 结合 CSS 实现
* 2、通过程序获取所有的行 -- tr,分别设置class
* 获取以及遍历
* //添加鼠标事件 --- onmouseover
<style>
.oushu{
background-color: chocolate;
}
.jishu{
background-color: cornflowerblue;
}
.uubiao{
background-color: darkgrey;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
//通过标签获得行
var hr = document.getElementsByTagName("tr")//tr是横行
//遍历
for(var i = 0; i < hr.length ; i++){
if(i % 2 == 0){
//是偶数
hr[i].className="oushu";
}else{
hr[i].className="jishu"
}
var temp;//储存以前的颜色值
hr[i].onmouseover = function(){
temp = this.className
this.className = "uubiao"
}
hr[i].onmouseout = function(){
this.className = temp;
}
}
}
</script>
复选框 全选全部选返选
<input type="button" value="全选" id="all" />
<input type="button" value="全不选" id="none" />
<input type="button" value="反选" id="fanxuan" />
<!--/*以全选为例:
* 1、为全选按钮添加单击事件
* 2、获取所有的复选框
* 3、遍历复选框,每一个都设置为 选定
/-->
<script type="text/javascript">
//匿名实现
window.οnlοad=function(){
//获得全选按钮
var all = document.getElementById("all")
//点击后的效果
all.onclick = function(){
//获得每一个框
var it = document.getElementsByClassName("itemSelect")
for (var i = 0; i < it.length ; i++) {
it[i].checked = true;
}
}
// 全不选 获得全不选按钮
var none = document.getElementById("none")
none.onclick = function(){
//获得每一个框
var it = document.getElementsByClassName("itemSelect")
for (var i = 0; i < it.length ; i++) {
it[i].checked = false;
}
}
//反选 获得返选按钮
var fanxuan = document.getElementById("fanxuan")
fanxuan.onclick = function(){
//获得框遍历
var it = document.getElementsByClassName("itemSelect")
for (var i = 0; i < it.length ; i++) {
// if(it[i].checked==true){
// it[i].checked=false
// }else{
// it[i].checked=true
// }
// 简便方法 按键等于不是他当前值true false
it[i].checked = !it[i].checked
}
}
}
</script>
每一个复选框的id是一样的
<input type="checkbox" class="itemSelect" />
创建集合
<!-- 一维集合 创建数组的三种方式-->
<script type="text/javascript">
// var arr = new Array()
// alert(arr)
// var arr1 = new Array(3)
// alert(arr1)
// alert(arr[0])
// var arr2 = new Array(a,b,c,d)
//第三种变体 = [a,b,c];
// alert(arr2)
// alert(arr[0])
// var arr = new Array(1,2,3)
var arr = [1,2,3];
alert(arr.length)
alert(arr[1])
</script>
<!--二维数组-->
<script type="text/javascript">
var box = new Array();
box[0] = new Array(1,2,3,4,5);
box[1] = new Array(7,6,5,4)
box[2] = new Array(3,4,5)
//获得大盒子容量 小盒子容量 小盒子数字
alert(box.length)
alert(box[1].length)
alert(box[1][0])
</script>
省市联动
<!--创建二维集合-->
var capitall = new Array()
capitall[0]=new Array("北京","上海","广州")
capitall[1]=new Array("New York","洛杉矶")
capitall[2]=new Array("巴黎")
capitall[3]=new Array("东京","富士山")
//先获得当前的value 遍历时 赋值给 下一个框 校验 账号密码一样
//遍历数组,取出每一个首都,每一个首都都组织成一个 option 追加到第二个下拉列表
window.οnlοad=function(){
var p = document.getElementById("country")
p.onchange = function(){
//获得value值 市级的
var c = capitall[this.value]
//获得市级列表
var d = document.getElementById("capital")
//遍历
d.innerHTML= "<option value=''>Pluse select capital</option>"
for(var i = 0 ; i < c.length ; i++){
//显示市级列表
var b = "<option>"+c[i]+"</option>"
d.innerHTML+=b;
}
}
//二维集合0123数组对应城市顺序名称
JQuery
JQuery表达式
//jquery导包
<script src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
// window.onload = function(){
// var id = document.getElementById("id")
// alert(id.innerHTML)
// }
//jquery语法
$(function(){
var id = $("#id")
alert(id.html())
})
</script>
</head>
<body>
<div id="id">hello HBuilder</div>
</body>
JQuery接收标志
<title></title>
<!--接受标签名,类名 返回的都是数组
alert提示 2 2 1-->
<script src="../js/jquery-1.11.0.js"></script>
* 基本选择器:
* $("#id值") --- 返回的是一个元素 ----- document.getElementById("id");
* $("标签名") --- 返回的是数组 -------- document.getElementsByTagName("标签名");
* $(".class") -- 返回的是数组 -------- document.getElementsByClassName("类名");
*
*/
window.onload = function(){
//获取标签是 div 的对象
/*var ds = $("div");
alert(ds.length);*/
var ds = $(".ic");
alert(ds.length);
}
</script>
</head>
<body>
<div id="ic">leshundai</div>
<div>lalalala</div>
<span class="ic">我在诗里见过你</span>
<span class="ic">啦啦啦啦</span>
</body>
获取JQuery 对象
* 方式1:
* A、先获取 JS 对象
* B、将 JS 对象转成 JQ 对象
* 格式: jQuery(js对象); === $(js对象);
* 方式2:
* 直接获取
* jQuery("选择器"); === $("选择器");
*
* 选择器和 CSS 类似:
* id ---- #id
* class -- .class
* 标签名 -- 标签名
*
*/
window.onload = function(){
//方式1:1、先获取该标签对应的 JS 对象
/*var d1 = document.getElementById("d1");
//2、将这个JS 对象转换成 JQuery 对象
var d2 = jQuery(d1);
alert(d1);
alert(d2);*/
//方式2:使用选择器
//var d1 = jQuery("#d1");
var d1 = $("#d1");
alert(d1);
}
</script>
JQ操作标签对象
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
/*
* A、JQ操作标签对象和 JS 一样,主要操作内容体和属性
* JQ的对象操作是将 JS的属性操作函数化了
*
* B、内容体操作
* 获取:JQ对象.html();
* 设置:JQ对象.html("新值");
* 属性操作
* 获取:JQ对象.prop("键");
* 设置:JQ对象.prop("键","新值");
*/
window.onload = function(){
/*var d1 = document.getElementById("d1");
alert(d1.innerHTML);
alert(d1.className);*/
var d1 = $("#d1")
alert(d1.html());
alert(d1.prop("class"));
//设置
d1.html("Hello JQuery!");
d1.prop("class","test2");
alert(d1.prop("class"));
}
JQuery加载多次只返回一次
/*
* 多次加载时,JS最后一次会覆盖之前的,而JQ每一次都执行
* 原因:
* 属性操作会覆盖,函数调用,调用一次执行一次
*
*/
/*window.onload = function(){
alert("----");
}
window.onload = function(){
alert("++++");
}*/
$(function(){
alert("-----");
});
$(function(){
alert("+++++");
});
JQuery添加事件
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
var b1 = $("#b1");
/*
* b1.onclick = function(){}
*/
b1.click(function(){
alert("爽!");
});
});
</script>
</head>
<body>
<input id="b1" type="button" value="打我啊!" />
</body>
JQuery循环
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
var arr = ["a","b","c"];
//转换成JQuery数组
var arr2 = $(arr);
//遍历语法
/*
* 针对于每一个元素,都调用一次 function,传入 索引与当前元素值
*
* 格式1:
* JQ数组.each(function(索引,元素){
* 函数实现
* });
* JQ数组.each(function(){
* this 是当前元素
* 没有索引
* });
*
* 格式2:
* $.each(JQ数组,function(索引,元素){
* 函数实现
* });
* $.each(JQ数组,function(){
* this 是当前元素
* 没有索引
* });
*
*/
/*arr2.each(function(i,e){
alert(i + " " + e);
});*/
/*arr2.each(function(){
alert(this);
});*/
//--------------------------------------
$.each(arr2,function(i,e){
alert(i + " ==== " + e);
});
/*$.each(arr2,function(){
alert(this);
});*/
JQ对象转换成JS 对象
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
/*
* 1、JQ对象转换成JS 对象
* 格式:
* var 变量名 = JQ对象[0];
*
* 2、数组不适用于上面语法
*
*/
/*var d1 = document.getElementById("d1");
alert(d1);
var d2 = $(d1);
alert(d2);
var d3 = d2[0];
alert(d3);*/
var arr = ["a","b","c"];
var arr2 = $(arr);
var arr3 = arr2[0];
alert(arr3);
})
</script>
</head>
<body>
<div id="d1">hello</div>
显示与隐藏JQuery实现
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
/*
* 1、显示、隐藏与切换实现:
* show
* hide
* toggle
*
* 不传参
* 一个参数 --- 毫秒值 ----------- 常用
* 两个参数 --- 毫秒值 + 函数
*
* 2、
*
*
*/
var b2 = $("#b2");
var b1 = $("#b1");
var b3 = $("#b3");
var d1 = $("#show");
b2.click(function(){
//d1.hide();//直接隐藏
//d1.hide(1000);//在 1000 毫秒内隐藏
/*d1.hide(1000,function(){//1000毫秒内隐藏,隐藏完调用一个函数
alert("隐藏完成!");
});*/
//d1.slide
Up(1000);
d1.fadeOut(1000);
});
b1.click(function(){
//d1.show();
//d1.show(1000);
/*d1.show(1000,function(){
alert("显示完成!");
});*/
//d1.slideDown(1000);
d1.fadeIn(1000);
});
b3.click(function(){
//d1.toggle();
//d1.toggle(1000);
/*d1.toggle(1000,function(){
alert("切换完成!");
});*/
//d1.slideToggle(1000);
d1.fadeToggle(1000);
});
});
</script>
</head>
<body>
<div id="show" style="width : 200px; height: 200px; background-color: red;"></div>
<input type="button" value="显示" id="b1"/>
<input type="button" value="隐藏" id="b2"/>
<input type="button" value="切换" id="b3"/>
</body>
JQuery广告弹出
/**
* 实现思路:
* 1、添加一个DIV,里面有一个图片,设置成隐藏的
* 2、页面加载完时,触发一个一次性定时器,三秒钟之后,执行一个函数1
* 3、函数1,要将隐藏的DIV显示出来,最后,再触发一个新的一次性计时器,隔3秒钟后,执行函数2
* 4、函数2,将显示的DIV重新隐藏
*
*/
$(function(){
window.setTimeout(function(){
//慢慢滑出
$("#tanchugg").slideDown(1000);
//一次性计时器,再滑回去
window.setTimeout(function(){
$("#tanchugg").slideUp(1000);
},3000);
},3000);//几秒后执行了
});
</script>
JQuery隔行换色
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.jishu {
background-color: #13777E;
}
.oushu {
background-color: red;
}
.fense {
background-color: pink;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
/*
* JQ中写的更少,做的更多
* 体现:
* 数组.prop("键","值"); ---- 底层取出数组的每一个元素,分别调用 prop 函数
* mouseover mouseout ----- 底层有循环
*
* 但是并不是所有函数调用,数组都会封转循环
*
*/
$(function(){
//1、获取 tr,分成两组
var evens = $("tr[id!='header']:even");
var odds = $("tr[id!='header']:odd");
//2、分别设置 class
evens.prop("class","oushu");
odds.prop("class","jishu");
//声明变量记录之前的 class
var temp;
//添加鼠标移入事件
$("tr[id!='header']").mouseover(function(){
temp = $(this).prop("class");
$(this).prop("class","fense");
});
$("tr[id!='header']").mouseout(function(){
$(this).prop("class",temp);
});
});
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr id="header">
<th></th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
JQuery实现复选框
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-1.11.0.js"></script>
<script>
$(function(){
/*
* 以全选为例:
* 1、获取全选按钮
* 2、添加单击事件
* 3、事件中获取所有复选框,设置 checked 属性为 true
*
*/
var all = $("#all");
all.click(function(){
$(".itemSelect").prop("checked",true);
});
var none = $("#none");
none.click(function(){
$(".itemSelect").prop("checked",false);
});
var fan = $("#fan");
fan.click(function(){
/*
* 错误现象描述:
* 根据第一个复选框状态取值,第一个变成选定,所有都选定,第一个变成不选定,所有都不选定
* 为什么?
* A、var temp = 数组.prop("键") 获取值 时,获取的只是第一个元素的状态
* B、数组.prop("键",!temp),为每一个元素设置状态,但是 temp 是第一个元素的状态
*
* 怎么解决?
* 可以自己循环获取每一个复选框,根据自身状态取反值,不用 JQuery 自己封装的循环
*
*/
/*var temp = $(".itemSelect").prop("checked");
$(".itemSelect").prop("checked",!temp);*/
$(".itemSelect").each(function(){
//根据自身状态取反
//this
var temp = $(this).prop("checked");
//设置
$(this).prop("checked",!temp);
});
});
});
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
<tr>
<th>
<input id="all" type="button" value="全选" />
<input id="none" type="button" value="全不选" />
<input id="fan" type="button" value="反选" />
</th>
<th>序号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>手机数码商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="itemSelect" />
</td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品商品信息</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
JQuery val函数
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
//获得JQ对象的属性值
$(function(){
var dd = $("#dd")
alert(dd.prop("value")) //读取
dd.prop("value","juewang") //从新赋值
alert(dd.val()) //读取
dd.val("shabi") //从新赋值
})
</script>
</head>
<body>
<input type="text" value="aiqing" id="dd" />
</body>
</html>
JQueryClass操作
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
/*需求:
* 获取 class 属性,并且重置 class 属性值为 test2
* JQuery 封装的 class 实现,添加 class 或 删除 class
* 添加 class ---- addClass("值");
* 删除 class ---- removeClass("值");
* 拓展:
* class 是一个特殊属性,一个class 属性可以对应多个 class 值
* */
$(function(){
// var f1 = $("#f1")
// alert(f1.prop("class"))
// f1.prop("class","test222222")
// alert("新class名"+f1.prop("class"))
// //删除class
// f1.removeClass("test222222")
// alert("新class名"+f1.prop("class"))
//添加class
var f2 = $("#f2")
f2.addClass("wtf")
alert(f2.prop("class"))
})
</script>
<style> /*class 值 不唯一 可多个调动修改*/
.hehe {
color: red;
}
.xixi {
font-size: 100px;
}
</style>
</head>
<body>
<font class="test1" id="f1">hello</font>
<font id="f2">hello</font>
<font id="f3" class="hehe haha xixi">hello</font>
</body>
</html>
JQuerytest函数
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
/*
* 总结:
* 1、相同点
* text 和 html 都可以获取或设置内容体
* 2、不同点
* 获取时,html 会获取子级标签,但是 text 只是获取普通文本
* 设置时,如果设置的数据有 html 代码,那么 html 函数设置时,会被浏览器解析
* 而 text 函数,设置时,会被当成普通文本显示
*
*/
$(function(){
//需求:获取 d1 标签的内容体
var d1 = $("#d1");
//获取内容体
//alert(d1.text() + "---" + d1.html());//d1.html();
//设置内容体
//d1.text("haha");//d1.html("新值");
//d1.html("<font color='green'>宝宝</font>");
d1.text("<font color='green'>宝宝</font>");
});
</script>
</head>
<body>
<div id="d1"><font color="red">hello</font></div>
</body>
</html>
JQuery文档插入
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
/*
* 需求1: itcast 后面拼接红色字体 end
* 需求2: itcast 后面拼接蓝色字体 start
*
* 拼接到最后
* A.append(B) ---- A的最后拼接B
* B.appendTo(A) -- 将B拼接到A的最后,必须保证 B 是 JQuery对象
*
* 插入到最前
* A.prepend(B) --- A的最前插入B
* B.prependTo(A) - 将B插入到A的最前
*
*/
$(function(){
var d1 = $("#d1");
//d1.html(d1.html() + "<font color='red'>end</font>");
//拼接
//d1.append("<font color='red'>end</font>");
//等价于
$("<font color='red'>end</font>").appendTo(d1);
//插入
//d1.prepend("<font color='blue'>start</font>");
$("<font color='blue'>start</font>").prependTo(d1);
});
</script>
</head>
<body>
<div id="d1">itcast</div>
</body>
</html>
JQuery鼠标移入移除
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
var d1 = $("#d1");
var t1 = $("#t1");
//添加事件
/*d1.mouseover(function(){
t1.val("鼠标移入了");
});
d1.mouseout(function(){
t1.val("鼠标移出了 .... ");
});*/
//使用链式编程,方法调用完,返回对象自身
/*d1.mouseover(function(){
t1.val("鼠标移入了");
}).mouseout(function(){
t1.val("鼠标移出了 .... ");
});*/
//简化
//
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
d1.hover(function(){
t1.val("鼠标移入了");
},
function(){
t1.val("鼠标移出了 .... ");
});
});
</script>
</head>
<body>
<div id="d1" style=" width: 100px; height: 100px;background-color: red;"></div>
<input type="text" id="t1" />
</body>
</html>
JQuery省市联动
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀","昌平");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
/*
* 1、第一个下拉列表添加 onchange 事件
* 2、根据选项索引获取数组
* 3、将第二个下拉列表恢复为默认的初始化数据
* 4、将数组中每一个元素组织成一个 option,追加到第二个下拉列表
*
*/
$(function(){
$("#province").change(function(){
//获取数组元素
var cs = cities[$(this).val()];
//恢复第二个下拉列表
$("#city").html("<option value=''>----请-选-择-市----</option>");
//循环追加
$(cs).each(function(){
$("#city").append("<option value=''>" + this + "</option>");
});
});
});
</script>
<body>
<select id="province" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
</html>
JQuery左右选择
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
//左添加到右 右面加左面的内容
$("#zuodan").click(function(){
//you添加zuo
$("#you").append($("#zuo option:selected"))
})
$("#zuoquan").click(function(){
//you添加zuo
$("#you").append($("#zuo option"))
})
$("#youdan").click(function(){
//zuo添加you
$("#zuo").append($("#you option:selected"))
})
$("#youquan").click(function(){
//zuo添加you
$("#zuo").append($("#you option"))
})
})
</script>
</head>
<body>
<select id="zuo" multiple="multiple" style="width: 120px; height: 200px;">
<option>左0</option>
<option>左1</option>
<option>左2</option>
<option>左3</option>
<option>左4</option>
</select>
<input type="button" id="zuodan" value=">" />
<input type="button" id="zuoquan" value=">>" />
<input type="button" id="youquan" value="<<" />
<input type="button" id="youdan" value="<" />
<select id="you" multiple="multiple" style="width: 120px; height: 200px;">
<option>右0</option>
<option>右1</option>
<option>右2</option>
<option>右3</option>
<option>右4</option>
</select>
</body>
</html>