python jQuery

最新推荐文章于 2023-08-25 08:00:47 发布

sixgod_0807

最新推荐文章于 2023-08-25 08:00:47 发布

阅读量1.7k

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/weixin_39318540/article/details/81095665

版权

python 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

一.简介

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”类，字体会变成红色。

sixgod_0807

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
python jQuery

一.简介jquery是JavaScript做的一个封装和扩展jQuery是一个开源的函数库，高度封装了DOM操作、事件、动画、AJAX、工具函数等功能，而且每一个API的底层实现都实现了不同浏览器之间的兼容性，让你专心编写逻辑代码，而不要浪费时间在处理兼容性的问题上。总而言之，jQuery的目标就是让开发者写得更少，做得更多！jquery的cdn节点：http://www.bootcd...
复制链接

扫一扫