码迷,mamicode.com
首页 > Web开发 > 详细

HTML,遍历,AJAX,杂项

时间:2019-07-12 12:55:27      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:获得   属性   状态   img   路径   特定   返回   标识符   sync   





1 HTML



jQuery 拥有可操作 HTML 元素和属性的强大方法。

获取


  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

示例:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>

结果:
技术图片?

技术图片?
技术图片?


attr()



jQuery attr() 方法也用于设置/改变属性值。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href","https://www.baidu.com");
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>改变 href 值</button>//点击触发click(function())函数。
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值。</p>
</body>
</html>


增加,删除,CSS 类



css()方法



css() 方法:_设置_或_返回_被选元素的一个或多个样式属性。


2 遍历



JQuery遍历参考手册


祖先


  • parent()返回被选元素的直接父元素
  • parents()返回被选元素的所有祖先元素,它一路向上直到文档的根元素 () $("span").parents("ul")所有 元素的所有祖先,并且它是
      元素
    • parentsUntil()返回介于两个给定元素之间的所有祖先元素。 $("span").parentsUntil("div");返回介于
      元素之间的所有祖先元素

    后代


    • children()返回被选元素的所有直接子元素
    • find()返回被选元素的后代元素,一路向下直到最后一个后代。 $("div").find("span");返回属于
      后代的所有 元素

    同胞


    • siblings()返回被选元素的所有同胞元素
    • next()返回被选元素的下一个同胞元素
    • nextAll()返回被选元素的所有跟随的同胞元素
    • nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
    • prev() prevAll() prevUntil()类似于前面的 next... 返回的是前面的同胞元素

    过滤


    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
    其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

    按照索引进行过滤。
    示例:
    $("div p").first().css("background-color","yellow");//第一个符合div 中的 p 标签组合的,背景变黄


    AJAX


    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。


    load()方法:


    jQuery load() 方法是简单但强大的 AJAX 方法。
    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

    语法:
    $(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。通常为一个文件的路径
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。

    JQuery AJAX操作函数


    get()/post()


    jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

    • GET - 从指定的资源请求数据
    • POST - 向指定的资源提交要处理的数据

    GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
    POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

    get语法:
    $.get(URL,callback);

    • 必需的 URL 参数规定您希望请求的 URL。
    • 可选的 callback 参数是请求成功后所执行的函数名。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.get("/example/jquery/demo_test.asp",function(data,status){
          alert("数据:" + data + "\n状态:" + status);
        });
      });
    });
    </script>
    </head>
    <body>
    
    <button>向页面发送 HTTP GET 请求,然后获得返回的结果</button>
    
    </body>
    </html>
    

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

    • 必需的 URL 参数规定您希望请求的 URL。(通常为一个文件的路径)
    • 可选的 data 参数规定连同请求发送的数据。
    • 可选的 callback 参数是请求成功后所执行的函数名。


    noConflict() 方法



    在页面上使用 JQuery 和其他框架


    JQuery使用\(符号作为 JavaScript 的简写。
    noConflict() 方法会释放会 \) 标识符的控制,这样其他脚本就可以使用它了。

    示例1

    <script>
    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行!");
      });
    });
    </script>
    

    示例2
    如果你的 jQuery 代码块使用 \( 简写,并且您不愿意改变这个快捷方式,那么您可以把 \) 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

    $.noConflict();
    jQuery(document).ready(function($){
      $("button").click(function(){
        $("p").text("jQuery 仍在运行!");
      });
    });//namespace
    

    HTML,遍历,AJAX,杂项

    标签:获得   属性   状态   img   路径   特定   返回   标识符   sync   

    原文地址:https://www.cnblogs.com/Actstone/p/html-bian-liajax-za-xiang.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!