jQuery笔记

i酷就好

于 2024-08-12 09:57:56 发布

阅读量263

点赞数 5

分类专栏： jquery 文章标签： jquery 笔记前端

本文链接：https://blog.csdn.net/family168/article/details/141123745

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery

初始加载

//$(document).ready(function() {})

选择器

基本选择器

ID 选择器：通过元素的 ID 选择元素。
```
$('#myId') // 选择 ID 为 'myId' 的元素
```

类选择器：通过元素的类名选择元素。

$('.myClass') // 选择所有 class 包含 'myClass' 的元素

标签选择器：通过 HTML 标签名选择元素。
```
$('p') // 选择所有的段落元素
```

属性选择器：通过元素的属性选择元素。

$('[data-attr="value"]') // 选择所有 data-attr 属性值为 'value' 的元素

组合选择器：结合使用多个选择器。

$('div.myClass#myId') // 选择 ID 为 'myId'，并且 class 包含 'myClass' 的 div 元素

层级选择器

后代选择器：选择指定元素的后代。

$('div p') // 选择所有在 div 元素内的段落元素

子元素选择器：选择指定元素的直接子元素。

$('ul > li') // 选择所有 ul 元素的直接 li 子元素

兄弟选择器：
- 相邻兄弟选择器：选择与指定元素相邻的兄弟元素。
```
$('a + span') // 选择所有紧接在 a 元素后的 span 元素
```
- 通用兄弟选择器：选择指定元素的所有兄弟元素。
```
$('h2 ~ p') // 选择所有 h2 元素之后的段落元素
```

过滤选择器

:first：选择匹配元素集合中的第一个元素。
```
$('li:first') // 选择第一个 li 元素
```
:last：选择匹配元素集合中的最后一个元素。
```
$('li:last') // 选择最后一个 li 元素
```

:even 和 :odd：选择匹配元素集合中的偶数或奇数位置的元素。

$('li:even') // 选择偶数位置的 li 元素
$('li:odd')  // 选择奇数位置的 li 元素

:gt(n) 和 :lt(n)：选择匹配元素集合中大于或小于指定索引的元素。

$('li:gt(2)') // 选择索引大于 2 的所有 li 元素
$('li:lt(3)') // 选择索引小于 3 的所有 li 元素

:contains(text)：选择包含指定文本的元素。

$('div:contains("Hello")') // 选择包含文本 "Hello" 的所有 div 元素

:has(selector)：选择包含指定选择器匹配的元素的元素。
```
$('div:has(p)') // 选择包含段落元素的所有 div 元素
```

伪类选择器

:visible：选择所有可见的元素。

$(':visible') // 选择所有可见的元素

:hidden：选择所有隐藏的元素。

$('.hidden') // 选择所有 class 为 'hidden' 的元素（通常这些元素是隐藏的）

:animated：选择所有正在执行动画的元素。

复制
$('.animated') // 选择所有正在执行动画的元素

操作

1. 创建节点

var $newElement = $('<div>Hello, World!</div>'); // 创建一个新的 div 元素及其内容

2. 设置属性

$newElement.attr('id', 'myId'); // 设置属性
$newElement.attr('id'); // 获取属性

$newElement.removeAttr('id');//删除属性

3. 添加类

$newElement.addClass('myClass'); // 给元素添加一个类

4. 移除类

$newElement.removeClass('myClass'); // 从元素移除一个类

5. 切换类

$newElement.toggleClass('myClass'); // 切换元素的类，如果有则移除，如果没有则添加

6. 插入节点

$('#parent').append($newElement); // 将 $newElement 追加到 ID 为 parent 的元素内部
$('#parent').prepend($newElement); // 将 $newElement 插入到 ID 为 parent 的元素内部的开头

$("#myElement").before("<p>新段落</p>"); // 在 myElement 元素之前添加一个新段落
$("#myElement").after("<p>新段落</p>"); // 在 myElement 元素之后添加一个新段落

$("#myElement").html("<p>新内容</p>"); // 替换 myElement 元素的内容

7. 包裹节点

$('.selected').wrap($newElement); 
// 将所有 class 为 selected 的元素包裹在 $newElement 中

8. 替换节点

$('#oldElement').replaceWith($newElement);
// 用 $newElement 替换 ID 为 oldElement 的元素

9. 删除节点

$('#elementToRemove').remove(); // 删除 ID 为 elementToRemove 的元素及其所有内容

$("#myElement").empty(); // 删除 myElement 元素内部的所有子节点

