一.简介
jquery是JavaScript做的一个封装和扩展
jQuery是一个开源的函数库,高度封装了DOM操作、事件、动画、AJAX、工具函数等功能,而且每一个API的底层实现都实现了不同浏览器之间的兼容性,让你专心编写逻辑代码,而不要浪费时间在处理兼容性的问题上。总而言之,jQuery的目标就是让开发者写得更少,做得更多!
jquery的cdn节点:http://www.bootcdn.cn/jquery/去这个网站查找
boostrap提供的:
http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js
jquery语法:
基础语法: $(selector).action()
文档就绪事件:
您也许已经注意到所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
如果在文档没有完全加载之前就运行函数,操作可能失败。
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
使用:
先在HTML页面<head>标签中引用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/1.js"></script>
</head>
然后再js文件中编写内容。
$(document).ready(function(){
main();
});
function main() {
yincang();
}
function yincang() {
pass
}
二.jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
1.元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
实例:
用户点击按钮后,所有 <p> 元素都隐藏:
js文件中编写以下内容:
$(document).ready(function(){
main();
});
function main() {
yincang();
}
function yincang() {
$("button").click(function(){
$("p").hide();
});
}
HTML:
<body>
<h4>hello</h4>
<p>hello2</p>
<p id="test">hello3</p>
<button>隐藏</button>
</body>
运行之后,点击隐藏按钮,可以看到<p>元素被隐藏了。
2.#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
$("#test")
实例:
当用户点击按钮后,有 id="test" 属性的元素将被隐藏:
js文件':
$(document).ready(function(){
main();
});
function main() {
yincang();
}
function yincang() {
$("button").click(function(){
$("#test").hide();
});
}
html:
<body>
<h4>hello</h4>
<p>hello2</p>
<p id="test">hello3</p>
<button>隐藏</button>
</body>
点击按钮后“hello3”被隐藏。
3..class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")
实例:
用户点击按钮后所有带有 class="test" 属性的元素都隐藏:
js文件:
$(document).ready(function(){
main();
});
function main() {
yincang();
}
function yincang() {
$("button").click(function(){
$(".test").hide();
});
}
HTML:
<body>
<h4>hello</h4>
<p class="test">hello2</p>
<p>hello3</p>
<button>隐藏</button>
</body>
点击按钮后,“hello2”被隐藏。
更多实例
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 |
$("p:first") | 选取第一个 <p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
$("tr:even") | 选取偶数位置的 <tr> 元素 |
$("tr:odd") | 选取奇数位置的 <tr> 元素 |
三.jQuery 事件
1.什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件 | |
---|---|
click | click() 方法是当按钮点击事件被触发时会调用一个函数。 |
dblclick | 当双击元素时,会发生 dblclick 事件。 |
mouseenter | 当鼠标指针穿过元素时,会发生 mouseenter 事件。 |
mouseleave | 当鼠标指针离开元素时,会发生 mouseleave 事件。 |
mousedown | 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。 |
mouseup | 当在元素上松开鼠标按钮时,会发生 mouseup 事件。 |
键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|
keypress | submit | load |
keydown | change | resize |
keyup | focus | scroll |
blur | unload |
2.jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$("p").click(function(){
/ 动作触发后执行的代码!!
});
3.常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在上面已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:
js文件:
$(document).ready(function(){
main();
});
function main() {
yincang();
}
function yincang() {
$("p").click(function(){
$(this).hide(); //选取当前HTML元素,上面有提到
});
}
HTML:
<body>
<p>点我</p>
<p>再点我</p>
<p>接着点</p>
</body>
点击就会隐藏。
dblclick()
当双击元素时,会发生 dblclick 事件。
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:
js文件:
$(document).ready(function(){
main();
});
function main() {
mouseenter();
}
function mouseenter() {
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
}
HTML:
<body>
<p id="p1">鼠标指针进入此处,会看到弹窗。</p>
</body>
运行之后,当鼠标指针移动到字体上,会弹出窗口。
四.jQuery - 获取内容和属性
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
1.通过 jQuery text() 和 html() 方法来获得内容:
js文件:
$(document).ready(function(){
main();
});
function main() {
huoqv();
}
function huoqv() {
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
}
HTML:
<body>
<p id="test">弹出<b>此</b>内容</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button>
</body>
当点击按钮后,会分别弹出不同类型。
2.通过 jQuery val() 方法获得输入字段的值:
js文件:
$(document).ready(function(){
main();
});
function main() {
huoqv();
}
function huoqv() {
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
}
HTML:
<body>
<p> <input type="text" id="test" value="sixgod"></input></p>
<button id="btn1">显示文本</button>
</body>
点击按钮就会显示value的值。
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
js:
$(document).ready(function(){
main();
});
function main() {
huoqv();
}
function huoqv() {
$("button").click(function(){
alert($("#runoob").attr("href"));
});
}
HTML:
<body>
<p id="runoob" href="sixgod">滴滴</p>
<button>显示</button>
</body>
点击会获取“href”属性的值。
五.jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery addClass() 方法
实例:
向不同的元素添加 class 属性。也可以选取多个元素:
首先将css文件引入HTML中:在<head>标签中添加:
<link rel="stylesheet" href="css/1.css">
css文件:
.red{
color: red;
}
js:
function red() {
$("#red").click(function(){
$("p").addClass("red");
});
}
HTML:
<p>颜色</p>
<button id="red">红色</button>
当点击红色按钮时,<p>标签会添加“red”类,字体会变成红色。