jQuery基础2-css的操作-事件-属性-Ajax-DOM操作

2024-09-06 09:44
文章标签 javascript 基础 操作 css 属性 事件 jquery frontend ajax dom

本文主要是介绍jQuery基础2-css的操作-事件-属性-Ajax-DOM操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

1.css的操作

1. .css()

2. .addClass()

3. .removeClass()

4. .toggleClass()

2.事件

1. . on()

基本用法：

事件委托：

2. .off()

3. .click()

4. .hover()

5. .trigger()

3. Ajax

$.ajax()：执行异步 HTTP（Ajax）请求。

$.get()：通过 GET 请求从服务器加载数据。

$.post()：通过 POST 请求向服务器发送数据。

$.getJSON()：通过 GET 请求加载 JSON 格式的数据。

4.jQuery属性

1. .attr()

2. .prop()

3. .val()

5.jQuery之DOM内部操作

5.1DOM元素的插入

1. appendTo()

2. prependTo()

3. insertBefore()

4. insertAfter()

5. prepend()

6. after()

7. before()

总结

5.2 DOM元素的移除

5.2.1  remove()

5.2.2empty()

5.3替换DOM元素

5.4拷贝DOM元素

5.5DOM遍历

5.6jQuery键盘事件、鼠标事件、表单事件等

1.css的操作

1. .css()

.css() 方法用于获取或设置匹配元素的样式属性。当只传递一个参数（属性名）时，它会返回该属性的值。当传递两个参数（属性名和值）时，它会为匹配的元素设置该属性的值。

获取样式属性值：

var color = $("#myDiv").css("color"); console.log(color); // 输出 "#ff0000" 或其他颜色值

设置样式属性值：

$("#myDiv").css("color", "blue");

2. .addClass()

.addClass() 方法向匹配的元素集合中的每个元素添加一个或多个类名。如果指定的类名已经存在，则不会重复添加。

添加一个类名：

$("#myDiv").addClass("highlight");

添加多个类名（通过空格分隔）：

$("#myDiv").addClass("highlight bold");

3. .removeClass()

.removeClass() 方法从匹配的元素集合中的每个元素中删除一个或多个类名。如果省略参数，则删除所有类名。

删除一个类名：

$("#myDiv").removeClass("highlight");

删除多个类名（通过空格分隔）：

$("#myDiv").removeClass("highlight bold");

删除所有类名：

$("#myDiv").removeClass();

4. .toggleClass()

.toggleClass() 方法切换匹配元素集合中每个元素的一个或多个类名的状态。如果类名存在，则删除它；如果不存在，则添加它。

切换一个类名：

$("#myDiv").toggleClass("active");

切换多个类名（通过空格分隔）：

$("#myDiv").toggleClass("active hidden");

2.事件

事件绑定和解绑

1. . on()

.on() 方法用于在选择元素上绑定一个或多个事件的事件处理函数。这是jQuery中最灵活的事件绑定方法，因为它允许你使用事件委托来绑定事件到尚未存在于DOM中的元素。

基本用法：
    // 绑定事件$("#btn1").click(function(){$(".box").on("click", function(){$(this).css("background-color", "green");});});
事件委托：
    // 事件委托$(".box").on("click", "p", function(){$(this).css("background-color", "red");});

在这个例子中，即使.childElement在绑定事件后添加到DOM中，点击它也会触发事件处理函数。

2. .off()

.off() 方法用于移除通过 .on() 方法绑定的事件处理函数。如果你想要取消之前绑定的事件，这个方法就非常有用。

移除特定事件处理函数：

// 解绑事件$("#btn2").click(function(){$(".box").off("click");});

移除特定事件处理函数（如果有命名）：

  $("#btn3").click(function(){$(".box p").off("click", toggle);});

3. .click()

.click() 方法是 .on("click", handler) 的简写形式，用于为匹配的元素集合中的每个元素绑定点击事件。

