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

一、获得和设置内容 

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

  • text() - 设置或返回所选元素的文本内容, 得到匹配元素集合中每个元素的文本内容结合,包括他们的后代, 即由所有匹配元素包含的文本内容组合起来的文本
  • html() - 设置或返回所选元素的内容(包括 HTML 标记),从匹配的第一个元素中获取HTML内容
  • val() - 设置或返回表单字段的值,获取匹配的元素集合中第一个元素的当前值,主要用于获取表单元素的值, 至于  元素, .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("
    hello
    ").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);
      });
      //指定的 
      元素的宽度和高度 $("button").click(function(){ $("#div1").width(500).height(500); });

      refer:

    • http://www.w3school.com.cn

你可能感兴趣的:(jQuery学习笔记1——操作属性)