1、JQUery
的属性操作
JQuery
属性操作
html() innerHTML
相同。如果不传参，就是获取起始标签和结束标签中的内容。如果传参，就是设置。
text() innerText
相同。如果不传参，就是获取起始标签和结束标签中的文本。如果传参，就是设置。
val()
设置获取表单项
value
属性的值。如果不传参数。就是获取。如果传了参。就是设置。
val
方法同时设置多个表单项的值示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// $(":radio").val(["radio2"]);
// $(":checkbox").val(["checkbox1","checkbox2","checkbox3"]);
// $("#multiple").val(["mul1","mul3"]);
// $("#single").val(["sin3"]);
//同时操作单选，复选，下拉，的选中
$(":radio,:checkbox,#multiple,#single").val(["checkbox1","radio2","mul2","checkbox2","sin2"]);
})
</script>
</head>
<body>
单选：
<input name="radio" type="radio" value="radio1" checked="checked"/>radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" checked="checked"/>checkbox3
<br/>
下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3" selected="selected">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选 ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3" selected="selected">sin3</option>
</select>
</body>
</html>
attr()
可以设置和获取标签的属性值。
arrt
方法，还可以操作非标准的属性（自定义属性）。
prop()
可以设置和获取标签的属性值。它主要操作
checked.selected.disabled
。这类属性。这类属性都有它们的值，都是
true
和
false
两种状态。
1、JQuery
练习
2.
全选，全不选，反选
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(":checkbox[name='items']").click(function(){
var checkedCount = $(":checkbox[name='items']:checked").length;
var count = $(":checkbox[name='items']").length;
if (checkedCount == count) {
$("#checkedAllBox").prop("checked",true);
} else {
$("#checkedAllBox").prop("checked",false);
}
});
//给【全选/全不选】注册单击事件
$("#checkedAllBox").click( function(){
//，在注册的事件的function中，有一个this对象
//这个this对象是一个dom对象。它是当前正在响应事件的dom对象
// alert(this.checked);
$(":checkbox[name='items']").prop("checked",this.checked);
} );
// 【全选按钮】单击事件
$("#checkedAllBtn").click(function(){
$(":checkbox").prop("checked",true);
});
// 【全不选按钮】单击事件
$("#checkedNoBtn").click(function(){
$(":checkbox").prop("checked",false);
});
// 【提交按钮】单击事件
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
//【反选按钮】单击事件
$("#checkedRevBtn").click(function(){
// 获取全部的球类
// 在事件的function中有一个this对象。这个this对象是当前正在响应事件的dom对象
$(":checkbox[name='items']").each(function(){
//在each遍历的function有一个this对象。这个this对象是当前正在遍历到的dom对象
this.checked = !this.checked;
});
// 我们应该判断一下，是否是全部的球类都被选中。如果都被选中。【全选/全不选 】也应该被选中
var checkedCount = $(":checkbox[name='items']:checked").length;
var count = $(":checkbox[name='items']").length;
if (checkedCount == count) {
$("#checkedAllBox").prop("checked",true);
} else {
$("#checkedAllBox").prop("checked",false);
}
// $("#checkedAllBox").prop("checked",checkedCount == count);
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
Dom
的增删改
内部插入：
appendTo() a.appendTo(b)
是把
a
加入到
b
子元素后面
prependTo() a.prependTo(b)
是把
a
插入到
b
的子元素前面
外部插入：
insertAfter() a.insertAfter(b) ba
insertBefore() a.insertBefore(b) ab
替换
:
replaceWith() a.replaceWith(b);
用
b
去替换
a
replaceAll() a.replaceAll(b)
用
a
去替换
b
删除：
remove() a.remove()
移除
a
标签对象
empty() a.empty()
清空，挖空
a
对象
5、JQuery
练习二
2.
从左到右，从右到左练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 【选中添加到右边】单击事件
$("button:eq(0)").click(function(){
$("select:eq(0) option:selected").appendTo( $("select:eq(1)") );
});
// 【全部添加到右边】单击事件
$("button:eq(1)").click(function(){
$("select:eq(0) option").appendTo( $("select:eq(1)") );
});
// 【选中删除到左边】单击事件
$("button:eq(2)").click(function(){
$("select:eq(1) option:selected").appendTo( $("select:eq(0)") );
});
// 【全部删除到左边】单击事件
$("button:eq(3)").click(function(){
$("select:eq(1) option").appendTo( $("select:eq(0)") );
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
3.动态添加、删除表格记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var aDeleteFun = function(){
// 事件的function中有一个this对象
// 这个this对象是当前正在响应事件的dom对象
var $trObj = $(this).parent().parent();
//查找tr标签对象的第一个td标签
var name = $trObj.find("td:first").html();
// 确认提示框
// 确认提示框有两个按钮，一个确定 ，一个取消。
// 它接收一个参数。这个参数是提示框的提示文本内容
// 它有一个返回值。当用户点击确定之后。返回true。当用户点击取消之后。返回false
if ( confirm("你确定要删除【" + name + "】吗？") ) {
$trObj.remove();
}
// return false可以阻止元素的默认行为！
return false;
}
// 删除的单击事件
$("a").click(aDeleteFun);
//提交按钮单击事件
$("#addEmpButton").click(function(){
// 获取输入框中的名称，邮箱，工资
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
// 创建一个行标签对象
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href='deleteEmp?id=003'>Delete</a></td>" +
"</tr>");
// 添加到第一个表格中
$trObj.appendTo( $("#employeeTable") );
//
$trObj.find("a").click( aDeleteFun );
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
样式操作。
addClass()
添加一个或多个样式
removeClass()
删除一个或多个样式
toggleClass()
添加或者删除样式（有就删除，没有就添加）。
offset()
获取或设置元素的坐标
7
、
JQuery
动画
基本动画
show()
显示隐藏（不可见）元素
hide()
隐藏可见的元素
toggle()
切换调用
show
或
hide
方法，可见就隐藏，不可见就显示
淡入淡出动画
fadeIn()
慢慢淡入出来
fadeOut()
慢慢淡出
fadeTo()
让元素在指定的时间内，透明度修改到给定的值。
fadeToggle()
切换调用
fadeIn
或
fadeOut
，如果元素可见，就
fadeOut
，如果元素不可见，就
fadeIn
练习
06
、
CSS_
动画 品牌展示
需求：
1.
点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.
当显示全部内容的时候，按钮文本为“显示精简品牌”
然后，小三角形向上。所有品牌产品为默认颜色。
3.
当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
然后小三形向下。并且把
佳能，尼康的品牌颜色改为红色（给
li
标签添加
promoted
样式即可）
<!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">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
var $lisObjs = $("li:gt(5):not(:last)");
// 查找按钮中a标签
$("div div a").click(function(){
//第一步，我们要给a标签绑定单击事件，实现点击之后。可以显示或隐藏卡西欧之后品牌。
//is可以判断元素是否可见
if ( $lisObjs.is(":hidden") ) {
// 如果为true说明是隐藏状态。应该显示
$lisObjs.show();
//修改按钮的内容为显示精简品牌
$("div div a span").html("显示精简品牌");
// 先删除原来的小三角样式
$("div div").removeClass();
// 再添加向上的小三角样式
$("div div").addClass("showless");
//准备高亮某些产品
$("li:contains('佳能'),li:contains('爱国者')").addClass("promoted");
} else {
// 如果是false，说明可见，应该隐藏
$lisObjs.hide()
//修改按钮的内容为显示全部品牌
$("div div a span").html("显示全部品牌");
// 先删除原来的小三角样式
$("div div").removeClass();
// 再添加向下的小三角样式
$("div div").addClass("showmore");
// 取消高亮
$("li:contains('佳能'),li:contains('爱国者')").removeClass();
}
//阻止元素的默认行为。也就是阻止a标签跳转
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showless">
<a href="more.html"><span>显示精简品牌</span></a>
</div>
</div>
</body>
</html>
JQuery
事件操作
$(function(){});
和
window.onload = function(){}
的区别？
他们分别是在什么时候触发？
jquery
的页面加载完成之后。是在浏览器的内核解析完页面的标签。并且创建出来
dom
对象之后。
原生的
window.onload
页面加载完成之后。是在浏览器内核解析完页面的标签
dom
对象都创建好之后。并且页面中所有元素都加载完成。
他们触发的顺序？
先执行
jquery
的页面加载完成之后
再执行
window.onload
的页面加载完成之后。
他们执行的次数？
window.onload
只会执行最后一次赋值的函数。
jquery
的页面加载完成之后是根据用户绑定的多个函数顺序，依次执行全部的函数。
执行的顺序，是跟注册的顺序一样。
执行次数，是由注册的个数决定。
click()
一个是注册事件，一个是触发事件。
mouseover()
鼠标移入事件
mouseout()
鼠标移出事件
bind()
也可以绑定事件。可以同时绑定多个事件。
one()
可以给元素绑定一次性的事件。
live() jQuery
给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
unbind()
跟
bind
相反的操作。
事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
那么如何阻止事件冒泡呢？
在事件函数体内，
return false;
可以阻止事件的冒泡传递。
javaScript
事件对象
事件对象，是封装有触发的事件信息的一个
javascript
对象。
我们重点关心的是怎么拿到这个
javascript
的事件对象。以及使用。
如何获取呢
javascript
事件对象呢？
在给元素绑定事件的时候，在事件的
function( event )
参数列表中添加一个参数，这个参数名，我们习惯取名为
event
。
这个
event
就是
javascript
传递参事件处理函数的事件对象。
比如：
//1.
原生
javascript
获取 事件对象
//1.原生javascript获取 事件对象
document.getElementById(
"areaDiv"
).onclick =
function
(event){
console.log(event);
}
//2.JQuery
代码获取 事件对象
$(
"#areaDiv"
).click(
function
(event){
console.log(event);
});
//3.
使用
bind
同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$(
"#areaDiv"
).bind(
"mouseover mouseout"
,
function
(event){
if
(
"mouseover"
== event.type) {
console.log(
"鼠标移入"
);
}
else
{
console.log(
"鼠标移
出
");
}
});
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
