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。

相关文章

Python使用python-pptx自动化操作和生成PPT

Python使用python-pptx自动化操作和生成PPT

《Python使用python-pptx自动化操作和生成PPT》这篇文章主要为大家详细介绍了如何使用python-pptx库实现PPT自动化,并提供实用的代码示例和应用场景,感兴趣的小伙伴可以跟随小编... 目录使用python-pptx操作PPT文档安装python-pptx基础概念创建新的PPT文档查看
阅读更多...
MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

《MySQL数据库表操作完全指南:创建、读取、更新与删除实战》本文系统讲解MySQL表的增删查改（CURD）操作,涵盖创建、更新、查询、删除及插入查询结果,也是贯穿各类项目开发全流程的基础数据交互原... 目录mysql系列前言一、Create(创建)并插入数据1.1 单行数据 + 全列插入1.2 多行数据
阅读更多...
MySQL 临时表与复制表操作全流程案例

MySQL 临时表与复制表操作全流程案例

《MySQL临时表与复制表操作全流程案例》本文介绍MySQL临时表与复制表的区别与使用,涵盖生命周期、存储机制、操作限制、创建方法及常见问题,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小... 目录一、mysql 临时表（一）核心特性拓展（二）操作全流程案例1. 复杂查询中的临时表应用2. 临时
阅读更多...
MySQL 数据库表与查询操作实战案例

MySQL 数据库表与查询操作实战案例

《MySQL数据库表与查询操作实战案例》本文将通过实际案例,详细介绍MySQL中数据库表的设计、数据插入以及常用的查询操作,帮助初学者快速上手,感兴趣的朋友跟随小编一起看看吧... 目录mysql 数据库表操作与查询实战案例项目一：产品相关数据库设计与创建一、数据库及表结构设计二、数据库与表的创建项目二：员
阅读更多...
Python如何调用另一个类的方法和属性

Python如何调用另一个类的方法和属性

《Python如何调用另一个类的方法和属性》在Python面向对象编程中,类与类之间的交互是非常常见的场景,本文将详细介绍在Python中一个类如何调用另一个类的方法和属性,大家可以根据需要进行选择... 目录一、前言二、基本调用方式通过实例化调用通过类继承调用三、高级调用方式通过组合方式调用通过类方法/静
阅读更多...
从基础到高阶详解Python多态实战应用指南

从基础到高阶详解Python多态实战应用指南

《从基础到高阶详解Python多态实战应用指南》这篇文章主要从基础到高阶为大家详细介绍Python中多态的相关应用与技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、多态的本质：python的“鸭子类型”哲学二、多态的三大实战场景场景1：数据处理管道——统一处理不同数据格式
阅读更多...
Java Stream流以及常用方法操作实例

Java Stream流以及常用方法操作实例

《JavaStream流以及常用方法操作实例》Stream是对Java中集合的一种增强方式,使用它可以将集合的处理过程变得更加简洁、高效和易读,：本文主要介绍JavaStream流以及常用方法... 目录一、Stream流是什么？二、stream的操作2.1、stream流创建2.2、stream的使用2.
阅读更多...
MySQL数据类型与表操作全指南( 从基础到高级实践)

MySQL数据类型与表操作全指南( 从基础到高级实践)

《MySQL数据类型与表操作全指南(从基础到高级实践)》本文详解MySQL数据类型分类（数值、日期/时间、字符串）及表操作（创建、修改、维护）,涵盖优化技巧如数据类型选择、备份、分区,强调规范设计与... 目录mysql数据类型详解数值类型日期时间类型字符串类型表操作全解析创建表修改表结构添加列修改列删除列
阅读更多...
Python 函数详解:从基础语法到高级使用技巧

Python 函数详解:从基础语法到高级使用技巧

《Python函数详解:从基础语法到高级使用技巧》本文基于实例代码,全面讲解Python函数的定义、参数传递、变量作用域及类型标注等知识点,帮助初学者快速掌握函数的使用技巧,感兴趣的朋友跟随小编一起... 目录一、函数的基本概念与作用二、函数的定义与调用1. 无参函数2. 带参函数3. 带返回值的函数4.
阅读更多...
基于Python Playwright进行前端性能测试的脚本实现

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2