• jquery dom操作


    1.append() $("div[id=myDiv]")append("<b>Langhua</b>");向div元素中增加<b>Langhua</b>,是在div里面内容的后面加
    2.appendTo() $("div[id=myDiv]")appendTo("<b>Langhua</b>");和append()正好相反
    3.prepend() 和append正好相反,把内容加到前面
    4.prependTo() 和appendTo正好相反,也是要把内容加到前面
    5.after() 在每个元素之后插入内容
    6.before() 在每个元素之前插入内容
    
    ================================
    记住append,after就行了,可以考虑下prepend和before,其它反过来都是一样的
    
    删除节点(remove方法)
    7.$("ul li:eq(1)").remove删除ul中li的第2个元素.
    8.$("div span").remove("p[id=pid]") 选择性的删除
    9.$("ul li").remove("li[title!=xxxxx]");选择的删除
    empty方法,不是删除节点,而是清空里面的内容
    10.$("div[id=langhua]").empty();
    
    复制节点clone
    $("div span[id=langhua9527]").click(function(){
        $(this).clone().appendTo("div[id=langhua9528]");
        //复制以后新元素不会有任何功能
        //如想也有这样的功能就这样写
        $(this).clone(true).appendTo("div[id=langhua9528]")
    });
    
    替换节点
    11.$("p").replaceWith("<b>Langhua9527</b>");
    12.$("<b>Langhua9527</b>").replaceAll("p");只是和replaceWith交换了位置
    13.如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件.
    
    包裹节点
    14.$("strong").wrap("<b></b>");
        原来<strong>LangHuA</strong>
        包裹之后<b><strong>LangHuA</strong></b>;
        将匹配的元素都包裹上,有多少个包裹多少个
    15.$("strong").wrapAll("<b></b>");
        原来<strong>LangHuA1</strong><strong>LangHuA2</strong>
        包裹之后<b><strong>LangHuA1</strong><strong>LangHuA2</strong></b>(无论多少个只包裹在一起)
    16.$("strong").wrapInner("<b></b>");
        原来<strong>LangHuA1</strong><strong>LangHuA2</strong>
        包裹之后<strong><b>LangHuA1</b></strong><strong><b>LangHuA2</b></strong>(包裹在里面)
    
    属性操作
    17.获得属性:$("p").attr("title");
    18.设置属性:$("p").attr("title","langhua's title");
    19.删除属必:$("p").removeAttr("title")
    
    样式操作
    20.获得样式:$("p").attr("class");
    21.设置样式:$("p").attr("class","topClass");
    22.追加样式:$("div span[id=langhua]").addClass("addNewClass");(如果有相同的属性,后者覆盖前者)
    23.移除样式:$("#divIdName").removeClass("class1");移除多个样式:$("#xxxxx").removeClass("class1 class2");
    24.切换样式:$("#divId").toggleClass("aabbcc");
    25.判断是否有某个样式:$("#langhuaId").hasClass("topClass")
    
    html()方法
    26.$("div[id=langhua]").html();//获得div中的内容
    27.$("div[id=langhua]").html("<span>value</span>");    //向DIV里面设值
    
    text()方法
    28.$("div[class=className]").text();            //获得DIV里面的text内容
    29.$("div[class=className]").text("xiaoLanghua");    //设置DIV里面的text内容
    
    val()方法
    30.$("input[name=username]").val();            //获得表单里面的value值
    31.$("input[type=hidden][name=username]").val("9527");    //设置表单里面的value值
    
    html方法是取出的是HTML代码,text只是取出的文字
    <div>xiao<b>langhua</b></div>
    html()取的是xiao<b>langhua</b>
    text()取的是xiaolanghua
    val()是取表单里面的值
    
    对select设值$("#selectId").val("value");
    对checkbox设值$("checkbox[name=myname]").value(["value1","value2"]);
    对radio设值$("radio[name=myradio]").value(["value1"]);;
    
    遍历节点
    32.$("div").children();     //获得匹配元素所有的子元素
    33.$("div[id=langhua]").next();    //获得匹配元素后面紧跟的同辈元素
    34.$("div[id=langhua]").prev();    //获得匹配元素前面紧跟的同辈元素
    
    css-dom方法
    35.$("div[id=langhua]").css("color") //获得CSS属性
    36.$("div[id=langhua]").css("color","red");    //设置CSS属性
    37.$("div[id=langhua]").css({"color":"red","backgroudColor":"blue"}); //设置多个属性
    38.$("p").css("opacity","0.5");    //设置透明度,ie,firefox都行的
    39.$("div").height();    //获得高度或设置高度,这里面获得的高度和$("div").css("height")获得的不一样,css方法获得的可能是auto,10px等height()方法是元素在页面的实际高度
    40.width()方法
  • 相关阅读:
    [亲测可用]springBoot调用对方webService接口的几种方法示例
    jdk8获取当前时间|时间加减|java8时间格式化|时间处理工具|时间比较|线程安全的时间处理方法
    python之for循环和while循环的使用教程,小白也能学会的python之路
    [亲测可用]hibernate调用Oracle存储过程|Spring Data JPA调用Oracle存储过程方法
    说说2020年,程序员最难的一年,裁员潮一份好的简历不能少
    几行样式代码,让你的网站全站和图片都变成灰色|CSS样式灰色代码
    python之input()函数的使用——在终端输入想要的值,小白也能学会的python之路
    python之列表的增删用法和python字典的用法,小白也能学会的python之路
    众志成城抗肺炎,程序猿也发挥大作用
    Java并发包中原子操作类原理
  • 原文地址:https://www.cnblogs.com/dancser/p/4165269.html
Copyright © 2020-2023  润新知