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调用Orator ORM进行数据库操作

Python调用Orator ORM进行数据库操作

《Python调用OratorORM进行数据库操作》OratorORM是一个功能丰富且灵活的PythonORM库,旨在简化数据库操作,它支持多种数据库并提供了简洁且直观的API,下面我们就... 目录Orator ORM 主要特点安装使用示例总结Orator ORM 是一个功能丰富且灵活的 python O
阅读更多...
部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
python使用fastapi实现多语言国际化的操作指南

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型，3步搞定一个应
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
轻松上手MYSQL之JSON函数实现高效数据查询与操作

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》：本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2