jQueryDOM、jQueryAjax

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:请求的状态

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值