入门 HTML JavaScript Jquery学习回顾 有小案例

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>