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

来源：互联网发布：java python 区别编辑：程序博客网时间：2024/06/16 00:06

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 onclick="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

阅读全文

0 0