JQuery详细教程三之HTML(get,add,set,delete方法)

最新推荐文章于 2021-08-02 22:31:46 发布

技术引领者

最新推荐文章于 2021-08-02 22:31:46 发布

阅读量664

点赞数

分类专栏： JQuery 文章标签： JQuery add get set delete

本文链接：https://blog.csdn.net/qq_37022150/article/details/75330227

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery详细教程一介绍了JQuery的简介，安装，语法，选择器，事件;JQuery详细教程二简单介绍了JQuery的效果，比如淡入,淡出，尤其感兴趣的是动画，还有经典的回调函数请关注博客: http://blog.csdn.net/qq_37022150

这篇我们直奔主题，老司机要上车了，请各位做好，系好安全带，准备发车

jQuery 拥有可操作 HTML 元素和属性的强大方法.

JQuery获取内容三板斧，获取属性屠龙刀

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

屠龙刀

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

JQuery设置内容与回调函数，还是原来的配方，原来的味道，继续挥舞三板斧，戏耍屠龙刀

设置内容

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

  $("#test1").text("Hello world!");

});

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

  $("#test2").html("<b>Hello world!</b>");

});

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

  $("#test3").val("Dolly Duck");

});

回调函数

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

测试的时候这个i 的值没有具体显示

解锁屠龙宝刀的三大技能

第一技能与第二技能设置单个属性与设置多个属性

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

宝刀也可以回调

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

JQuery添加追风四侠 append(),prepend(),after(),before()

引领时尚的前侠与叠罗汉的后侠

技能一:

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");

二者的风骚珠联璧合

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function appendText()
{
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button οnclick="appendText()">追加文本</button>

</body>
</html>

山水画中的NO1侠与LAST1侠

技能一:

$("img").after("Some text after");

$("img").before("Some text before");

二者创造处史上平均水平

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

JQuery删除必杀技，你也值得拥有

通过 jQuery，可以很容易地删除已有的 HTML 元素

remove()---斩草除根法

$("#div1").remove();

empty()--隔山杀牛法

$("#div1").empty();

remove() 方法是否过于残暴，那好派个人监督一下，设置过滤条件，比如

$("p").remove(".italic");

更多文章，请关注: http://blog.csdn.NET/qq_37022150?viewmode=list