jQueryDOM、jQueryAjax

最新推荐文章于 2024-12-20 18:40:03 发布
最新推荐文章于 2024-12-20 18:40:03 发布
阅读量299 收藏 1
点赞数
文章标签： jquery 导航 ajax post get
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_wpno1/article/details/77430105
版权

jQueryDOM

1.1内容操作

（1）文本内容的捕获text()

作用：获取或设置文本内容（等价于DOM操作中的innerText属性）

<head>

   <script src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<p id="p1">我是要捕获的内容</p>

</body>

<script>

   $("#p1").text("更改成我");

   alert($("#p1").text());

</script>

（2）html():获取元素中的所有内容（HTML的标签）

<head>

   <script src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<p id="p1">我是要<span style="color:red">捕获</span>的内容</p>

</body>

<script>

$("#p1").html("<divstyle='background-color:red'>我是新设置的div</div>");

   alert($("#p1").html());

</script>

（3）val():获取或设置表单中的值

<head>

   <script type="text/javascript"src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<input type="text"id="txt1" name="第一章"value="请输入文本内容"/>

</body>

<script>

   $("#txt1").val("我是新的内容");

   alert($("#txt1").val());

</script>

（4）attr():获取或设置元素的属性值

<head>

    <scripttype="text/javascript"src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<input type="text"id="txt1" name="第一章"value="请输入文本内容"/>

</body>

<script>

   $("#txt1").attr("name","第一段");

   alert($("#txt1").attr("name"));

</script>

1.2元素的添加

（1）append():在元素最后添加内容

可以添加多个内容，这些内容可以使通过HTML、jQuery、DOM创建的

（2）prepend():在元素最前面添加内容

同理，可以在前面添加多个内容，也可以使通过HTML、jQuery、DOM创建的

<head>

   <script src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<divid="div1"><hr></div>

<button id="btnApp">点击在后边添加</button>

<button id="btnPre">点击在前边添加</button>

</body>

<script>

   $("#btnApp").click(function(){

        vartxt1 = "<p>姓名：</p>";

        vartxt2 = $("<p></p>").text("电话：");

        vartxt3 = document.createElement("p");

       txt3.innerHTML = "住址";

       $("#div1").append(txt1,txt2,txt3);

    });

   $("#btnPre").click(function(){

        vartxt1 = "<p>信息：</p>";

        vartxt2 = $("<p></p>").text("手机号：");

        vartxt3 = document.createElement("p");

       txt3.innerHTML = "个人地址";

       $("#div1").prepend(txt1,txt2,txt3);

    });

</script>

（3）after()和before()

两组添加的区别：append()和prepend()添加后成为了其子元素

after()和before()添加后成为了其兄弟元素

<head>

   <script src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<divid="div1"><hr></div>

<button id="btnApp">点击后边添加</button>

<button id="btnPre">点击前边添加</button>

</body>

<script>

   $("#btnApp").click(function(){

        vartxtAfter = "<p>这是通过after添加的</p>"

       $("#div1").after(txtAfter);

    });

   $("#btnPre").click(function(){

        vartxtBefore = "<p>这是通过before添加的</p>";

        $("#div1").before(txtBefore);

    });

</script>

1.3元素的删除

remove():删除的是被选元素及其子元素。

empty():删除的是子元素（自身内容也会清空，但元素还在）

remove()还有过滤删除的作用，可以删除指定元素，里边的参数就是指定元素的类名

这个代码的作用就是：删除所有p标签中class属性名为“p2”的元素

<head>

   <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<div id="div1"style="background-color: blue;width:200px;height:200px">

    div1

   <p>我是div1中的段落1</p>

    <pclass="p2">我是div1中的段落2</p>

   <p>我是div1中的段落3</p>

    <pclass="p2">我是div1中的段落4</p>

</div>

<div id="div2" style="background-color:gold;width:200px;height:200px">

    div2

   <p>我是div2中的段落</p>

</div>

<button id="delDiv1">删除div1</button>

<button id="delDiv2">删除div2</button>

</body>

<script>

   $("#delDiv1").click(function(){

       $("p").remove(".p2");

    });

    $("#delDiv2").click(function(){

       $("#div2").empty();

    });

</script>

1.4操作css类

里面的参数都是设定的class名

（1）添加class类：addClass()

