jQuery学习笔记1——操作属性

一、获得和设置内容 

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容, 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代, 即由所有匹配元素包含的文本内容组合起来的文本
  • html() - 设置或返回所选元素的内容(包括 HTML 标记),从匹配的第一个元素中获取HTML内容
  • val() - 设置或返回表单字段的值,获取匹配的元素集合中第一个元素的当前值,主要用于获取表单元素的值, 至于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选中的 option 的数组
  • prop()-获取在匹配的元素集中的第一个元素的属性值, 如果没有匹配的元素。它返回undefined
  • attr()-获取第一个匹配元素的属性值, 要获取每个单独的元素的属性值, 我们需要依靠jQuery的 .each()或者.map()方法做一个循环

attr()不应该用在普通的对象,数组,窗口(window)或文件(document)上。若要检索和更改DOM属性请使用.prop()方法

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

<!DOCTYPE html>

<html>

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

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

    $("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 

    });

  });



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

    $("#test2").html(function(i,origText){

      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 

    });

  });



});

</script>

</head>

<body>

<p id="test1">这是<b>粗体</b>文本。</p>

<p id="test2">这是另一段<b>粗体</b>文本。</p>

<button id="btn1">显示旧/新文本</button>

<button id="btn2">显示旧/新 HTML</button>

</body>

</html>

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

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

  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

});

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

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

    $("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery"; 

    });

  }); 
<p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>

<button>改变 href 值</button>

.val() 方法主要用于获取表单元素的值。至于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选中的 option 的数组

对于 下拉框(select) 和复选框(checkbox), 你也可以使用:selected 和 :checked选择器来获取值,举个例子:

$('select.foo option:selected').val();    // 从下拉框中获取值

$('select.foo').val();                    // 从一个或更多的下拉框中获取值

$('input:checkbox:checked').val();        // 从选中的复选框中获取值

$('input:radio[name=bar]:checked').val(); // 从单选选框中获取值

二、添加

添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容
  • appendTo()-将匹配的元素插入到目标元素的最后面(里面的后面)
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

The .append().appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面,参数是将要插入的内容。对于.appendTo()刚好相反,内容在方法前面,它将被放在参数里元素的末尾

三、删除和替换

删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() - 删除被选元素(及其子元素), remove() 方法也可接受一个参数,允许您对被删元素进行过滤
  • removeAttr()用提供的内容替换所有匹配的元素
  • empty() - 从被选元素中删除子元素
  • removeProp()-方法用来删除由.prop()方法设置的属性集
  • replaceWith()-用提供的内容替换所有匹配的元素
  • wrap()-在每个匹配的元素外层包上一个html元素
  • wrapAll()-在所有匹配元素外面包一层HTML结构
  • wrapInner()-在匹配元素里的内容外包一层结构
  • <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <script>
    
    $(document).ready(function(){
    
      $("button").click(function(){
    
        $("p").remove(".italic");
    
      });
    
    });
    
    </script>
    
    </head>
    
    <body>
    
    <p>This is a paragraph in the div.</p>
    
    <p class="italic"><i>This is another paragraph in the div.</i></p>
    
    <p class="italic"><i>This is another paragraph in the div.</i></p>
    
    <button>删除 class="italic" 的所有 p 元素</button>
    
    </body>
    
    </html>

变相节点的替换

$("#d1").before("<div>hello</div>").remove().css("color","#f00");

 

 四、操作 CSS

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回被选元素的一个或多个样式属性
  • hasClass()-检查匹配的元素是否含有某个特定的类
  • toggleClass()-切换添加、删除一个或多个类

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性 描述
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法:

  • width():设置或返回元素的宽度(不包括内边距、边框或外边距)
  • height():设置或返回元素的高度(不包括内边距、边框或外边距)
  • innerWidth():返回元素的宽度(包括内边距)
  • innerHeight():返回元素的高度(包括内边距)
  • outerWidth():返回元素的宽度(包括内边距和边框)
  • outerHeight():返回元素的高度(包括内边距和边框)

  更多的 width() 和 height() 

  • //返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度
    
    $("button").click(function(){
    
      var txt="";
    
      txt+="Document width/height: " + $(document).width();
    
      txt+="x" + $(document).height() + "\n";
    
      txt+="Window width/height: " + $(window).width();
    
      txt+="x" + $(window).height();
    
      alert(txt);
    
    });
    //指定的 <div> 元素的宽度和高度
    
    $("button").click(function(){
    
      $("#div1").width(500).height(500);
    
    });

    refer:

你可能感兴趣的:(jquery)