用法：

$("#myButton").click(function() {  alert("按钮被点击了！");  
});

4. .hover()

.hover() 方法用于为匹配的元素集合中的每个元素绑定鼠标进入（mouseenter）和离开（mouseleave）事件。这个方法接受两个函数作为参数：第一个函数在鼠标进入元素时触发，第二个函数在鼠标离开元素时触发。

用法：

    //鼠标事件$(".hov").hover(function(){$(this).css("background-color", "pink");});$(".hov").mouseleave(function(){$(this).css("background-color", "rgb(208, 200, 247)");});

5. .trigger()

.trigger() 方法用于触发被选元素的指定事件类型。这可以用来模拟用户操作，如点击或按键事件。

用法：

$("#myButton").trigger("click");

3. Ajax

$.ajax()：执行异步 HTTP（Ajax）请求。

是jQuery中最底层、功能最强大的处理Ajax的方法。它允许你设置各种Ajax选项，如请求类型（GET或POST）、请求URL、请求成功和失败的处理函数

$.ajax({  url: "test.html", // 请求的URL  type: "GET",      // 请求方式  data:{username：'xiu',password:'123'},dataType: "html", // 预期服务器返回的数据类型  success: function(data) {  // 请求成功时执行的回调函数  $("#result").html(data);  },  error: function(xhr, status, error) {  // 请求失败时执行的回调函数  alert("请求失败: " + error);  }  
});

$.get()：通过 GET 请求从服务器加载数据。

$.get() 方法通过GET请求从服务器请求数据。这是 $.ajax() 方法的一个简化版，用于GET请求

$.get("test.html", {username：'xiu',password:'123'},function(data) {  $("#result").html(data);  
});

$.post()：通过 POST 请求向服务器发送数据。

$.post() 方法通过POST请求向服务器发送数据。这同样是 $.ajax() 方法的一个简化版，用于POST请求

$.post("test.php", { name: "John", time: "2pm" } ,  function(data) {  $("#result").html(data);  }  
);

$.getJSON()：通过 GET 请求加载 JSON 格式的数据。

$.getJSON() 方法通过GET请求加载JSON格式的数据。这个方法也是 $.ajax() 方法的一个简化版，但它自动将返回的JSON字符串解析成JavaScript对象。

$.getJSON("test.json", function(json) {  $("#result").html("Name: " + json.name + ", Time: " + json.time);  
});

4.jQuery属性

1. .attr()

方法描述（Attributes）：专门操作属性值为非布尔元素的属性（ id、class、href、src ），该方法读写一体操作涉及获取和设置 HTML 元素的属性。

以下示例均已如下HTML代码为例

   <a href="http://www.baidu.com" target="_blank" title="百度一下，你就知道"></a>

获取属性

要获取元素的属性值，你可以使用 .attr() 方法。该方法接受一个属性名作为参数，并返回第一个匹配元素的属性值。

  //获取属性var href = $("a").attr("href");

设置属性

设置属性也使用 .attr() 方法，但此时需要传递两个参数：属性名和属性值。这会将所有匹配元素的指定属性设置为指定的值。

$('a').attr('href', 'https://example.com'); // 将所有<a>元素的href属性设置为https://example.com

移除属性

要移除元素的属性，.removeAttr() 方法可以用来完成这一任务。只需传递要移除的属性名作为参数即可。

        //移除属性$("a").removeAttr("target"); //移除target属性console.log($("a").attr("target")); //undefined

使用函数

.attr() 方法还允许你传递一个函数作为参数，这个函数将根据每个匹配的元素动态地返回属性值。这对于根据元素的当前状态或其他条件动态设置属性非常有用。

        $('a').attr('title', function(index, currentTitle) {  
console.log('Link ' + (index + 1) + ' (' + currentTitle + ')')
});

2. .prop()

方法描述：专门操作属性值为布尔值的属性（如 checked、selected、disabled），该方法读写一体。 

