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:

上一篇:20191028 Codeforces Round #534 (Div. 1) - Virtual Participation


下一篇:Jquery学习笔记:操作form表单元素之一(文本框和下拉框)