JQuery笔记

最新推荐文章于 2024-01-20 21:49:50 发布

千里取人头

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/m0_47765720/article/details/111742104

版权

1. jQuery是什么?

jQuery是一个快速，小巧，功能丰富的JavaScript库。
jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。

2. Jquery的使用

2.1 入门指南

首先需要jQuery库的支持，下载jQuery库包。
当你开始使用jQuery时，首先我们需要使用脚本标签将其添加到我们的HTML文档的标题。及引入html页面，下面为CDN库方式引入。如：

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

进入jQuery入口函数
使用 document(文档) 对象的 ready 事件：

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

等同于：

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

2.2 jQuery入口函数特点

jQuery入口函数：

$(function(){
    //这里是代码内容
});

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

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

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

2.3 语法

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

基本语法是：$("selector").action()
"$",美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

2.4 jQuery选择器

选择器允许您对元素组或单个元素进行操作.
jQuery选择器以美元符号和圆括号开头:$()。

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

3. 属性和内容

3.1 方法

3.1.1 attr() 方法

我们可以通过jQuery轻松的操作分配给HTML元素的属性。

注意：
prop()获取的选中属性值为布尔类型。
prop()不能获取自定义属性的值。
而attr()只能访问选中属性的初始值，无法获取选中属性(checked,selected)变化以后的值。

比如元素的 href,src,id,class,style 属性。
attr()方法用于获取属性的值。
返回属性的值：$(selector).attr(attribute)attribute：规定要获取其值的属性。注意，attr中选择的是属性。

attr() 方法还用于设置属性值，则为匹配元素设置一个或多个属性/值对
设置属性和值：$(selector).attr(attribute,value)

3.1.2 删除属性

removeAttr() 方法从被选元素移除一个或多个属性
如需移除若干个属性，请使用空格分隔属性名称。

3.1.1 获取内容

有几种方法可以通过jQuery操作HTML元素的内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

区别：
html() 方法用于获取所选元素的内容 (inner HTML)，包括HTML标记。
如果该方法未设置参数，则返回被选元素的当前内容。
当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
请注意，HTML标签也被返回。
text()方法返回的只是内容属性值。
如果你只需要文本内容，不需要HTML标签，可以使用 text() 方法
html() 和 text() 方法可以用于包含内容的所有HTML元素。

总结：
以下jQuery方法可用于获取和设置所选HTML元素的内容和属性：

text() 设置或返回的是标签中包含的仅仅是文本值，并不包含标签内的任何元素。text()方法不能使用在表单元素上
html() 设置或返回的是标签中的内部的一切，包括文本。html()方法使用在多个元素上时，只读取第一个元素。
val() 设置或返回的仅仅是标签中的value属性的值。val()只能使用在表单元素上
attr() 设置或返回标签中任意属性的值。
removeAttr() 删除指定的属性。

4.文档对象模型DOM

DOM将html文档视为由元素、属性和文本组成的一棵DOM树。

可以将html文档中的每个成分视为一个节点,节点的特点如下：

整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每个HTML属性是一个属性节点
注释属于注释节点
HTML文档中的节点彼此间都存在关系，如一张族谱。
DOM表示文档作为树结构，其中HTML元素是树中的相关节点。

4.1 DOM遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
jQuery 提供了多种遍历 DOM 的方法，最常用的遍历方法如下：

向上遍历 DOM 树：
parent()方法返回被选元素的直接父元素。
parents()方法返回被选元素的所有祖先元素。

向下遍历 DOM 树
children()方法返回被选元素的所有直接子元素。
find()方法返回被选元素的后代元素

DOM 树进行水平遍历：
siblings()方法返回被选元素的所有同胞元素。
next()方法返回被选元素的下一个同胞元素。
nextAll()方法返回被选元素的下面的所有同胞元素。
prev()方法返回被选元素的上一个同胞元素
prevAll()方法返回被选元素的上面的所有同胞元素。

删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素。

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

5.事件

5.1.1事件处理

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
jQuery是事件处理的核心函数，当用户执行操作时，会发生事件，当目标元素发生事件时，执行处理函数。
注意：js的点击事件是onclick,而jQuery的点击事件是click.

千里取人头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JQuery笔记

1. jQuery是什么?jQuery是一个快速，小巧，功能丰富的JavaScript库。jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。2. Jquery的使用2.1 入门指南首先需要jQuery库的支持，下载jQuery库包。当你开始使用jQuery时，首先我们需要使用脚本标签将其添加到我们的HTML文档的标题。及引入html页面，下面为CDN库方式引入。如：<head><script src="https://aj
复制链接

扫一扫