jquery DOM操作

页面导航:首页 > 网络编程 > JavaScript > jquery DOM操作

jquery DOM操作

来源: 作者: 时间:2016-02-05 11:06 【

标题 1 2 3 1 dom节点: 元素节点: var $li = $( nm

标题

  • 1
  • 2
  • 3


1 dom节点:

元素节点:

var $li = $(".nm_ul li : eq(3) " ); //获取第二元素节点

var li_txt = $li.text( ); //获取第二元素节点的text

2 元素属性节点:

var p_txt=$(".nm_p").attr( 'title' );

3 添加节点:

var $li_1 = $("

  • aaa
  • ");

    var $li_2 = $("

  • bbb
  • ");

    var $app = $(".nm_ul");

    $app.appent($li_1);// ul中添加到

  • 节点

    4 插入节点:

    Hello!


    $("").appentTo("p");

    $("p").appent("");

    $("p").before("");

    $("p").after("");

    5 节点元素的属性设置:

    $("p").attr("title":"标题","name":"正文内容"); //属性名/值

    $("p").removeAttr("title"); //删除属性

    6 样式设置、追加、移除、替换:

    . meetings{

    background-color: #FF4400;

    color: #fff;

    }
    . another{

    background-color : #f8f8f8;

    color: red;

    text-align: center;

    }

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

    $("p").addClass("another");//一个元素添加了多个class值,相当于合并了样式;不同的class设定同一样式属性,则后者覆盖前者。

    $("p").removeClass("meetings another");//移除class样式

    });

    $().toggle(function(){ //toogle()方法,交替执行两个函数,重复切换

    $("p").addClass("meetings");

    },function(){

    $("p").addClass("another"); // $("p").css("color","red");

    });

    if( $("p").hasClass("meetings")){ //判断是否含有某个样式,等同于 $("p").is(".meetings");

    $("p").addClass("another");

    }

    7 获取内容、文本或值

    $("p").html();

    $("p").html("aaaaaaaaaaaa.......");

    $("p").text();

    $("p").text("bbbbbbbbbbbbb.......");

    $("input_1").val();

    $("input_1").val(”cccccccccc.......“);

    8 操作style属性

    $("p").css("color"); //获取p元素的颜色样式

    $("p").css("color" , "red");

    $("p").css({"color":"red","font-size":"30px","font-family": "inherit";}); //多个样式设置

    $("p").css("height"); //与样式设置有关

    $("p").height(); //元素在页面的实际高度 -对应的还有一个width

    var off = $("p").offset(); //获取p元素的offset()

    var left = off.left;

    var top = off.top;


  • Tags:

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <