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。

相关文章

从基础到高级详解Go语言中错误处理的实践指南

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
使用Java填充Word模板的操作指南

使用Java填充Word模板的操作指南

《使用Java填充Word模板的操作指南》本文介绍了Java填充Word模板的实现方法,包括文本、列表和复选框的填充,首先通过Word域功能设置模板变量,然后使用poi-tl、aspose-words... 目录前言一、设置word模板普通字段列表字段复选框二、代码1. 引入POM2. 模板放入项目3.代码
阅读更多...
利用Python操作Word文档页码的实际应用

利用Python操作Word文档页码的实际应用

《利用Python操作Word文档页码的实际应用》在撰写长篇文档时,经常需要将文档分成多个节,每个节都需要单独的页码,下面：本文主要介绍利用Python操作Word文档页码的相关资料,文中通过代码... 目录需求：文档详情：要求：该程序的功能是：总结需求：一次性处理24个文档的页码。文档详情：1、每个
阅读更多...
Python内存管理机制之垃圾回收与引用计数操作全过程

Python内存管理机制之垃圾回收与引用计数操作全过程

《Python内存管理机制之垃圾回收与引用计数操作全过程》SQLAlchemy是Python中最流行的ORM（对象关系映射）框架之一,它提供了高效且灵活的数据库操作方式,本文将介绍如何使用SQLAlc... 目录安装核心概念连接数据库定义数据模型创建数据库表基本CRUD操作创建数据读取数据更新数据删除数据查
阅读更多...
Go语言中json操作的实现

Go语言中json操作的实现

《Go语言中json操作的实现》本文主要介绍了Go语言中的json操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录 一、jsOChina编程N 与 Go 类型对应关系️ 二、基本操作：编码与解码 三、结构体标签（Struc
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2