下列代码均已以下HTML为例

  <label for="checkbox1">西瓜</label><input type="checkbox" id="checkbox1"><label for="checkbox2">菠萝</label><input type="checkbox" id="checkbox2"  checked><label for="checkbox3">苹果</label><input type="checkbox" id="checkbox3">

获取属性值：当 prop() 方法不带第二个参数时，它会返回第一个匹配元素的指定属性的值。

var checkbox3=$("#checkbox3").prop('checked');
console.log(checkbox3); // 获取 id 为 myCheckbox3 的 checkbox 是否被选中

设置属性值：当 prop() 方法带有第二个参数时，它会设置所有匹配元素的指定属性的值。

$("#checkbox1").prop('checked', true); //选中checkbox1
$("#checkbox2").prop('checked', false); //取消选中checkbox2

3. .val()

方法描述：val() 方法主要用于处理表单元素（如 input, select, textarea 等）的值。它既可以用来获取元素的值，也可以用来设置元素的值。

代码示例HTML（回顾一下表单元素）

<label for="myIput1">姓名</label><input type="text" value="Lisa" name="ll"" id="myIput1"><br><label for="myIput2">年龄</label><input type="number" name="" id="myIput2"><br><label for="myIput3">邮箱</label><input type="email" name="" id="myIput3"><br><label for="myIput4">手机号</label><input type="tel" name="" id="myIput4"><br><label for="myIput5">密码</label><input type="password" name="" id="myIput5"><br><label for="myIput6">性别</label><input type="radio" name="gender" id="male" value="male"><label for="male">男</label><input type="radio" name="gender" id="female" value="female"><label for="female">女</label><br><label for="myIput7">爱好</label><select name="" id="myIput7"><option value="reading">阅读</option><option value="swimming">游泳</option><option value="running">跑步</option></select><br><label for="myIput8">描述</label><br><textarea name="" id="myIput8" cols="30" rows="10"></textarea><br><button>提交</button>

获取值：当 val() 方法不带任何参数时，它会返回第一个匹配元素的值。如果选择了多个元素，它只会返回第一个元素的值。

console.log($("#myInput1").val());

var inputValue = $('#myInput').val(); // 获取 id 为 myInput 的 input 元素的值
设置值：当 val() 方法带有一个参数时，它会设置所有匹配元素的值。

$('#myInput3').val('123456@qq.com'); //设置myInput3的值为123456@qq.com
$('#myInput4').val('13512345678'); //设置myInput4的值为13512345678

5.jQuery之DOM内部操作

5.1DOM元素的插入

1. appendTo()

描述：
appendTo() 方法将匹配的元素集合中的每个元素追加到由目标选择器指定的元素集合中的每个元素的内部末尾。简单来说，就是把某个元素（或元素集合）放到另一个元素（或元素集合）的里面，并且放在该元素内部的最末尾。

示例：

$("<li>新列表项</li>").appendTo("ul");

这会将新的 <li> 元素添加到每个 <ul> 元素的末尾。

2. prependTo()

描述：
与 appendTo() 相反，prependTo() 方法将匹配的元素集合中的每个元素前置到由目标选择器指定的元素集合中的每个元素的内部开头。这意味着新元素会被添加到目标元素内部的最前面。

示例（注意，应使用不同的文本以避免混淆）：

$("<li>前置列表项</li>").prependTo("ul");

这会将新的 <li> 元素添加到每个 <ul> 元素的最前面。

3. insertBefore()

描述：
insertBefore() 方法将匹配的元素集合中的每个元素插入到由目标选择器指定的元素集合中的每个元素之前。这意味着新元素会被添加到目标元素外部，并且位于目标元素之前。

示例：

$("<li>插入前列表项</li>").insertBefore("li:eq(2)");

这会在每个索引为 2 的 <li> 元素之前插入一个新的 <li> 元素。

4. insertAfter()

