JQuery HTML

最新推荐文章于 2021-06-20 02:00:53 发布

转载最新推荐文章于 2021-06-20 02:00:53 发布 · 656 阅读

文章标签：

#JQuery

JavaEE 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨了jQuery中用于DOM操作的关键方法，包括text(), html(), val()等，并提供了实例演示如何使用这些方法进行文本、HTML内容的设置与获取，以及表单字段的值操作。此外，还详细介绍了如何通过回调函数进行更灵活的操作，如动态修改内容、改变属性等。通过一系列实际应用示例，读者可以快速掌握jQuery的基本用法，提升网页动态交互能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【获取】

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

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

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

});

$("attrButtonId").click(function(){
alert($("#Id").attr("PropertyName"));
});

※PropertyName:id,href,name,etc.

【设置】

text(),html(),val()

$("#textBtnId").click(function(){
$("#textCotentId").text("Hello world!");
});
$("#htmlBtnId").click(function(){
$("#htmlContentId").html("<b>Hello world!</b>");
});
$("#ValueBtnId").click(function(){
$("#valueContentId").val("Hello World");
});

text(),html(),val(),回调函数

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

attr()改变多个属性值

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

attr()改变多个属性值

$("#multiBtnId").click(function(){
$("#multiContentId").attr({
"href" : "http://www.baidu.com/",
"title" : "百度"
});
});

attr()回调函数

$("#attrBtnId").click(function(){
$("#attrContentId").attr("href", function(i,origValue){
return origValue + "/images";
});
});

【添加】

在内容后添加

$("#appendBtnId").click(function(){
$("#appendContentId").append(" <b>注意添加的HTML，要加标签</b>.");
});

添加在下一行

$("#appendBtnId").click(function(){
$("#olId").append("<li>添加新的一行内容</li>");
});

在内容前添加

$("#prependBtnId").click(function(){
$("#prependContentId").prepend("<b>这个在要添加位置前添加内容</b>. ");
});

添加在下一行

$("#prependBtnId").click(function(){
$("#olId").prepend("<li>添加新的一行内容</li>");
});

添加若干元素

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);        // 追加新元素
}

在被选图片前，或者后插入元素

$("#beforeBtnID").click(function(){
$("#imgBeforeId").before("<b>Before</b>");
});

$("#AfterBtnId").click(function(){
$("#imgAfterId").after("<i>After</i>");
});

after() 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 之后插入新元素
}

【删除】

$("#removeBtnId").click(function(){
$("#removeContentId").remove();
});

$("#emptyBtnId").click(function(){
$("#emptyCotentId").empty();
});

删除class为.italic的元素

$("#removeBtnId").click(function(){
$("p").remove(".italic");
});

<p>不会被删除</p>
<p class="italic"><i>会被删除</i></p>
<p class="italic"><i>会被删除</i></p>

【操作CSS】

添加类

$("#addClassBtnId").click(function(){
$("h1,h2,p").addClass("blue");
$("#mydiv").addClass("important");
});

添加多个类

$("#addClassBtnId").click(function(){
$("#div1").addClass("important blue");
});

删除类

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

切换类

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

返回CSS属性

$("#returnCSSProperty").click(function(){
alert("Background color = " + $("#lv").css("background-color"));
});

设置CSS属性

$("setCSSProperty").click(function(){
$("#setCSSContentId").css("background-color","yellow");
});

设置多个CSS属性

$("setMultiCSSProperty").click(function(){
$("#setMultiCSSContentId").css({"background-color":"yellow","font-size":"200%"});
});

【尺寸】

获得尺寸

$("#sizeBtnId").click(function(){
    var txt="";
    txt+="Width of div: " + $("#sizeContentId").width() + "</br>";
    txt+="Height of div: " + $("#sizeContentId").height();
    $("#sizeContentId").html(txt);
});

获得内尺寸

$("#innerSizeBtnId").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

获得外尺寸

$("#outerSizeBtdId").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});

获得内边距边框外边距

$("#outerSizeBtdId").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
    txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});

返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度

$("#domWindowBtnId").click(function(){
    var txt="";
    txt+="Document width/height: " + $(document).width();
    txt+="x" + $(document).height() + "\n";
    txt+="Window width/height: " + $(window).width();
    txt+="x" + $(window).height();
});

调整Div的宽度和高度

$("setterBtnId").click(function(){
$("#div1").width(320).height(320);
});