视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中Dom的基本操作小结_jquery
2020-11-27 21:18:58 责编:小采
文档


jquery中各个节点的基本操作
代码如下:




jquery中的Dom操作



你最喜欢的水果是?



  • 苹果

  • 香蕉

  • 西瓜

  • 你最喜欢的水果是?
    你最喜欢的水果是?







    $(function(){
    $("#btnFind").click(function(){
    //查找元素节点
    var getValue= $("ul li:eq(1)").text();//获取第二个元素的值
    alert(getValue);

    //查找属性节点 attr()方法的参数可以是一个,也可以是两个,当参数是一个时,则是要查询的属性的名字,两个时,则是赋值
    var para=$("p");
    var p_text=para.attr("title");//获取

    元素节点属性的title
    alert(p_text);
    alert(para.attr("title","改变你最喜欢吃的水果").attr("title"));//首先改变title的值,然后在取title的值
    });

    //创建节点 append(),prepend()加载元素的内部,为父子关系,after(),before()加在元素的前后,为兄弟光系
    $("#btnCreate").click(function(){
    var html=$("

  • 桃子
  • 菠萝
  • ");
    // $("ul").append(html);//默认会加在ul最后面
    // var li2=$("ul li:eq(1)").after(html);//加在第二个li后面
    var li2=$("ul li:eq(1)").before(html);//加在第二个li前面
    });

    $("#btnDelete").click(function(){
    // var li2=$("ul li:eq(1)").remove();//删除第二个li元素
    //$("ul").append(li2);//把刚才删除的节点又重新添加到ul元素里

    var li2=$("ul li:eq(1)").empty();//清空第二个节点
    });

    $("#btnCopy").click(function(){
    $("p").clone().appendTo("ul");
    });

    $("#btnReplace").click(function(){
    $("p").replaceWith("你最不喜欢的水果是?哈哈");
    });

    $("#btnWrap").click(function(){
    // $("strong").wrap("");//用标签把元素包裹起来,是将所有的元素进行单独包裹
    // $("strong").wrapAll("");//wrapAll()是将所有的元素进行一起包裹,可以通过firebug查看
    $("strong").wrapInner("");//是将strong的内容(包括文本节点)用进行包裹
    });

    })






    jquery中属性和样式的基本操作
    代码如下:




    属性操作




    你最喜欢的水果是?



  • 苹果

  • 香蕉

  • 西瓜





  • $(function(){
    $("#btnSetOrGetAttr").click(function(){
    var p = $("p").attr("title");//获取属性
    alert(p);
    var pSet=$("p").attr("title","这是我重新设置的title属性哈");
    alert(pSet.attr("title"));//获取重新设置后的title
    });

    $("#btnDeleteAttr").click(function(){
    var p=$("p").removeAttr("title");
    alert(p.attr("title"));
    });

    $("#btnSetOrGetStyle").click(function(){
    var p=$("p").attr("class");//获取p元素的class
    alert(p);
    var pSet=$("p").attr("class","height");//设置class为height;
    alert(pSet.attr("class"));//获取设置后的class
    });

    $("ul li").click(function(){
    $(this).addClass("another");//给li追击another类,此时第一个li会有两个class的值,则会合并样式,并且对于同一个样式属性,后者覆盖前者
    });

    $("#btnRemoveStyle").click(function(){
    // $("ul li").removeClass("height");//表示移除一个样式
    // $("ul li").removeClass("height another");//代表移除两个样式
    $("ul li").removeClass();//代表移除li所有的class

    //判断是否含有某个样式,如果有,则返回true,否则false
    var flag = $("p").hasClass("another");//等价于 $("p").is(".another");
    alert(flag);
    });
    })



    下载本文
    显示全文
    专题