首页 前端知识 web基础05-jQuery

web基础05-jQuery

2024-06-10 23:06:36 前端知识 前端哥 518 783 我要收藏

目录

一、jQuery

1.概述

2.原生js与jQuery对比

3.特点

4.使用

(1)入口函数

(2)语法

(3)jQuery选择器

5.方法

(1)获取属性值:

(2)删除属性

(3)操作HTML元素及其内容

(4)操作CSS

(5)尺寸方法

6.DOM操作

(1)DOM遍历

(2)删除元素

7.事件处理

(1)常见事件

(2)on()方法绑定事件

(3)off()解除事件绑定

8.事件对象

9.显示/隐藏

10.淡入/淡出

11.上/下滑动

12.动画

(1)多个属性动画

(2)中止动画

(3)动画队列

(4)动画的callback回调

13.练习

(1)创建待办事项清单列表

(2)下拉式菜单


一、jQuery

1.概述

jQuery是一个快速,小巧,功能丰富的JavaScript库。

jQuery 使HTML文档遍历和操作,事件处理和动画等操作变得更加简单。

jQuery的所有功能都是通过JavaScript访问的,因此掌握JavaScript对于理解,构建和调试代码至关重要。

2.原生js与jQuery对比

var el = document.getElementById("start");
el.innerHTML = "出发吧,骚年!";
$("#start").html("出发吧,骚年!");

jQuery的另一个巨大优势是您不必担心浏览器支持,您的代码将在所有主流浏览器中运行完全相同,包括Internet Explorer 6!

3.特点

  • 轻量级

  • 强大的选择器

  • 出色的DOM操作的封装

  • 可靠的事件处理机制

  • 完善的Ajax

  • 不污染顶级变量

  • 出色的浏览器兼容性

  • 链式操作方式

  • 隐式迭代

  • 行为层与结构层的分离

  • 丰富的插件支持

  • 完善的文档

  • 开源

4.使用

可以从www.jquery.com下载jQuery库的副本,之后本地引用,或者从CDN (内容分发网络)(如BootCDN或百度CDN)中引用。

jQuery通过CDN在线引用地址(各个版本都有):jquery (v3.7.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

(1)入口函数

在使用HTML文档之前等待HTML文档的DOM节点准备就绪后执行是一种很好的做法。为此,我们使用 document(文档) 对象的 ready 事件:

$(document).ready(function() {
    // 在这写 jQuery 代码
    //类似于原生js的window.onload
});

$ 用于访问jQuery。 从这里开始,代码访问document对象,并定义了当 document 的 ready 事件触发时要调用的函数。 这样可以防止任何jQuery代码在文档加载完成之前运行。

我们有一个方便的快捷方式, 等价于上面的代码:

$(function() {
   // 在这写 jQuery 代码
});

意思是:一旦dom结构渲染完毕即可执行内部代码。

jQuery入口函数与window.onload的区别:

执行时机不同: Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。 jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

(2)语法

jQuery用于选择(查找)HTML元素并对选取的元素执行某些"操作"(actions)。

$("selector").action()
  • "$",美元符号定义 jQuery

  • 选择符(selector)"查询"和"查找" HTML 元素

  • jQuery 的 action() 执行对元素的操作

$("p").hide()  // 隐藏所有<p>元素
$(".demo").hide()  // 隐藏所有 class="demo" 元素
$("#demo").hide()  // 隐藏 id="demo" 的元素

(3)jQuery选择器

选择器允许您对元素组或单个元素进行操作。

$("div")  // 选择所有<div>元素
$("#test") // 选择id="test"的元素
$(".menu") //选择class="menu"的所有元素

jQuery 通过选择器允许您对 DOM 元素组或单个 DOM 节点进行操作,如下:

$("div.menu")  // 选取所有 class="meue" 的 <div> 元素。
$("p:first")  // 第一个<p>元素
$("h1, p") // 所有<h1>和所有<p>元素
$("div p") // 所有<div>元素后代的<p>元素
$("*")  // DOM的所有元素
$("ul li:first")  //选取第一个 <ul> 元素的第一个 <li> 元素

5.方法

(1)获取属性值

attr()用于获取属性的值。

//attribute:规定要获取其值的属性。
返回属性的值:$(selector).attr(attribute)

attr() 方法还用于设置属性值,则为匹配元素设置一个或多个属性/值对。

设置属性

$(selector).attr(attribute,value)
  • attribute:规定属性的名称。

  • value:规定属性的值。

(2)删除属性

removeAttr() 从HTML元素中删除属性。

//attribute:必需。规定要移除的一个或多个属性。如需移除若干个属性,请使用空格分隔属性名称。
$(selector).removeAttr(attribute)

(3)操作HTML元素及其内容
  • text()- 设置或返回所选元素的文本内容

$(selector).text()
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)

$(selector).html()
  • val()- 设置或返回表单字段的值

html()text() 方法可以用于包含内容的所有HTML元素。

亦可以使用 html()text() 方法来更改HTML元素的内容

 $("#test").text("hello!");

注意:

如果你设置的内容包含HTML标记,则应使用 html() 方法而不是 text()。

html()方法用于获取所选元素内容 (inner HTML),包括HTML标记

如果该方法未设置参数,则返回被选元素的当前内容

当使用该方法返回一个值时,它会返回第一个匹配元素的内容

val()方法允许获取设置表单字段:例如: 文本框(input),下拉列表(select) 等。

元素的值是通过 value 属性设置的。 如果该方法未设置参数,则返回被选元素当前值

类似地,你可以在val()方法传入参数来设置该字段的值。

添加新内容而不删除现有内容的方法:

  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before()- 在被选元素之前插入内容

img

以上方法还可以用于添加新创建的元素

$(function() {
    //创建一个新的<p>元素,其中包含文本Hi,并将其分配给一个名为txt的变量。
  var txt = $("<p></p>").text("Hi");
    //在#demo段落之后插入新创建的<p>元素。
  $("#demo").after(txt);
});

可以通过使用逗号分隔来指定多个元素作为 before(),after(),append(),prepend()方法的参数

(4)操作CSS

添加CSS:

addClass() 方法为选定的元素添加一个或多个类

$(selector).addClass(classname1 classname2...)

该方法不会移除已存在的 class 属性,仅仅添加一个或多个类名到 class 属性。

删除CSS

removeClass() 方法从被选元素移除一个或多个类。

如果没有规定参数,则该方法将从被选元素中删除所有类

使用方式同添加

切换CSS

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换

该方法检查每个元素中指定

如果不存在添加类,如果已设置删除之。这就是所谓的切换效果

$(selector).toggleClass(classname)

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<style>
.red { 
  color:red; 
  font-weight: bold;
}
</style>
</head>
​
<body>
<p>一些文本</p>
<button>切换类</button>
<script>
$(function() {
  $("button").click(function() {
    $("p").toggleClass("red");
  });
});
</script>
​
</body>
</html>

CSS()方法

html() 方法类似,可以使用 css() 方法来获取设置被选元素的一个多个样式属性

该方法返回第一个匹配元素的指定 CSS 属性值。

//设置 CSS 属性和值
//property :    规定 CSS 属性名称,比如 "color"、"font-weight" 等等。
//value:        规定 CSS 属性的值,比如 "red"、"bold" 等等。
$(selector).css(property,value)

css() 方法可以使用JSON语法设置多个CSS属性。

css({"property":"value","property":"value",...});
$("p").css({"color": "red", "font-size": "200%"});

键名可以使用驼峰命名

(5)尺寸方法

jQuery 提供多个处理尺寸的重要方法:

  • width()方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

  • height()方法设置或返回元素的高度(不包括内边距、边框或外边距)。

  • innerWidth()方法返回元素的宽度(包括内边距)。

  • innerHeight()方法返回元素的高度(包括内边距)。

  • outerWidth()方法返回元素的宽度(包括内边距和边框)。

  • outerHeight()方法返回元素的高度(包括内边距和边框)。

jq58

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<style>
div {
  width: 300px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 3px solid blue;
  background-color: red;
  color: white;
}
</style>
</head>
​
<body>
<div></div>
<script>
$(function() {
  var txt = "";
  txt += "width: " + $("div").width() + " ";
  txt += "height: " + $("div").height() + "<br/>";
  txt += "innerWidth: " + $("div").innerWidth() + "  ";
  txt += "innerHeight: " + $("div").innerHeight() + "<br/>";
  txt += "outerWidth: " + $("div").outerWidth() + "  ";
  txt += "outerHeight: " + $("div").outerHeight();
    
  $("div").html(txt);
});
</script>
​
</body>
</html>

6.DOM操作

(1)DOM遍历

jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

jq68

图示解析:

  • < div> 元素是 < ul> 的父元素,同时是其中所有内容的祖先。

  • < ul> 元素是 < li> 元素的父元素,同时是 < div> 的子元素

  • 左边的 < li> 元素是 < span> 的父元素,< ul> 的子元素,同时是 < div> 的后代。

  • < span> 元素是 < li> 的子元素,同时是 < ul> 和 < div> 的后代。

  • 两个 < li> 元素是同胞(拥有相同的父元素)。

  • 右边的 < li> 元素是 < b> 的父元素,< ul> 的子元素,同时是 < div> 的后代。

  • < b> 元素是右边的 < li> 的子元素,同时是 < ul> 和 < div> 的后代。

最常用的遍历方法如下:

向上遍历 DOM 树:

  • parent()方法返回被选元素的直接父元素

  • parents()方法返回被选元素的所有祖先元素

向下遍历 DOM 树

  • children()方法返回被选元素的所有直接子元素。

  • find()方法返回被选元素的后代元素

DOM 树进行水平遍历

  • siblings()方法返回被选元素的所有同胞元素。

  • next()方法返回被选元素的下一个同胞元素。

  • nextAll()方法返回被选元素的下面的所有同胞元素。

  • prev()方法返回被选元素的上一个同胞元素

  • prevAll()方法返回被选元素的上面的所有同胞元素。

//返回属于<div>后代的所有<span>元素
$("div").find("span")

eq()方法:

eq() 方法返回被选元素中带有指定索引号的元素。

//选择第三个div元素
$("div").eq(2);

索引号从0开始,所以第一个元素的索引号为0。

(2)删除元素
  • remove() - 删除被选元素(及其子元素)

  • empty() - 从被选元素中删除子元素

remove() 方法也可接受一个参数,允许您对被删元素进行过滤

还可以在多个选定元素上使用remove()方法,例如$("p").remove()将删除所有段落。

7.事件处理

js原生

var x = document.getElementById("demo");
x.onclick = function () {
  document.body.innerHTML = Date();
}

jQuery:

$("#demo").click(function() {
  $("body").html(Date());
});

(1)常见事件

鼠标事件:

  • click:单击时发生。

  • dblclick:双击元素时触发。

  • mouseenter:当鼠标指针进入所选元素时触发。

  • mouseleave:鼠标指针离开所选元素时触发。

  • mouseover:当鼠标指针在所选元素上方悬停时触发。

键盘事件:

  • keydown:当按下键盘按键时会触发。

  • keyup:当键盘按键被释放时会触发。

  • keypress:当按钮按下并抬起同一个按键。

表单事件:

  • submit:提交表单时触发。

  • change:当表单元素的值发生改变时触发。

  • focus:当表单元素获得焦点时触发。

  • blur:当表单元素失去焦点时触发。

文件事件:

  • ready:当DOM加载完成以后触发。

  • resize:当浏览器窗口大小改变时触发。

  • scroll:当用户在指定的元素中滚动滚动条时触发。

(2)on()方法绑定事件

on() 方法在被选元素及子元素上添加一个或多个事件处理程序

//事件名称作为第一个参数传递给on()方法。 第二个参数是处理函数。
$("p").on("click", function() {
  alert("触发了p段落的点击事件");
});

on()方法用于将相同的处理函数绑定到多个事件中的时候很有用。 你可以使用空格分隔多个事件名称, 例如 你可以为点击和dblclick事件使用相同的事件处理程序。

(3)off()解除事件绑定

off()方法来删除事件处理程序

off() 方法通常用于移除通过 on() 方法添加的事件处理程序

$("div").on("click", function() { 
  alert('Hi there!'); 
}); 
$("div").off("click");

如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。

8.事件对象

jQuery事件对象,下面使用event代替:

每个事件处理函数都可以接收一个事件对象,其中包含与该事件相关的属性和方法

  • event.type:获取事件的类型

  • event.pageXevent.pageY:获取鼠标当前相对于页面的坐标(X和Y坐标)

  • event.preventDefault()方法: 阻止默认行为

  • event.stopPropagation()方法: 阻止事件冒泡。

  • event.which: 获取在鼠标单击时,单击的是鼠标的哪个键

  • event.data 数据绑定事件时传入的任何数据。

  • event.currentTarget: 在事件冒泡过程中的当前DOM元素

  • event.result: 包含由被指定事件触发的事件处理器返回的最后一个值。

//处理<a>元素上的click事件,并阻止打开href属性中提供的链接
$("a").click(function(event) {
  alert(event.pageX);
  event.preventDefault();
});

还可以使用trigger()方法以编程方式触发事件。

trigger() 方法触发被选元素指定事件类型。

$("div").click(function() {
   alert("点击了div!");
});
$("div").trigger("click");

注意:

trigger()方法不能用来模仿本机浏览器事件,比如点击一个文件文本框。 只能处理jQuery事件系统中的事件。

9.显示/隐藏

通过 jQuery,可以使用 hide()show() 方法来隐藏显示 HTML 元素,toggle()方法用于在隐藏和显示元素之间切换

hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。

hide / show / toggle 方法还有第二个可选参数可选,这是一个在动画完成后执行回调的方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
​
</head>
​
<body>
<p>点击我能切换显示div中的内容哟!</p>
<div>我是div中的内容</div>
<script>
$(function() {
  $("p").click(function() {
    $("div").toggle(500);
  });
});
</script>
​
</body>
</html>

10.淡入/淡出

与 hide / show 方法类似,jQuery提供了 fadeIn / fadeOut 方法,它将一个元素淡入和淡出显示。

和 toggle() 方法在隐藏和显示之间切换一样,fadeToggle()方法可以在淡入淡出中进行切换

toggle()一样,fadeToggle()也具有两个可选参数:速度和回调函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
​
</head>
​
<body>
<p>点击我能淡入淡出显示div中的内容哟!</p>
<div>我是div中的内容</div>
<script>
$(function() {
  $("p").click(function() {
    $("div").fadeToggle(1000);
  });
});
</script>
​
</body>
</html>

用于淡入/淡出的另一种方法是fadeTo(),它将淡入/淡出到给定的不透明度(0和1之间的值)。 例如:$("div").fadeTo(1500,0.7);

11.上/下滑动

slideUp()slideDown() 方法用于在元素上创建滑动效果。

再次,类似于以前的切换方法,slideToggle() 方法提供在滑动效果之间切换,一样也有两个可选参数:速度回调函数

$(function() {
  $("p").click(function() {
    $("div").slideToggle(500);
  });
});

12.动画

jQuery animate() 方法用于创建自定义动画

//params--必需,定义形成动画的 CSS 属性。属性定义为JSON格式的参数("key":"value")
//speed--规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
//callback --动画完成后所执行的函数名称
$(selector).animate({params},speed,callback);
$("div").click(function() {
  $("div").animate({width: '250px'}, 1000);
});

要在动画完成之前停止动画,jQuery提供了stop()方法

注意:

请注意提供CSS参数的JSON格式。 在处理CSS属性时,JSON语法也被用于以前的模块。

你可以使用上述语法对任何CSS属性进行动画处理,但有一个重要的事情要记住:当与animate() 方法一起使用时,所有属性名称都必须是camel-cased(camelCase是写复合词或短语的做法, 每个单词或缩写以大写字母开头,第一个单词以小写形式显示)。 您将需要编写paddingLeft而不是padding-left,marginRight,而不是margin-right等等。

(1)多个属性动画

多个属性可以通过用逗号分隔来同时动画化。

$("div").animate({
  width: '250px',
  height: '250px'
}, 1000);

也可以定义相对值(该值相对于元素的当前值)。 通过将 += 或 -= 放在值的前面完成:

$("div").animate({
  width: '+=250px',
  height: '+=250px'
}, 1000);

(2)中止动画

jQuery stop() 方法用于在动画效果完成前对它们进行停止。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

//stopAll 可选,规定是否应该清除动画队列。默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//goToEnd --规定是否立即完成当前动画。默认是 false。
$(selector).stop(stopAll,goToEnd);

默认地,stop() 会清除在被选元素上指定的当前动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
​
        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div>
</body>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#flip").click(function () {
            $("#panel").slideDown(5000);
        });
        $("#stop").click(function () {
            $("#panel").stop();
        });
    });
</script>
</html>
​
​

(3)动画队列

默认情况下,jQuery带有动画队列功能。

这意味着如果你写了多个animate(),则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。

var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});

操纵元素位置,你需要将元素的CSS位置属性设置为 relative,fixedabsolute

animate() 方法,就像 hide / show / fade / slide 方法一样,可以使用可选的回调函数作为其参数,该参数在当前效果完成后执行。

(4)动画的callback回调

Callback 函数在当前动画 100% 完成之后执行。

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。

13.练习

(1)创建待办事项清单列表

“待办事项”列表可以将新项目添加到列表中,也可以删除现有项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的To-Do列表</h1>
    <input type="text" placeholder="新项目"/>
    <button id="add">添加</button>
    <ol id="mylist"></ol>
</body>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $(function() {
        $("#add").on("click", function() {
            var val = $("input").val();
            if(val !== '') {
                var elem = $("<li></li>").text(val);
                $(elem).append("<button class='rem'>X</button>");
                $("#mylist").append(elem);
                $("input").val("");
                $(".rem").on("click", function() {
                    $(this).parent().remove();
                });
            }
        });
    });
</script>
</html>

(2)下拉式菜单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #submenu {
      display: none;
    }
  </style>
</head>
<body>
<div class="menu">
    <div id="item">下拉菜单</div>
    <div id="submenu" >
        <a href="#">选项1</a>
        <a href="#">选项2</a>
        <a href="#">选项3</a>
    </div>
</div>
</body>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    $("#item").click(function () {
        $("#submenu").slideToggle(500);
    });
</script>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11825.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!