jQuery HTML

原创已于 2022-09-20 09:38:34 修改

· 415 阅读

0 ·

版权

文章标签：

#jquery #html #javascript

于 2022-08-27 10:26:42 首次发布

jQuery 专栏收录该内容

4 篇文章

订阅专栏

1.捕获

1）DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

2）获得内容 - text()、html() 以及 val()

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

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

<script>
$(document).ready(function(){
//点击id为btn1的按钮
  $("#btn1").click(function(){
//弹窗提示Text:和id为text的文本内容
    alert("Text: " + $("#test").text());
  });
//点击id为btn2的按钮
  $("#btn2").click(function(){
//弹窗提示Text:和id为text的html内容
    alert("HTML: " + $("#test").html());
  });
});
</script>

<script>
$(document).ready(function(){
    //点击元素button，出现提示：值为：id为test的值
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>

3）获取属性 - attr()

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    //显示内容为：id为runoob的网址属性值
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

2.设置内容和属性（与1有关联）

1）设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

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

//点击id为btn1的元素，实现的功能为将id为test1的文本内容换成Hello world！
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
//点击id为btn2的元素，实现的功能为将id为test2的文本内容换成Hello world！并加粗
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
//点击id为btn3的元素，实现的功能为将id为test3的框值替换成RUNOOB
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

2）text()、html() 以及 val() 的回调函数

jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

//有两个参数，元素下标，原始文本内容
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
//多一个加粗html
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

3）设置属性 - attr()

attr() 方法也用于设置/改变属性值。

$("button").click(function(){
//替换href为新的url
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

//替换href为新的url，并且文本内容更还成jQuery教程
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery教程"
    });
});

3.添加元素

1）添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

2）几种方法

append() 方法与prepend() 方法

//结尾添加
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
//开头添加
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在开头追加文本</b>。 ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在开头添加列表项</li>");
	});
});

JavaScript 代码

function appendText(){
	var txt1="<p>文本--1。</p>";              // 使用 HTML 标签创建文本
	var txt2=$("<p></p>").text("文本--2。");  // 使用 jQuery 创建文本
	var txt3=document.createElement("p");
	txt3.innerHTML="文本--3。";               // 使用 DOM 创建文本 text with DOM
	$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>

<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>

after() 和 before() 方法

$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
});

JavaScript 代码

<script>
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);          // 在图片后添加文本
}
</script>
<img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()">之后插入</button>

4.删除元素

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

//全部都会删除
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
//删除子元素
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});

//可添加参数
$(document).ready(function(){
  $("button").click(function(){
//移除类名为iitalic的p元素
    $("p").remove(".italic");
  });
});

5.获取并设置 CSS 类

1）操作CSS

拥有若干进行 CSS 操作的方法。

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

2）addClass() 方法

//CSS样式
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
//对不同类型的操作
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
//添加多个类
$("button").click(function(){
  $("body div:first").addClass("important blue");
});

3）removeClass() 方法

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

4）toggleClass() 方法

//被选元素进行添加/删除类的切换操作
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

6.css() 方法

1）返回 CSS 属性

<script>
$(document).ready(function(){
  $("button").click(function(){
//返回第一个p元素
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#c9d8cd">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
</body>

2）设置 CSS 属性

$(document).ready(function(){
  $("button").click(function(){
//替换背景值
    $("p").css("background-color","yellow");
  });
});

3）设置多个 CSS 属性

//更换背景和字体变成原来的二倍
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>

7.尺寸

1）jQuery 提供多个处理尺寸的重要方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

2）width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

3）innerWidth() 和 innerHeight() 方法

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

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

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});