$("#myElement").detach(); // 从 DOM 中删除 myElement 元素，但保留其数据和事件

10. 复制节点

var $clone = $newElement.clone(true); // 复制 $newElement 及其所有事件处理器和数据

11. 获取和设置 HTML 内容

var htmlContent = $('#myElement').html(); // 获取元素的 HTML 内容
$('#myElement').html('New <strong>HTML</strong> content'); // 设置元素的 HTML 内容

12. 获取和设置文本内容

var textContent = $('#myElement').text(); // 获取元素的文本内容
$('#myElement').text('New text content'); // 设置元素的文本内容

13. CSS 操作

$('#myElement').css('background-color', 'blue'); // 设置元素的 CSS 样式

14. 遍历节点

$("elements").each(function(index) {
    console.log($(this).text());
});//.each() - 遍历 jQuery 对象集合中的每个元素。


$('#myElement').parent(); // 获取元素的直接父元素
$('#myElement').children(); // 获取元素的所有直接子元素
$('#myElement').siblings(); // 获取元素的所有兄弟元素

15. 尺寸和位置

复制$('#myElement').width(); // 获取元素的宽度
$('#myElement').height(); // 获取元素的高度
$('#myElement').offset(); // 获取元素的位置，相对于文档

事件

绑定/解绑事件


$("p").click(function(){
    // 动作触发后执行的代码!!
});


//要绑定事件，你可以使用 .on() 方法。这是 jQuery 1.7 以后推荐使用的事件绑定方法，因为它取代了之前的 .click(), .hover(), .live() 等方法。
$('p').on('click', function() {
    alert('按钮被点击了！');
});

$("#myElement").bind("click", function() {
    alert("元素被点击了！");
});//它已经被 .on() 方法替代，但仍然可以使用。

// 现在我们想要解绑这个点击事件
$('#myButton').off('click');

鼠标事件

焦点事件

$("#myInput").focus(function() {
    alert("输入框获得了焦点！");
});

$("#myInput").blur(function() {
    alert("输入框失去了焦点！");
});

改变事件

$("#input1").change(function(){

}//当input内容发送改变，接着失去焦点会触发

键盘事件

keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
.which; // 获取按键的代码

Ajax

基于js

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求类型、URL以及是否异步
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求完成后的回调函数
//使用onreadystatechange可以提供更细粒度的控制，允许开发者在请求的不同阶段执行不同的操作。然而，大多数情况下，我们只关心请求完成时的处理，所以通常会看到onload事件被使用得更多，因为它更简洁，只在请求完全加载后才触发。
xhr.onload = function() {
    // 请求成功
    if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功，处理响应数据
        processData(xhr.responseText);
    } else {
        // 请求失败，处理错误
        console.error('请求失败：' + xhr.statusText);
    }
};

// 设置请求错误时的回调函数
xhr.onerror = function() {
    console.error('请求遇到错误');
};

// 发送请求
xhr.send();

// 定义一个回调函数，用于处理从服务器接收到的数据
function processData(data) {
    console.log('处理数据：', data);
    // 这里可以添加更多的逻辑来处理数据
}

基于jquery

$.ajax({
    url: '请求的URL',
    type: '请求方式', // GET（默认）或POST
    dataType: '期望的数据类型', // 如：'json', 'html', 'text', 'xml'
     data: {
        key1: 'value1',
        key2: 'value2'
    }, // 发送到服务器的数据
    success: function(data, textStatus, jqXHR) {
        // 请求成功时调用
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败时调用
    },
    complete: function(jqXHR, textStatus) {
        // 请求完成后调用，无论成功还是失败
    }
});

Fetch API

Fetch API 是现代Web开发中用于发起HTTP请求的接口，它被设计为XMLHttpRequest的替代品。Fetch API 基于Promise，使得异步请求处理更加简洁和强大。Fetch API 也支持跨域请求，并且可以处理各种HTTP请求类型。

GET

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json(); // 解析JSON数据
    }
    throw new Error('Network response was not ok');
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

POST

fetch('https://api.example.com/submit', {
    method: 'POST', // 或 'PUT'
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        key1: 'value1',
        key2: 'value2',
    }),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));

a与from标签

a标签

<!-- 传递单个参数 -->
<a href="yourpage.html?param1=value1">Link Text</a>

<!-- 传递多个参数 -->
<a href="yourpage.html?param1=value1&param2=value2">Link Text</a>


<!-- JavaScript动态创建链接 -->
<a href="#" onclick="document.location='yourpage.html?param1=' + document.getElementById('input1').value">Link Text</a>