当前位置: 首页 > 工具软件 > jQuery-typing > 使用案例 >

python jQuery

时向文
2023-12-01

一.简介

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 事件:

鼠标事件 
clickclick() 方法是当按钮点击事件被触发时会调用一个函数。
dblclick当双击元素时,会发生 dblclick 事件。
mouseenter当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseleave当鼠标指针离开元素时,会发生 mouseleave 事件。
mousedown当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mouseup当在元素上松开鼠标按钮时,会发生 mouseup 事件。
键盘事件表单事件文档/窗口事件
keypresssubmitload
keydownchangeresize
keyupfocusscroll
 blurunload

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

 

 

 

 

 

 类似资料:

相关阅读

相关文章

相关问答