1.jQuery简介及使用
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。(write less,do more.)
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
我用的是jQuery1.12.4版本
uncompressed：未压缩版本，适用于开发环境，方便查看源代码
minified：压缩版本，适用于生产环境
jQueryapi文档
2.jQuery语法
通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
基础语法是：$(selector).action() 即 $(“#btn”) == jQuery(“#btn”)
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例：
$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有段落
$(".test").hide() 隐藏所有 class="test" 的所有元素
$("#test").hide() 隐藏所有 id="test" 的元素
3.jQuery选择器
- jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p")选取<p>元素。
$("p.intro")选取所有 class="intro" 的<p>元素。
$("p#demo")选取所有 id="demo" 的<p>元素。
- jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]")选取所有带有 href 属性的元素。
$("[href='#']")选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。
- jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 div 元素的背景颜色更改为红色：
$("div").css("background-color","red")
简洁操作:
$("#box").css("border", "solid 1px red");
标准操作:
$("#box").css({
"border":"solid 1px red",
"background":"#efefef"
})
注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式
如果是动态递增变化的样式，可以通过JS代码进行处理。
- 内容操作
常规开始标签和结束标签中间的内容操作
var $boxValue = $("#box").text(); $("#box").text("添加的内容")
表单元素的数据
var $name = $("#username").val();
- 属性操作
var $id = $("#box").attr("id") $("#box").attr("id", "container")
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6>
|
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| $(this) | 当前 HTML 元素 |
4,jQuery 事件函数及效果显示
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中.
$("selector").show显示 HTML 元素
$("selector").hide隐藏 HTML 元素
$("selector").toggle(speed,callback)显示 / 隐藏HTML 元素
- 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
- 可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback)
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
代码操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画效果展示</title>
<style type="text/css">
#box{width:200px;height: 200px;background: red;position: absolute;top: 50px;left: 0px;}
</style>
<script src="../jquery-1.12.4.js">
</script>
<script>
$(function(){
$("#btn_show").click(function(){
$("#box").show(1000);
})
$("#btn_hide").click(function(){
$("#box").hide(1000);
})
$("#btn_toggle").click(function(){
$("#box").toggle(1000);
})
$("#btn_slideDown").click(function(){
$("#box").slideDown(1000);
})
$("#btn_slideUp").click(function(){
$("#box").slideUp(1000);
})
$("#btn_slideToggle").click(function(){
$("#box").slideToggle(1000);
})
$("#btn_fadeIn").click(function(){
$("#box").fadeIn(1000);
})
$("#btn_fadeOut").click(function(){
$("#box").fadeOut(1000);
})
$("#btn_fadeToggle").click(function(){
$("#box").fadeToggle(1000);
})
$("#btn_fadeTo").click(function(){
$("#box").fadeTo(1000,0.5);
})
$("#btn_animate").click(function(){
$("#box").animate({left:"500px",top:"100px",width:"100px",height:"50px"},1000)
.animate({top:"400px",left:"300px"},2000)
})
})
</script>
</head>
<body>
<button id="btn_show">显示</button>
<button id="btn_hide">隐藏</button>
<button id="btn_toggle">显示/隐藏 状态切换</button>
<button id="btn_slideDown">卷帘显示</button>
<button id="btn_slideUp">卷帘隐藏</button>
<button id="btn_slideToggle">卷帘显示/隐藏 状态显示</button>
<button id="btn_fadeIn">透明度显示</button>
<button id="btn_fadeOut">透明度隐藏</button>
<button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
<button id="btn_fadeTo">切换到指定的透明度</button>
<button id="btn_animate">自定义动画</button>
<div id="box"></div>
</body>
</html>
效果展示
- 图片轮播特效
代码操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图动态展示</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
#box{margin:10px auto;padding: 5px;position: relative;left: 400px;}
#box img{position:absolute;border:solid 2px #888;padding:5px;border-radius: 5px;vertical-align:bottom;display:none;}
#box img:nth-child(1){display: block;}
</style>
<script src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var _index = 0; //当前正在展示的图片的下标
//计时函数 2s更换一次图片
setInterval(function(){
var _next = _index + 1; //下一张要展示的图片的下标
if(_next >= 5){
_next = 0;
}
$("img").eq(_index).fadeOut(1000); //隐藏当前图片
$("img").eq(_next).fadeIn(1000); //显示下一张图片
_index ++;
if(_index >= 5){
_index = 0;
}
},2000)
})
</script>
</head>
<body>
<div id="box">
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
</div>
</body>
</html>
效果展示：
图片轮播特效
- 导航栏上下滑动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏滑动卷帘效果</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.nav{list-style: none;height: 50px;background-color: #069}
.nav>li{float: left;height: 50px;font-size: 20px;color: #fff;width: 120px;text-align: center;line-height: 50px;}
.nav > li > ul{list-style: none;width: 120px;background: #E0E0E0;display: none;}
.nav > li > ul > li{height: 50px;line-height: 50px;color: #333;font-size: 18px;width: 120px;}
</style>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 这里面的代码，是当页面中的标签加载完成后执行的
$("li").mouseenter(function(){
$(this).children().last().stop(true).slideDown("slow");
});
$("li").mouseleave(function(){
$(this).children().last().stop(true).
slideUp("slow");
})
})
</script>
</head>
<body>
<ul class="nav">
<li><span>首页</span>
<ul>
<li>国内要闻</li>
<li>国际要闻</li>
</ul>
</li>
<li><span>娱乐</span>
<ul>
<li>电竞</li>
<li>影视</li>
<li>明星</li>
<li>综艺</li>
<li>时尚</li>
</ul>
</li>
<li><span>社会</span>
<ul>
<li>财经</li>
<li>互联网</li>
<li>房产</li>
<li>经济</li>
</ul>
</li>
<li><span>图片</span>
<ul>
<li>美女</li>
<li>风景</li>
<li>动漫卡通</li>
<li>汽车</li>
<li>萌宠</li>
</ul>
</li>
<li><span>IT</span>
<ul>
<li>javascript</li>
<li>Html/css</li>
<li>C++</li>
<li>PHP</li>
<li>python</li>
</ul>
</li>
</ul>
</body>
</html>
效果：
导航栏滑动效果展示
- 图片翻转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片翻转</title>
<!-- <style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 400px;height: 200px;border:solid 2px #888;border-radius: 8px;margin: 20px auto;padding: 3px;position: relative;}
/*#box img{display:block;width:400px;height: 190px;
position: absolute;top:6px;}*/
#box img{width: 400px;border-radius:3px;position:absolute;}
/* #box img:nth-child(2){height:0;}*/
</style> -->
<style type="text/css">
*{margin: 0;padding: 0;}
#box{margin: 50px auto;width: 400px;height: 200px;padding: 5px;border:solid 1px #888;position: relative;}
#box img{width: 400px;height:198px;border-radius:8px;position:absolute;}
#box img:nth-child(2){height:0;}
</style>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 当页面中所有标签全部加载完成的时候，执行的代码
$("#box").mouseenter(function(){
var $that = $(this);
// 隐藏第一张图片
$that.children().first().stop(true).animate({
top:"100px",height:"0px"},1000,function(){
// 显示第二张图片
$that.children().last().css({
top:"100px"}).stop(true).animate({
top:"5px",height:"200px"},1000);
});
});
$("#box").mouseleave(function(){
var $that = $(this);
// 隐藏第二张图片
$that.children().last().stop(true).animate({
top:"100px",height:"0px"},1000,function(){
// 显示第一张图片
$that.children().first().css({
top:"100px"}).stop(true).animate({
top:"5px",height:"200px"},1000);
});
});
})
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
效果展示：
图片翻转特效
