3 、操作元素 (属性 CSS 和文档处理)

3 操作元素—属性 CSS 和文档处理

3.1 属性操作

$("p").text() $("p").html() $(":checkbox").val()

$(".test").attr("alex") $(".test").attr("alex","sb")

$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")

详见实例【返回顶部】：实例之返回顶部【点击链接】

3.1.1、html text val

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>


    <script>

        // html([val|fn])
        $('p').html();
        $("p").html("Hello <b>world</b>!");
        $("p").html(function(n){
        return "这个 p 元素的 index 是：" + n;
        });

        // text（）  text([val|fn]) 取得所有匹配元素的内容。
         $('p').text();
        $("p").text("Hello world!");
        $("p").text(function(n){
            return "这个 p 元素的 index 是：" + n;
            });
        // val([val|fn|arr])
        $("input").val();
        $("input").val("hello world!");
        $('input:text.items').val(function() {
          return this.value + ' ' + this.className;
        });


    </script>
</body>
</html>

html text val

3.1.2、属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>


    <script>

        // html([val|fn])
        $('p').html();
        $("p").html("Hello <b>world</b>!");
        $("p").html(function(n){
        return "这个 p 元素的 index 是：" + n;
        });

        // text（）  text([val|fn]) 取得所有匹配元素的内容。
         $('p').text();
        $("p").text("Hello world!");
        $("p").text(function(n){
            return "这个 p 元素的 index 是：" + n;
            });
        // val([val|fn|arr])
        $("input").val();
        $("input").val("hello world!");
        $('input:text.items').val(function() {
          return this.value + ' ' + this.className;
        });


    </script>
</body>
</html>

3.1.3、class css 类

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
<strong>jQuery 代码:</strong>
<script>

    // addClass(class|fn) addClass 为每个匹配的元素添加指定的类名。
    $("p").addClass("selected");
    $("p").addClass("selected1 selected2");

    $('ul li:last').addClass(function() {
      return 'item-' + $(this).index();
    });

    // removeClass([class|fn])
    $("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类

    //删除匹配元素的所有类
    $("p").removeClass();
    //删除最后一个元素上与前面重复的class
    $('li:last').removeClass(function() {
        return $(this).prev().attr('class');
    });

    //toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。

    //根据父元素来设置class属性
    $('div.foo').toggleClass(function() {
          if ($(this).parent().is('.bar') {
            return 'happy';
          } else {
            return 'sad';
          }
        });

    //每点击三下加上一次 'highlight' 类
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

</script>
</body>
</html>

3.2、 CSS操作

3.2.1(样式) css("{color:'red',backgroud:'blue'}")

3.2.2(位置) offset() position() scrollTop() scrollLeft()

3.2.3(尺寸) height() width()

例子详见【滚动菜单-案例】 滚动菜单【点击链接】

3.3 文档处理

内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

prepend() prependTo()

外部插入 before() insertBefore() after insertAfter()

replaceWith() remove() empty() clone()

例子详见【添加项目和减去 - 案例】 实例之添加项目，减去项目案例【点击链接】

来自为知笔记(Wiz)

3 、操作元素 (属性 CSS 和 文档处理)

3 操作元素—属性 CSS 和 文档处理

3 、操作元素 (属性 CSS 和文档处理)

3 操作元素—属性 CSS 和文档处理