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 元素选择器基于元素名选取元素。

在页面中选取所有 元素:

实例：

用户点击按钮后，所有 元素都隐藏：

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>

运行之后，点击隐藏按钮，可以看到元素被隐藏了。

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 元素时执行。

在下面的实例中，当点击事件在某个 元素上触发时，隐藏当前的 元素：

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>

当点击红色按钮时，标签会添加“red”类，字体会变成红色。

python jQuery相关推荐

python+jQuery 实现图片颜色比重分析
python+jQuery 实现颜色比重分析 1.使用到的python库 time webbrowser cv2 collections 2.创作思路:利用cv2库中的方法逐行扫描图片的每一个像素点, ...
Python jquery标签云
很多知名博主都喜欢弄个标签云.今天特地看了下源码.把标签云的方法单独扣了出来.这里做一下记录 html页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
doraemon的python jquery
### 11.9 iquery iquery介绍:jQuery是一个快速.小巧功能丰富的JavaScript库,它通过易于使用的API在大量浏览器中运行,是的HTML文档便利和操作,事件处理,动画和A ...
python flask框架详解
Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档, 英文不好的同学也可以参考中文文档 1.安装flask pi ...
linux安装12c oem,OEM12C(12.1.0.5)安装插件监控mysql(linux)
目录结构: 环境说明: oms:12.1.0.5 os:centos 6.X MYSQL: 5.7.21 OS:centos 7.X 一.安装插件mysql database 下载地址: http ...
tornado学习笔记day06-应用安全
应用安全 cookie 普通cookie 一般我们的用户表中都有啥呢你在购物的时候,加入购物车,让你登录,那你登录之后,他怎么知道你登录了呢 token 这个值是随机的,存在cookie里面设置 ...
免费学习编程-值得收藏
免费学习编程 Code.org是美国非营利组织在一些科技大佬的鼎立支持下正计划将高品质计算机科学课程带进学校 1. MIT 开放式课程 MIT 提供免费的课程内容浏览服务,只要你有时间,随时可以进入. ...
mac电脑显示隐藏文件方法
永久去掉隐藏命令chflags nohidden 空格把文件拖进来回车一次只能一个文件 OK 添加隐藏命令chflags hidden 空格文件拖进来回车一次一个OK 输入显示Mac隐藏文件的 ...
android studio gradle 添加jar,android studio学习----通过gradle来导入jar包
转载地址:http://www.th7.cn/Program/Android/201507/495477.shtml File->Project Structure 可以打开下面的图: 1.通过 ...
如何使用JS的排序函数sort()
Array对象中的sort()方法是一个很高效的排序方法,用于对数组进行排序.其基本用法有两种: 1.不带参数数组名.sort(); 这种用法只适用于对英文字符串组成的数组按升序排序,结果在原数组中 ...

python jQuery

一.简介

使用：

二.jQuery 选择器

1.元素选择器

2.#id 选择器

3..class 选择器

更多实例

三.jQuery 事件

1.什么是事件？

2.jQuery 事件方法语法

3.常用的 jQuery 事件方法

$(document).ready()

click()

dblclick()

mouseenter()

四.jQuery - 获取内容和属性

获得内容 - text()、html() 以及 val()

1.通过 jQuery text() 和 html() 方法来获得内容：

2.通过 jQuery val() 方法获得输入字段的值：

获取属性 - attr()

五.jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

jQuery addClass() 方法

python jQuery相关推荐

最新文章

热门文章