jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程。
网页中添加 jQuery
- 从 jquery.com 下载 jQuery 库
提示: 将下载的文件放在网页的同一目录下,就可以使用jQuery。
- 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
通过 CDN(内容分发网络) 引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软
Staticfile CDN:
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
百度 CDN:
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
jQuery 语法
通过选取 HTML 元素,并对选取的元素执行某些操作
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素 $(“#test”).hide() - 隐藏 id=“test” 的元素
jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程([runoob.com](http://runoob.com/))</title>
<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide(); //$(".test").hide(); //当用户点击按钮后,有 id="test" 或者 class="test" 属性的元素将被隐藏:
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>
独立文件中使用 jQuery 函数
<head>
<script src="my_jquery_functions.js"></script>
</head>
笔记:
- 通过 ( " : b u t t o n " ) 可以选取所有 t y p e = " b u t t o n " 的 < i n p u t > 元素和 < b u t t o n > 元素,如果去掉冒号, (":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素,如果去掉冒号, (":button")可以选取所有type="button"的<input>元素和<button>元素,如果去掉冒号,(“button”)只能获取 元素。
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个(first 或者 last)
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶(odd 或者 even)
$("div p:eq(2)") 索引选择器 div下的第三个p元素(索引是从0开始)
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") // 内容过滤选择器,包含text内容的p元素
$(":emtyp") //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素
jQuery 事件
页面对不同访问者的响应叫做事件
jQuery 效果- 隐藏和显示
实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程([runoob.com](http://runoob.com/))</title>
<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>
效果:依次点击p标签内容,标签内容消失
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
</script>
<script>
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>李白</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>李白<br>
千金散尽还复来</p>
</div>
<h3>杜甫</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>杜甫<br>
无边落木萧萧下,不尽长江滚滚来</p>
</div>
</body>
</html>
隐藏与显示 hide() 与 show()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮,我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
注:对于可选的 callback 参数,有以下两点说明:
1.$(selector)选中的元素的个数为n个,则callback函数会执行n次;
2.callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行;
3.callback既可以是函数名,也可以是匿名函数;
实例一:
<head>
<meta charset="utf-8">
<script src="[https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js](https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js)">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
</script>
</head>
<body>
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
</body>
</html>
注:jQuery中自定义动画
linear:每一步的距离和前一步都是相同的,也就是等速
swing:速度会加快然后最后一点距离再减速
jQuery toggle()
toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:
实例:
$("button").click(function(){ $("p").toggle();
});