<head>

   <style>

       .style1{

           color: red;

           font-size: 20px;

           text-decoration: underline;

        }

       .style2{

           color: blue;

           font-size: 32px;

           text-decoration: line-through;

        }

   </style>

   <script src="../jquery-3.2.1.min.js"></script>

</head>

<body>

<p id="p1">修改样式测试</p>

<input type="button" value="样式一" id="btnAdd1">

<input type="button" value="样式二" id="btnAdd2">

</body>

<script>

   $("#btnAdd1").click(function(){

      $("#p1").addClass("style1");

    });

   $("#btnAdd2").click(function(){

      $("#p1").addClass("style2");

    });

</script>

（2）删除class类：removeClass()

<head>

   <script src="../jquery-3.2.1.min.js"></script>

   <style>

       .style1{

           color: red;

           font-size: 20px;

           text-decoration: underline;

        }

   </style>

</head>

<body>

<p id="p1" class="style1">修改样式测试</p>

<input type="button" value="移除样式" id="btnAdd1">

</body>

<script>

   $("#btnAdd1").click(function(){

       $("#p1").removeClass("style1");

    });

</script>

（3）切换class类：toggleClass()

$(“#p1”).toggleClass(“style1”);

1.5操作CSS()方法

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

css():里面要传两个参数，第一个参数是要设置的属性名，第二个参数是设置的属性值。

$("#p1").css({"color":"yellow","fontSize":"30px"});

css():也可以设置多个属性，不同属性用“,”隔开，属性名与属性值用“:”隔开,最外面用“{}”括起来。

导航

2.1祖先

parent()找到的是当前元素的父元素

parents()找到的是当前元素的所有祖先元素

注意如果在小括号内传入参数，就可以找到你所指定的那一个父元素

<head>

   <script src="../jquery-3.2.1.min.js"></script>

   <style>

       .body *{

           border: 1px solid green;

           min-height: 20px;

           max-width: 300px;

           margin: 4px;

           background-color: white;

        }

   </style>

</head>

<body class="body">

<div class="ancestor">祖先

   <div>老祖宗

       <div name="zhang" >曾祖父

           <div>父亲

               <div class="oldBrother">大哥</div>

               <div class="myself">

                   我

                   <div class="firstSon">大儿

                        <pname="zhang">大孙子</p>

                        <p>二孙子</p>

                        <div>小孙子</div>

                   </div>

                   <div >二儿</div>

                   <p>三儿</p>

                   <div>四儿</div>

               </div>

               <div class="div3">三弟</div>

               <h3>四弟</h3>

               <p>五弟</p>

               <p class="p6">六弟</p>

           </div>

       </div>

   </div>

</div>

</body>

<script>

 $(".myself").parents("[name='zhang']").css("backgroundColor","red");

</script>

parentsUtil()选中两个指定元素之间的祖先元素

<script>$(".myself").parentsUntil("[name='zhang']").css("backgroundColor","red");</script>

2.2后代

children():找到的是当前元素的直接后代

在小括号中传入参数，找到的是指定的子元素（一个或多个）

<head>

   <style type="text/css">

        div{

           border: 1px solid green;

           min-height: 30px;

           max-width: 300px;

           margin: 10px;

           background-color: white;

        }

   </style>

   <script src="../jquery-3.2.1.min.js"></script>

</head>

<body οnkeydοwn="move(event)">

<div>父亲

   <div>大哥</div>

    <divid="myself">

        我

       <div>大儿

           <div>大孙子</div>

           <div>二孙子</div>

       </div>

       <div>二儿</div>

       <div>三儿</div>

       <div>四儿</div>

   </div>

   <div>三弟</div>

   <div>四弟</div>

</div>

</body>

<script>

   $("#myself").children().css("backgroundColor","yellow");

</script>

find():找到的是指定的所有后代

<head>

       <title></title>

   <script src="../jquery-3.2.1.min.js"></script>

   <style>

       .body *{

           border: 1px solid green;

           min-height: 20px;

           max-width: 300px;

           margin: 4px;

           background-color: white;

        }

   </style>

</head>

<body class="body">

<div class="ancestor">祖先

   <div>老祖宗

       <div name="zhang" >曾祖父

           <div>父亲

               <div class="oldBrother">大哥</div>

               <div class="myself">

                   我

                   <div class="firstSon">大儿

                       <pname="zhang">大孙子</p>

                        <p>二孙子</p>

                        <div>小孙子</div>

                   </div>

                   <div >二儿</div>

                   <p>三儿</p>

                   <div>四儿</div>

               </div>

               <div class="div3">三弟</div>

               <h3>四弟</h3>

               <p>五弟</p>

               <p class="p6">六弟</p>

           </div>

       </div>

   </div>

</div>

</body>

<script>

   $(".myself").find("*").css("backgroundColor","blue");//找到我的所有孩子，包括孙子

</script>

2.3同胞

sibling():找到当前元素的所有同胞元素（同级元素）

next():找到的是当前元素的下一个弟弟元素

nextAll():找到的是当前元素的所有弟弟元素

nextUntil():找到的是指定两个元素之间的弟弟元素（可能多个）

prev():找到的是当前元素的上一个哥哥元素

prevAll():找到的是所有的哥哥元素

prevUntil():找到的是指定两个元素之间的哥哥元素（可能多个）

$(".p6").siblings().css("backgroundColor","green");//找到六弟的所有兄弟元素

$(".p6").prevAll("div").css("backgroundColor","blue");//找到class为p6的所有div哥哥元素

$(".p6").prevUntil(".div3").css("backgroundColor","blue");//找到class为p6与div3之间的元素

$(".myself").nextAll(".div3").css("backgroundColor","blue");//找到class为myself哥哥元素中class为div3的元素

$(".myself").nextUntil(".p6").css("backgroundColor","blue");//找到class为myself与p6中的元素

jQuery  Ajax

3.1ajax

$.ajax({

    url:url,

    //要提交的数据

   data:data,

    //提交方式

   type:"GET",

    //设置请求时间

   timeout:3000,

    //执行的函数

   success:success

});

语法

$.ajax(JSON);

JSON包含常用的参数

url:服务器的地址，获取数据或者推送数据的地方

data:需要给服务器的数据，根据业务需要添加，比如登录的接口需要传递“用户名和密码”，或者书籍信息，不需要传递参数

数据类型:JSON对象。键值对的“键”和服务器保持完全一致，包括键名的大小写。

type:数据提交的方式。GET/POST/PUT/DELETE(大写)

timeout:请求等待的时间。（时间单位是毫秒，一般是10s）

success:请求成功，返回处理。

error:请求失败

dataType:预期的服务器响应的数据类型

3.2$.get()

$.get(url,handle);

function handle(data,status){

    console.log(data);//{}

    console.log(status);

}

语法：$.get(URL,callback)

url:服务器的地址，传递给服务器的参数，手动拼接到URL后面

handle:请求之后的处理函数。函数包含2个参数

data:服务器返回的数据

status:请求的状态

3.3$.post()

$(document).ready(function(){

       $("button").click(function(){

              $.post("/try/ajax/demo_test_post.php",{

                     name:"菜鸟教程",

                     url:"http://www.runoob.com"

              },

              function(data,status){

                     alert("数据: \n" + data + "\n状态: " + status);

              });

       });

});

语法：$.post(URL,data,callback);

url:服务器地址

data:向服务器传递的数据

data:服务器返回的数据

status:请求的状态

csdn_wpno1
关注
jQuery Ajax 详细通俗讲解
lucien_ma的博客
08-25 2万+
jQuery Ajax Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。 同步： 现在的大部分请求都是基于同步，所谓同步就是说必须等待请求之后给我返回结果了我才能继续往下操作。好比你要烧水，切菜，做饭。现在是同步，你必须等水烧开再去干其他事情。 异步： 异步就是，请求发送之后，不管你是否返回结果，我继续往下操作。比如，你烧水的同时，不管水烧没烧开，你继续你其他的工作，去切菜。 刷新： 类似我们的 <a></a>标签的点击链接，以及表单元素的提交，都会刷新页面
Ajax和jQuery
weixin_56341892的博客
04-09 4402
Ajax和jQuery 一、Ajax 1、Ajax概述 ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。 Asynchronous: 异步的意思 JavaScript：javascript脚本，在浏览器中执行 xml : 是一种数据格式 ajax是一种做局部刷新的方法，不是一种语言。 是浏览器客户端上的前端技术，是多个技术联合实现的产物。 ajax包含的技术主要有javascript，dom，css,，x
JQuery DOM元素方法跟JQuery 核心函数跟JQuery 事件方法
書畵
11-15 286
JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目。 .index()                        存储与指定元素相关的任意数据。 .size()                          存储与匹配元素相关的任意数据。 .t
jQuery的ajax表单提交，获取元素内容方法
iframe引用页面在父类页面调用函数只刷新子页面方法
11-20 1126
jQuery的ajax表单提交 .val() 获取指定元素的value值，通常指表单元素 .html() 获得指定的html元素以及文本 .text() 获得当前元素表现的文本 <html> <title>页面标题</title> <head></head> <body> <select> <option>北京</option> <optio
jQuery 与 Ajax
Wzc0720的博客
10-28 3943
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
jquery--DOM操作
m0_74194490的博客
07-05 1280
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 3227
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery Ajax 和 axios Ajax
qq_59612674的博客
11-06 3128
区别： axios是通过promise技术实现对ajax实现的一种封装，本身上来说axios就是ajax，但是ajax却不单单只是axios；jQuery也实现了对ajax技术的封装，但是jQuery主要是对原生JavaScript进行封装，封装了js三大核心要素：ECMAScript、DOM、BOM，所以说jQuery封装的ajax只是其中的一小部分，如果通过引用jQuery来进行ajax交互实在是显得有所浪费资源，因此vue中封装了axios来实现对ajax技术的单独封装。 什么是 jQuery ？
jQuery Ajax 概述
程序员小白的博客
01-28 1394
jQuery Ajax 概述
JQuery系列之ajax请求
老__L的博客
11-12 1753
通过 HTTP 请求加载远程数据。通过远程 HTTP GET 请求载入信息。通过 HTTP GET 请求载入 JSON 数据。通过 HTTP GET 请求载入并执行一个 JavaScript 文件。通过远程 HTTP POST 请求载入信息。
JQuery DoM和ajax 操作
08-21
通过深入理解并熟练运用jQuery的DOM操作和AJAX功能，开发者能够构建出动态、交互性强的网页应用，提升用户体验，同时减少与服务器的通信成本。在实际项目中，这些技术经常被用来实现页面局部刷新、异步提交表单、...
jQuery Ajax 实例全解析
12-11
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data]...
jQuery Ajax之load()方法
01-19
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为： 　load( url [, data][, callback] ) 　load()方法参数解释见下表： 参数名称 类　型 说　明 url String ...
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
12-09
 JQuery在执行Ajax的过程中会触发很多事件。 这些事件可以分为两种事件，一种是局部事件(Local)，一种是全局事件(Global)。 局部事件：可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件，则可以设置...
