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

时间：2023-12-29 21:29:32

一、获得和设置内容

三个简单实用的用于 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：

相关文章