1. jQuery是什么？
jQuery 是一个 JavaScript 库。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
向页面添加 jQuery库
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
注意：要写在 head 标签中间
2.jQuery语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
3.jQuery 选择器
| 语法 | 描述 |
|---|---|
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
|
|
所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
4.jQuery 事件
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
jQuery HTML
5.jQuery - 获得内容和属性
获得内容
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
实例：
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
alert("Text:" + $("#test").text());
});
$("#btn2").click(function () {
alert("HTML:" + $("#test").html());
});
$("button").click(function () {
alert("value:" + $("#test1").val());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>姓名：
<input type="text" id="test1" value="米老鼠">
</p>
<button>显示值</button>
</body>
获取属性 - attr()
实例：
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
alert( $("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p> <a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>
6.jQuery - 设置内容和属性
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#test1").text("hello world!")
});
$("#btn2").click(function () {
$("#test2").html("<p>hello world!</p>")
});
$("#btn3").click(function () {
$("#test3").val("hello world!")
});
});
</script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field:
<input type="text" id="test3" value="Mickey Mouse">
</p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
text()、html() 以及 val() 的回调函数
text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#test1").text(function(i, origText){
return "old text:"+ origText+"new text:hello world!(index: " + i + ")";
});
});
$("#btn2").click(function () {
$("#test2").html(function (i, origText) {
return "old html:" + origText + "new html:hello <b>world!</b>(index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">这是
<b>粗体</b>文本。</p>
<p id="test2">这是另一段
<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>
设置属性 - attr()
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#w3s").attr("href", "http://www.w3school.com.cn/jquery");
});
});
</script>
</head>
<body>
<p>
<a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a>
</p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
attr() 也可以同时设置多个属性
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
7.jQuery - 添加元素
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$("p").append("Some appended text.");
8.jQuery - 删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
$("#div1").remove();
9.jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
10.jQuery - css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
$("p").css("background-color");
11.jQuery - 尺寸
jQuery 提供多个处理尺寸的重要方法：
- width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth() 方法返回元素的宽度（包括内边距）。
- innerHeight() 方法返回元素的高度（包括内边距）。
- outerWidth() 方法返回元素的宽度（包括内边距和边框）。
- outerHeight() 方法返回元素的高度（包括内边距和边框）。
指定 div 的宽度和高度
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery 遍历
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
图片.png
- <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞（拥有相同的父元素）。
- 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
- <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
1.jQuery 遍历 - 祖先
- parent() 方法返回被选元素的直接父元素。
- parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
$("span").parentsUntil("div");
});
2.jQuery 遍历 - 后代
- children() 方法返回被选元素的所有直接子元素。
- find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
返回div的所有后代
$(document).ready(function(){
$("div").find("*");
});
3.jQuery 遍历 - 同胞
- siblings() 方法返回被选元素的所有同胞元素。
- next() 方法返回被选元素的下一个同胞元素。
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()
- prevAll()
- prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已
4.jQuery 遍历 - 过滤
- first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first();
});
- last() 方法返回被选元素的最后一个元素。
- eq() 方法返回被选元素中带有指定索引号的元素。
$(document).ready(function(){
$("p").eq(1);
});
- filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(document).ready(function(){
$("p").filter(".intro");
});
- not() 方法返回不匹配标准的所有元素。
5.jQery 动画
’jQuery animate()方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback)
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
原图：
image.png
点击开始动画后：
image.png
网友评论