描述：
与 insertBefore() 相反，insertAfter() 方法将匹配的元素集合中的每个元素插入到由目标选择器指定的元素集合中的每个元素之后。这意味着新元素会被添加到目标元素外部，并且位于目标元素之后。

示例：

$("<li>插入后列表项</li>").insertAfter("li:eq(2)");

这会在每个索引为 2 的 <li> 元素之后插入一个新的 <li> 元素。

5. prepend()

描述：
prepend() 方法将指定的内容作为子元素前置到匹配的元素集合中的每个元素的内部开头。这与 prependTo() 的行为相似，但方向相反；你是在告诉 jQuery 把内容放到哪个元素的前面，而不是把哪个元素放到哪个内容的前面。

示例：

$(".p1").prepend("<p>前置文本</p>");

这会在每个类名为 p1 的 <p> 元素内部的最前面添加一个新的 <p> 元素。

6. after()

描述：
after() 方法在匹配的元素集合中的每个元素之后插入指定的内容。这些新内容作为同级元素被添加到每个目标元素的后面。

示例：

$(".p1").after("<p>后置文本</p>");

这会在每个类名为 p1 的 <p> 元素之后添加一个新的 <p> 元素。

7. before()

描述：
before() 方法在匹配的元素集合中的每个元素之前插入指定的内容。这些新内容作为同级元素被添加到每个目标元素的前面。

示例：

$(".p1").before("<p>前置文本</p>");

这会在每个类名为 p1 的 <p> 元素之前添加一个新的 <p> 元素。

总结

  • appendTo() 、 prependTo() 、append（）、prepend（）是相对于目标元素内部的添加

     语法：$("<li>新列表项</li>").appendTo("ul")  //向ul里面添加li

     appendTo() 、 prependTo()添加到元素内部最后和最前

  • insertBefore() 、 insertAfter() 、after（）、before（）是相对于目标元素外部的添加（和元素关系是兄弟节点），且相对于目标元素的位置有明确的前后之分。

5.2 DOM元素的移除

5.2.1  remove()

移除具有特定ID的元素
移除具有特定类的所有元素

<body>
<div id="myElement">这是要移除的ID元素</div>  
<div class="myclass">这是要移除的class元素</div>
<div class="myclass">这是要移除的class元素<</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  $("#myElement").remove();  $(".myclass").remove();  // 也可以用 class 选择器来删除元素
});  
</script>
</body>

移除子元素使用.children().remove()移除所有子元素

<body>
<ul id="parent"><li>我是要移除的子元素</li><li>我是要移除的子元素</li><li>我是要移除的子元素</li>
</ul>
<button class="btn2">点击清空</button><script>  
$(".btn2").click(function(){$("#parent").children().remove(); 
})
});  
</script>
</body>
5.2.2empty()

移除子元素：使用.empty()移除所有子元素

<body>
<ul id="parent"><li>我是要移除的子元素</li><li>我是要移除的子元素</li><li>我是要移除的子元素</li>
</ul>
<button class="btn2">点击清空</button><script>  
$(".btn2").click(function(){
//   $("#parent").children().remove(); $("#parent").empty(); })
});  
</script>
</body>

5.3替换DOM元素

.replaceWith()方法来替换选定的元素。这个方法接受一个内容参数，这个参数可以是HTML字符串、DOM元素、jQuery对象，或者是这些的集合，然后它会用这些内容替换掉所有匹配的元素。

