jQuery设置和修改HTML

Love The Way You Lie 2022-09-21 11:49 292阅读 0赞

1.DOM操作  
**获得内容**  
text()–设置或返回所选元素的文本内容  
html()–设置或返回所选内容的内容  
val()–设置或返回表单字段的值

$(document).ready(function(){ 
      $("#btn1").click(function(){ 
        alert("Text: " + $("#test").text());
      });
      $("#btn2").click(function(){ 
        alert("HTML: " + $("#test").html());
      });
    });

**获取属性**  
jQuery attr()方法用于获取属性值

<p><a href="http://www.baidu.com" id="baidu">百度</a></p>
    <button>显示网址</button>
    <script> $("documnet").ready(function(){ $("button").click(function(){ alert($("#baidu").attr("href")); }) }); </script>

**设置内容和属性**

$("#btn1").click(function(){ 
      $("#test1").text("Hello world!");//修改元素中的文本
    });
    $("#btn2").click(function(){ 
      $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){ 
      $("#test3").val("Dolly Duck");
    });

//text().html()以及val()的回调函数
    <p id="tst1">这是一段原始的文本</p>
    <button id="btn1">点击显示文本</button>
    <script> $("document").ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "old text: "+origText+"new text:hello world(index:"+i+")"; }); }); }); </script>

//设置属性
     $("baidu").attr({
     "href"："http://www.baidu.com"
    "title":"百度主页"
    })

//回调属性
    $("button").click(function(){ 
      $("#w3s").attr("href", function(i,origValue){ 
        return origValue + "/jquery";
      });
    });

**添加元素**  
append()–在被选元素的末尾插入内容  
prepend()–在被选元素的开头插入内容  
after()–在被选元素之后插入内容  
before()–在被选元素之前插入内容

//在本文的末尾插入一段文字
    <p>这是一段文字</p>
    <button id="btn1">添加文本</button>
    <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>添加的段落</b>"); }); }); </script>

function appendText() { 
     var txt1="<p>文本</p>";//HTML创建新元素
     var txt2=$("<p></p>").text("文本1");//jquery创建新元素
     var txt3=document.createElement("p");//以DOM创建新元素
     $("p").append(txt1,txt2,txt3);//追加新元素
    }

**删除元素**  
remove()–删除被选元素（及其子元素）  
empty()–从被选元素中删除子元素

<div id="div" style="height:100px;width:300px;border:1px solid">
    这里是一段文本
    </div>
    <button>删除文本及div</div>
    <script> $(document).ready(function(){ $("button").click(function(){ $("#div").remove(); }); }); </script>

//过滤被删除的元素，删除class="italic"的所有p元素
    $("p").remove(".italic");

**获取并设置css类**

addClass()--向被选元素添加一个或多个类 removeClass()--从被选元素中删除一个或多个类 toggleClass()--对被选元素进行添加/删除类的切换操作 css()--设置或返回样式属性

.important
    {
    font-weight:bold;
    font-size:xx-large;
    }
    .blue
    {
    color:blue;
    }
    $("button").click(function(){ 
      $("h1,h2,p").addClass("blue");  $("div").addClass("important");
    });

//添加多个类
    $("button").click(function(){ 
      $("#div1").addClass("important blue");
    });

$("button").click(function(){   $("h1,h2,p").removeClass("blue");
    });

$("button").click(function(){ 
      $("h1,h2,p").toggleClass("blue");
    });

*返回css属性*

$("p").css("background-color");

*设置css属性*

$("p").css({
       "background-color":"yellow","font-size":"200%"})

**尺寸**  
width:设置或返回元素的宽度（不包括内边距，边框，外边距），只是内容  
height：返回元素的高度

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>显示 div 的尺寸</button>
    <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height(); $("#div1").html(txt); }); }); </script>

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。  
outerWidth() 方法返回元素的宽度（包括内边距和边框）。  
outerHeight() 方法返回元素的高度（包括内边距和边框）。  
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。  
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。