JQuery的CSS_DOM与样式操作
样式：
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
CSS_DOM操作
获取和设置元素的样式属性: css()
获取和设置元素透明度: opacity 属性
获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
<!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 {600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; 200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; 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;}
.promoted a { color:#F50;}
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//测试 jQuery 样式相关的方法.
//1. hasClass(): 某元素是否有指定的样式
var bool = $("div:first").hasClass("SubCategoryBox");
//alert(bool);
//2. 移除样式
var bool2 = $("div:first").removeClass("SubCategoryBox");
alert(bool2);
//3. 添加样式
$("div:first").addClass("SubCategoryBox");
//4. 切换样式: 存在, 则去除; 没有, 则添加.
$(".showmore").click(function(){
$("div:first").toggleClass("SubCategoryBox");
//取消默认行为
return false;
});
//5. 获取和设置元素透明度: opacity 属性
var $css = $("div:first").css("opacity");
alert($css);
$("div:first").css("opacity",0.5);
//6. width 和 height
alert($("div:first").width());
alert($("div:first").width(300));
//7. 获取元素在当前视窗中的相对位移: offset().
//其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
var top = $("div:first").offset().top;
var left = $("div:first").offset().left;
alert(top);
alert(left);
});
</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="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
JQuery的事件
1.加载DOM
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件.
在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 仅一个
在 jQuery 中使用$(document).ready() 方法. 可写多个
<!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>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//加载 DOM 的两种方式: jQuery 的 和 window.onlaod
//之前的简写 ：$(function(){})
$(document).ready(function(){
alert(1);
});
//以下仅执行2 ，相当于给window属性赋值两次，只执行最后的一次
/*
window.onload = function(){
alert("1");
}
window.onload = function(){
alert("2");
}
*/
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<p>你喜欢哪种开发语言?</p>
<ul id="language">
<li>C</li>
<li>Java</li>
<li>.NET</li>
<li>PHP</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="atguigu"/>
</body>
</html>
2.事件绑定
对匹配的元素进行特定的事件绑定: bind()
3.合成事件
hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.
toggle(): 用于模拟鼠标连续单击事件.（轮流执行） 第一次单击元素, 触发指定的第一个函数,
当再一次单击同一个元素时, 则触发指定的第二个函数,
如果有更多个函数, 则依次触发, 直到最后一个. toggle() 的另一个作用: 切换元素的可见状态.
<!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 href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏
$(function(){
/* $(".head").click(function(){
//is()方法判定某个元素是否符合指定选择器
var flag = $(".content").is(":hidden");
if(flag){
//show() 显示元素
$(".content").show();
}else{
$(".content").hide();
}
}); */
//bind: 为某 jQuery 对象绑定事件.
/* $(".head").bind("click",function(){
//is()方法判定某个元素是否符合指定选择器
var flag = $(".content").is(":hidden");
if(flag){
//show() 显示元素
$(".content").show();
}else{
$(".content").hide();
}
}); */
//mouseover: 鼠标移上去
//mouseout: 鼠标移出.
//合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数.
/* $(".head").hover(function(){
$(".content").show();
},function(){
$(".content").hide();
}); */
//合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个
//函数 ... 循环执行.
$(".head").toggle(function(){
$(".content").show();
},function(){
$(".content").hide();
});
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
//实际测试时出现自动轮换执行
4.事件冒泡
事件会按照 DOM 层次结构像水泡一样不断向上直至顶端 解决:
在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.
<!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>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//事件的冒泡: 什么是事件的冒泡
//点击span 依次弹出 span div body
$("body").click(function(){
alert("body");
});
$("div").click(function(){
alert("div");
});
$("span").click(function(){
alert("span");
//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡.
return false;
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
</html>
5.事件对象的属性
事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到.
事件处理函数执行完毕后, 事件对象就被销毁了.
event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.
<!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>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/*
1. 事件: 当鼠标移动时, 就会触发 mousemove 事件.
2. 如何得到事件对象: 在响应函数中添加一个参数就可以.
3. 事件对象的两个属性: pageX,pageY
*/
$(function(){
//事件的 pageX, pageY 属性
$("body").mousemove(function(obj){
$("#msg").text("x: " + obj.pageX
+ ", y: " + obj.pageY);
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
</html>
6.移除事件
移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)
移除某按钮上的所有事件: $(“btn”).unbind(); one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除.
即在每个对象上, 事件处理函数只会被执行一次.
<!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>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//测试移除事件: 使用 unbind 移除事件.
//one(): 只为某一个元素添加一次事件, 事件函数响应后, 将不再被触发响应.
$(function(){
$("#rl").one("click",function(){
alert("红警");
});
/* $("li").click(function(){
alert(this.firstChild.nodeValue);
if(this.id == "bj"){
$("#bj").unbind("click");
}
}); */
})
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<p>你喜欢哪种开发语言?</p>
<ul id="language">
<li>C</li>
<li>Java</li>
<li>.NET</li>
<li>PHP</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="atguigu"/>
</body>
</html>
JQuery的动画
学习时使用的版本为jquery-3.1.1.min.js，测试发现动画特效出现问题，改为视频的1.7版本显示动画正常
动画1
hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);
show(): 将元素的 display 样式改为先前的显示状态.
以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画.
可以通过制定速度参数使元素动起来. 以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.
动画2
fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失.fadeIn() 则相反.
slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时,
这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.
动画3
toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.
slideToggle(): 通过高度变化来切换匹配元素的可见性.
fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). fadeTo() 作了解 使用举例： $("p").fadeTo("slow", 0.66
<!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 href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果
/*
$(function(){
$(".head").toggle(function(){
$(".content").show(1000);
}, function(){
$(".content").hide(1000);
});
}) */
//只改变高度
/*
$(function(){
$(".head").toggle(function(){
$(".content").slideDown(500);
}, function(){
$(".content").slideUp(500);
});
})
*/
//只改变透明度
$(function(){
$(".head").toggle(function(){
$(".content").fadeIn(1000);
}, function(){
$(".content").fadeOut(1000);
});
})
//toggle() 可以切换元素的可见状态.
//slideToggle(): 通过高度变化来切换匹配元素的可见性
//fadeToggle(): 通过透明度来切换元素的可见性.
//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间).
/* $(function(){
$(".content").show();
var i = 1;
$(".head").click(function(){
//$(".content").toggle();
//$(".content").slideToggle();
//$(".content").fadeToggle();
$(".content").fadeTo("slow", i);
i = i - 0.1;
});
}) */
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</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>
<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 {600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; 200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; 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;}
.promoted a { color:#F50;}
</style>
<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
/*
var $category = $("li:gt(5):lt(10)");
此时的 lt 是在 li:gt(5) 基础上进行的.
*/
$(function(){
//1. 需要选择从 "富士" - "爱国者" 的所有 li: $category
var $category = $("li:gt(5):not(:last)");
//2. 把他们隐藏.
$category.hide();
//3. 为 .showmore 添加一个 onclick 响应函数(取消默认行为)
$(".showmore").click(function(){
if($category.is(":hidden")){
$category.show();
//4.2 使 "佳能", "尼康", "奥林巴斯" 变为高亮显示:
//添加 .promoted 的 class
$("li:contains('佳能'),li:contains('尼康'),li:contains('奥林巴斯')").addClass("promoted");
//4.3 .showmore > a > span 的文字变为: 显示精简品牌
$(".showmore > a > span").text("显示精简品牌");
//4.4 .showmore > a > span 的 background 变为:
//url(img/up.gif) no-repeat 0 0
$(".showmore > a > span").css("background","url(img/up.gif) no-repeat 0 0");
}else{
//5. 若 $category 是显示的.为上面的逆过程
$category.hide();
$("li:contains('佳能'),li:contains('尼康'),li:contains('奥林巴斯')").removeClass("promoted");
$(".showmore > a > span").css("background","url(img/down.gif) no-repeat 0 0");
}
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="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>