Jquery Ajax请求文件下载操作失败的原因分析及解决办法
12-11
那是因为response原因，一般请求浏览器是会处理服务器输出的response，例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以...
Ajax简单理解
sdrfghb的博客
12-17 512
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。XMLHttpRequest 只是实现 Ajax 的一种方式。
异步JavaScript，Ajax，API
分享学习网络的点点滴滴
12-17 371
AJAX异步JavaScript和XML：允许我们以异步方式与远程web服务器通信。通过AJAX调用，我们可以动态地从web服务器请求数据；AJAX名称中最初包含XML，这是一种数据格式，之前很常用，现在，JSON更加的被常用，因为JSON更轻量，更容易解析，与JavaScript有天然的兼容性；这里简单的介绍一下， 后面的文章在做详细的解释和用法应用程序编程接口：可以被另一个软件使用的软件，以允许应用程序相互通信在WEB开发中有很多很多很多的API：DOM API。
图书馆管理系统（三）基于jquery、ajax
2301_81045156的博客
12-17 623
再下一步，循环遍历当前页的书籍，从 start 索引开始，直到 end 索引（不包括 end），遍历当前页面应显示的书籍并获取当前书籍信息。首先想到的是需要一个表格，将我们通过ajax访问并获取txt文本，然后把获取到的内容放到表格中，所以我们可以新建一个空表格，还有新建图书和编辑图书时的表单。该任务可以说是整个项目中最重要的部分，即能够连接后端进行前后端的交互，包括新增图书，编辑图书，删除图书等等。我们首先进行新增图书功能的编写，首先先获取到对应所需要的元素，然后实现点击新增图书，该表单显示的操作。
04、Vue与Ajax
最新发布
qq_60060362的博客
12-20 588
(1) 在a页面中想获取b页面中的资源，如果a页面和b页面所处的协议、域名、端口不同（只要有一个不同），所进行的访问行动都是跨域的。(2) 哪些跨域行为是允许的？① 直接在浏览器地址栏上输入地址进行访问② 超链接③ ④ ⑤ ⑥ ......(3) 哪些跨域行为是不允许的？① AJAX请求是不允许的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值