<body><div id="container"><p id="oldParagraph">这是一段旧的文本。</p></div><button id="replaceButton1">点击替换单个文本</button><ul id="list"><li>我是多个替换用map + join<</li><li>我是多个替换用map + join<</li><li>我是多个替换用map + join</li></ul><button id="replaceButton2">点击替换each方法</button><button id="replaceButton3">点击替换map+join方法</button><!-- jQuery 代码来实现 DOM 的替换 --><script>$(document).ready(function () {$("#replaceButton1").click(function () {var newParagraph = $('<p>这是一段新的文本。</p>');// 替换元素  $('#oldParagraph').replaceWith(newParagraph);});$("#replaceButton2").click(function () {// 方法1: 使用each遍历并替换  $("#list li").each(function () {$(this).replaceWith('<p>这是一段新的文本1。</p>');});$("#replaceButton3").click(function () {  // 类似replaceAll的方法：构建新的HTML字符串  var newListHtml = $('#list').children().map(function() {  return '<p>这是一段新的文本2。</p>';  }).get().join('');  $('#list').html(newListHtml); // 设置新的HTML内容  });});});  </script>
</body>

5.4拷贝DOM元素

.clone()方法来拷贝一个或多个DOM元素。这个方法会返回被拷贝元素的副本，但它不会自动将副本添加到文档中；你需要使用如.appendTo(), .prependTo(), .insertAfter(), .insertBefore()等方法来手动添加副本到文档中。

<body><div id="container"><p id="original">原始元素</p></div><script>// 假设原始元素已经绑定了事件  
var originalElement = $('#original');  // 绑定事件  
originalElement.on('click', function() {  alert('原始元素被点击了！');  
});  // 复制元素  
var clonedElement = originalElement.clone(true); // 注意：这里的true参数会尝试复制事件和数据  
clonedElement.on('click', function() {  alert('复制的元素被点击了！');  
});  // 将复制的元素添加到DOM中  
$('#container').append(clonedElement);
</script>
</body>

5.5DOM遍历

each方法

<body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li></ul><script>// 找到ul元素var $ul = $('ul');// 遍历ul下的所有li元素$ul.children().each(function(index, element){// 输出li的索引和内容console.log(index + ':' + $(element).text());});</script>
</body>

5.6jQuery键盘事件、鼠标事件、表单事件等

和JS只是语法不同参考博文

示例

$(document).keydown(function(event) {  if (event.keyCode === 13) { // Enter键的keyCode是13  alert('你按下了Enter键！');  }  
});

https://blog.csdn.net/m0_64450406/article/details/141474903?spm=1001.2014.3001.5501

这篇关于jQuery基础2-css的操作-事件-属性-Ajax-DOM操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1141673。

相关文章

Linux使用fdisk进行磁盘的相关操作

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
C# 读写ini文件操作实现

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中，常将INI文件作为配置文件，用于存储应用程序的
阅读更多...
Python使用qrcode库实现生成二维码的操作指南

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log
阅读更多...
Java操作ElasticSearch的实例详解

Java操作ElasticSearch的实例详解

《Java操作ElasticSearch的实例详解》Elasticsearch是一个分布式的搜索和分析引擎,广泛用于全文搜索、日志分析等场景,本文将介绍如何在Java应用中使用Elastics... 目录简介环境准备1. 安装 Elasticsearch2. 添加依赖连接 Elasticsearch1. 创
阅读更多...
Java如何通过反射机制获取数据类对象的属性及方法

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取
阅读更多...
java Stream操作转换方法

java Stream操作转换方法

《javaStream操作转换方法》文章总结了Java8中流(Stream)API的多种常用方法,包括创建流、过滤、遍历、分组、排序、去重、查找、匹配、转换、归约、打印日志、最大最小值、统计、连接、... 目录流创建1、list 转 map2、filter（）过滤3、foreach遍历4、groupingB
阅读更多...
Java操作PDF文件实现签订电子合同详细教程

Java操作PDF文件实现签订电子合同详细教程

《Java操作PDF文件实现签订电子合同详细教程》：本文主要介绍如何在PDF中加入电子签章与电子签名的过程,包括编写Word文件、生成PDF、为PDF格式做表单、为表单赋值、生成文档以及上传到OB... 目录前言：先看效果：1.编写word文件1.2然后生成PDF格式进行保存1.3我这里是将文件保存到本地后
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2