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

jquery快速入门(三)

时间:2019-03-18 18:30:35      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:var   指定   tps   keyword   设置   http   空字符串   https   define   

捕获内容和属性

1.DOM 操作

  获得内容 - text()html() 以及 val()

    text() - 设置或返回所选元素的文本内容,如果不带值则是返回值,如果带值则是修改值,如:$(‘p‘).text(‘我要修改原来的文本‘);

    html() - 设置或返回所选元素的内容(包括 HTML 标记),如果不带值则是返回值,如果带值则是修改值,如:$(‘p‘).html("<b>Hello world!</b>");

    val() - 设置或返回表单字段的值,如果不带值则是返回值,如果带值则是修改值,如:$(‘input‘).val("修改input框的默认value值");

  获取属性 - attr() 或 prop()   

    对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法,如果带有属性值则是修改属性值,如果不带属性值则是返回属性值:如 $(‘a‘).attr(‘href‘ : ‘www.guiqingyuang.com‘);

 

    对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。

  例:<a href="https://www.runoob.com" target="_self" class="btn">少时诵诗书</a>

    例子里 <a> 元素的 DOM 属性有: href、target 和 class,这些属性就是 <a> 元素本身就带有的属性,或者说在 IDE 里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用 prop 方法。

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是空字符串。

 

  例:<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

    例子里 <a> 元素的 DOM 属性有: href、id 和 action,很明显,前两个是固有属性,而后面一个 action 属性是我们自己自定义上去的,<a> 元素本身是没有这个属性的。处理这些属性时,建议使用 attr 方法。

    attr 方法还支持同时修改多个属性,如:<a href="http://www.runoob.com" id="runoob">教程坎坎坷坷</a>

      $(document).ready(function(){

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

          $("#runoob").attr({

            "href" : "http://www.runoob.com/jquery",

            "title" : "jQuery 教程"

          });

          // 通过修改的 title 值来修改链接名称

          title = $("#runoob").attr(‘title‘);

          $("#runoob").html(title);

         });

      });

 

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是 undefined。

 text()、html() 以及 val() 的回调函数

    回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

  例:$(document).ready(function(){

      $("#btn1").click(function(){
        $("#test1").text(function(i,origText){ //这里function传两个参数,第一个是下标,第二个参数是原来的值 
          return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
        });
      });

  例:$("#btn2").click(function(){

      $("#test2").html(function(i,origText){ //这里function传两个参数,第一个是下标,第二个参数是原来的值 
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
      });
    });

 

 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

  例:$(document).ready(function(){

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

        $("#runoob").attr("href", function(i, origValue){  //这里function传两个参数,第一个是下标,第二个参数是原来的值 

          return origValue + "/jquery";
        });
      });
    });

 

jquery快速入门(三)

标签:var   指定   tps   keyword   设置   http   空字符串   https   define   

原文地址:https://www.cnblogs.com/hermit-gyqy/p/10553799.html

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