jQuery框架基础个人学习笔记

零、简介

jQuery 是一个流行的 JavaScript 库，用于简化客户端脚本编写和 DOM 操作。它提供了许多实用的功能和方法，使得在网页中使用 JavaScript 更加便捷和高效，同时理解Web的底层DOM原理。

一、基础加载

在使用 jQuery 时，通常需要先引入 jQuery 库，而引入的方式一般是通过 <script> 标签将其加载到页面中。

二、文档就绪事件

文档就绪事件是一种事件触发机制，它表示整个 HTML 文档的 DOM（文档对象模型）结构已经完全加载并解析完毕，可以安全地对页面上的元素进行访问和操作。当文档达到就绪状态时，与之关联的特定代码块（通常是一个回调函数）就会被执行。当浏览器开始加载网页时，会逐步解析 HTML 代码并构建 DOM 树。在这个过程中，浏览器会不断地将解析到的元素添加到 DOM 树中。当整个 HTML 文档解析完成，DOM 树构建完毕后，浏览器会触发文档就绪事件。开发者可以通过监听这个事件，在事件触发时执行自己的代码。

在 jQuery 中，通常使用 $(document).ready() 方法或其简写形式 $(function(){}) 来监听文档就绪事件，即：

<script>
    $(document).ready(function() {
        // 文档加载完成后要执行的代码
    });
</script>

三、选择元素

所有的 jQuery 函数都以 $ 开头,通常选取并操作带有选择器的 HTML 标签：

元素选择器：

$('elementName');

类选择器：

$('.className');

ID选择器：

$('#idName');

子元素伪类选择器：

$( "selector:nth-child(n)" );

n可以是数字、关键字或公式

四、方法

①addClass

addClass() 方法用来给标签添加类。

$(selector).addClass(className);

②removeClass

同样地，removeClass()方法可以移去类名。

$(selector).removeClass(className);

③css

css() 方法是一个非常实用的工具，它主要用于获取或设置元素的 CSS 样式属性。

$(selector).css(propertyName);

④prop

prop() 方法主要用于获取或设置匹配元素的属性值。

$(selector).prop(propertyName);//获取属性值

$(selector).prop({
    propertyName1: value1,
    propertyName2: value2,
    // 可以继续添加更多的属性和值
});//设置属性和属性值

⑤html

html() 方法是一个很实用的工具，它既可以用来获取元素的 HTML 内容，也能设置元素的 HTML 内容。

$(selector).html();//获取 HTML 内容
$(selector).html(content);//设置 HTML 内容

⑥text

text() 方法用于获取或设置匹配元素的文本内容。与 html() 方法不同，text() 只处理文本，会忽略元素中的 HTML 标签，将其作为普通文本对待。

$(selector).text();//获取文本内容
$(selector).text(content);//设置文本内容

 

⑦remove

remove() 方法用于从 DOM中移除匹配的元素及其所有子元素。

$(selector).remove([filter]);

filter（可选）：这是一个可选的选择器表达式，用于进一步筛选要移除的元素。只有同时满足 selector 和 filter 条件的元素才会被移除。

⑧appendTo

appendTo() 方法用于将匹配的元素插入到目标元素的内部，作为目标元素的最后一个子元素。

$(element).appendTo(target);

 

⑨clone

clone() 方法用于创建匹配元素的副本。这在需要复制元素并将其插入到页面其他位置时非常有用。

$(selector).clone([withDataAndEvents], [deepWithDataAndEvents]);

withDataAndEvents（可选）：一个布尔值，默认为 false。如果设置为 true，则会复制元素的数据和绑定的事件处理程序；如果为 false，则只复制元素本身，不复制数据和事件。
deepWithDataAndEvents（可选）：一个布尔值，默认为 withDataAndEvents 的值。如果设置为 true，不仅会复制当前元素的数据和事件，还会递归复制其所有子元素的数据和事件；如果为 false，则只复制当前元素，不处理子元素的数据和事件。

⑩parent

每个 HTML 标签都默认继承其 parent（父标签）的 CSS 属性。而parent() 方法用于获取匹配元素集合中每个元素的直接父元素，返回一个包含这些父元素的新 jQuery 对象。

$(selector).parent([filter]);

filter（可选）：这是一个可选的选择器表达式，用于进一步筛选返回的父元素。只有满足 filter 条件的父元素才会被包含在返回的 jQuery 对象中。

⑪children

children() 方法是用来获取匹配元素集合中每个元素的直接子元素，它会返回一个包含这些子元素的新 jQuery 对象。

$(selector).children([filter]);

filter（可选）：这是一个可选的选择器表达式，用于进一步筛选返回的子元素。只有满足 filter 条件的子元素才会被包含在返回的 jQuery 对象中。