python jQuery
一.简介
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”类，字体会变成红色。