JQuery学习笔记(2)

xiaoxiao2021-02-28  27

一,JQuery删除元素

$(selector).remove();删除被选元素及其子元素

$(selector).empty();删除被选元素的子元素,也就是说他的容器还会留下来,只是其中的内容消失了

$("p").remove(.test)当remove()中带参数时,就是可以指定删除那一类别的元素,这样删除的精度更高;这一句就是将class=test的所有<p>元素全部删除

二,JQuery获取并设置CSS类

$(selector).addClass();向被选元素添加一个或多个类

$(selector).removeClass();向被选元素删除一个或多个类

$(selector).toggleClass();向被选元素进行添加/删除一个或多个类的切换操作

三,JQuery CSS()方法:设置或返回被选元素的一个或多个样式属性

$("p").css("background-color");返回首个匹配元素的background-color值

$("p").css("background-color","yellow");为所有匹配元素设置background-color值

$("p").css({

    "background-color":"yellow",  一次设置多个CSS值

    "font-size":"200%"

});

四,JQuery 尺寸

JQuery 中处理尺寸的方法:

width(); 设置或返回元素的宽度(不包括内边距,边框或外边距)

height();设置或返回元素的高度(不包括内边距,边框或外边距)

innerWidth();返回元素的宽度(包括内边距)

innerHeight();返回元素的高度(包括内边距)

outerWidth();返回元素的宽度(包括内边距和边框)

outerHeight();返回元素的高度(包括内边距和边框)

五,JQuery 遍历(对DOM进行遍历)

JQuery 遍历就是指根据其相对于其他元素的关系来查找HTML元素,比如下图:(就是根据父类子类,祖先后代这类的关系来确定范围)

六,JQuery的遍历方法

遍历祖先:parent();返回被选元素的直接父元素(只有一个,就是他的爸爸)

              parents();返回被选元素的所有祖先元素

              parentsUntil(); 返回介于两个元素之间的所有祖先元素

             $("span").parentsUntil("div"); 返回介于<span>与<div>元素之间的所有元素(参照之前给的树形图)

              $('.child').parent().css('background','green');选中父类元素之后可以马上对其进行CSS操作

遍历后代:children();返回被选元素的所有直接子元素

               find();返回后代元素,一路向下直到最后一个后代

               $("div").find("span");返回属于<div>后代的所有<span>元素

遍历同胞: $("h2").siblings(); 返回被选元素的所有同胞元素(比如,p,span,h2,h3,p是同胞元素)

                $("h2").next();返回被选元素的下一个同胞元素(h3)

                $("h2").nextAll();返回被选元素的所有跟随的同胞元素(h3,p)

               $("h2").nextUntil("p");返回介于两个给定参数之间的所有跟随的同胞元素(h3)

               prev();

               prevAll();     这三个方法与上面的方法相似,之前方向相反,这里是向前

               prevUntil();

七,JQuery遍历过滤 允许你基于其中一个元素在一组元素中的位置来选择一个特定的元素

      first();返回被选元素的首个元素

      $("div p").first();返回首个<div>元素内部的第一个<p>元素

      last();返回被选元素的最后一个元素

      $("div p").last();返回首个<div>元素内部的最后一个<p>元素

      eq(),方法返回被选元素中带有指定索引号的元素索引号从0开始:

      $("p").eq(1) 选取第二个<p> 元素

      filter()方法允许你做一个标准,不匹配这个标准的会被从集合中删除,匹配的会返回

      $("p").filter(.intro) 返回带有类名intro的所有<p>元素

     $("p").not(.intro) 返回不匹配的元素

 八,AJAX = 异步JavaScript 和 XML ,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示

       通过JQuery AJAX方法,你能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或者JSON,同时你可以把这些外部数据直接载入网页的被选元素中

 九,JQuery load () 从服务器中加载数据,并把返回的数据放入被选元素中

     $("selector").load(URL ,data, callback); 

     URL 必填,此参数规定你希望加载的URL

     data选填,此参数规定与请求一同发送的查询字符串健/值对集合

    callback选填,此参数规定了laod()方法执行完毕后所执行的函数名称

     $("#div1").load("demo_test.txt"); 将文件demo_test.txt的内容加载到指定的<div>元素中

     也可以把jQuery选择器添加到URL参数中

    $("#div1").load("demo_test.txt  #p1");     将文件demo_test.txt中id=p1的元素的内容加载到指定的<div>中

    可选的callback参数规定当load()方法完成后所要允许的回掉函数,回调函数可以设置不同的参数:

    responseTxt  包含成功调用时的结果内容

    statusTXT  包含调用的状态

    xhr  包含 XMLHttpRequest对象

    下面的例子会在load()方法完成后显示一个提示框,如果load()方法已成功,则显示“外部内容加载成功”,如果失败,则显示错误信息

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

         $("div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

                if(statusTxt=="success")

                    alert("External content loaded successfullu!");

               if(statusTxt=="error")

                    alert("Error:"+xhr.status+":"+xhr.statusText")           返回错误的类型和状态   

    })

})

在jQuery的load()方法中,无论AJAX请求是否成功,一旦请求完成后,回调函数立即被触发

十,jQuery的get()和post()方法

     用于通过HTTP GET 或POSt请求从服务器请求数据

    GET:从指定的资源请求数据,可能返回缓存数据

    POST:向指定的资源提交要处理的数据;也可用于从服务器获得数据,但是POST不会缓存数据,并且常用于连同请求一起发数据

   $.get(URL,callback);  URL 必填,callback是指请求成功后所执行的函数名

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

       $.get("demo_test.php",function(data,status){    第一个参数data存有请求页面的内容,第二个参数存有请求的状态

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

    })

})

$.post(URL,data,callback) 可选data参数规定连同请求发送的数据

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

    $.post("demo_test_post.html",

              { 

                   name:"donald,duck",

                   city:"duckburg",

              },

             function(data,status){ 

                   alert("data:"+data+"nstatus:"+status);

             });

});

转载请注明原文地址: https://www.6miu.com/read-2800252.html

最新回复(0)