jQuery - 获取内容和属性

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

jQuery DOM 操作

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

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

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

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

"W3C 文档对象模型  独立于平台和语言的界面，

允许  程序和脚本  动态  访问和更新  文档的内容、结构以及样式。"

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

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

  • text() - 设置或返回所选元素的  文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回  表单字段的值

下面的例子演示如何通过 jQuery   text() 和 html() 方法来获得内容：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><button class="class_btn class_btn_green" type="button" >点我试试</button><p id="id_p_hana">那朵<b>花</b></p><input name="girlname" type="text" value="mathilda" /><a id="id_a_hana" href="http://baidu.com/s?wd=anohana">あの花</a><script type="text/javascript">$(document).ready(// 匿名函数function() {// 添加点击事件$(".class_btn_green").click(function() {// jQuery对象var pHanaObject = $("#id_p_hana");NSLog("text: " + pHanaObject.text());NSLog("html: " + pHanaObject.html());// name属性的值是girlName的元素var inputNameObject = $("[name='girlname']");NSLog("val: " + inputNameObject.val());// 获取属性值var aObject = $("#id_a_hana");NSLog("href: " + aObject.attr("href"));});});</script><p class="sgcenter"><b>注意:</b>text()、html()、val()和attr()</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

下面的例子演示如何通过 jQuery val() 方法获得  输入的表单字段的值：

核心代码:

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()

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

下面的例子演示如何获得链接中 href 属性的值：

实例

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

下一章会讲解如何设置（改变）内容和属性值。

jQuery - 设置内容和属性

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

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

  • text() -   设置或返回   所选元素的  文本内容

  • html() -  设置或返回  所选元素的内容（包括 HTML 标记）

  • val() -    设置或返回  表单字段的值value

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><button id="id_btn_read" class="class_btn class_btn_green" type="button" >读取元素</button><button id="id_btn_assign" class="class_btn class_btn_green" type="button" >设置元素</button><p id="id_p_hana">那朵<b>花</b></p><input name="girlname" type="text" value="mathilda" /><a id="id_a_hana" href="http://baidu.com/s?wd=anohana">あの花</a><script type="text/javascript">$(document).ready(// 匿名函数function() {// 添加点击事件$("#id_btn_read").click(function() {// jQuery对象var pHanaObject = $("#id_p_hana");NSLog("text: " + pHanaObject.text());NSLog("html: " + pHanaObject.html());// name属性的值是girlName的元素var inputNameObject = $("[name='girlname']");NSLog("val: " + inputNameObject.val());// 获取属性值var aObject = $("#id_a_hana");NSLog("href: " + aObject.attr("href"));});// 添加点击事件$("#id_btn_assign").click(function() {// jQuery对象var pHanaObject = $("#id_p_hana");// 设置htmlpHanaObject.html("<b style='color:teal;'>那朵花</b>")// name属性的值是girlName的元素var inputNameObject = $("[name='girlname']");// 设置valueinputNameObject.val("lolita");// a标签var aObject = $("#id_a_hana");// 设置textaObject.text("anohana");// 设置hrefaObject.attr("href","http://baidu.com/s?wd=あの花");});});</script><p class="sgcenter"><b>注意:</b>text()、html()、val()和attr()</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

$("#btn1").click(function(){ 
  $("#test1").text("Hello beyond!"); 
}); 
$("#btn2").click(function(){ 
  $("#test2").html("<b>Hello beyond!</b>"); 
}); 
$("#btn3").click(function(){ 
  $("#test3").val("mathilda"); 
});

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

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。

回调函数由两个参数：被选元素列表中  当前元素的下标，以及原始（旧的）值。

对于参数1的理解是: 有可能选择器选择出来的不只一个元素哈~

然后以  函数新值  返回(return)您希望使用的新的字符串。

下面的例子演示带有 回调函数 的 text() 和 html()：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><b style="color:red;">text演示:</b><p id="id_p_zh">我们仍未知道<b style="color:teal;">那年夏天</b>所见到的<b style="color:teal;">花的名字</b></p><b style="color:red;">html演示:</b><p id="id_p_jp">あの日見た<b style="color:purple;">花の名前</b>を僕達はまだ知らない</p><button id="id_btn_readText" class="class_btn class_btn_green" type="button" >读写text</button><button id="id_btn_readHtml" class="class_btn class_btn_green" type="button" >读写html</button><script type="text/javascript">$(document).ready(function() {// 绑定点击$("#id_btn_readText").click(function() {// 设置p的text,参数是一个函数// 该函数的参数1是 index// 该函数的参数2是 old内容// 该函数的返回值是 要设置的new 内容$("#id_p_zh").text(function(index,oldText) {//NSLog("index: " + index + "\nold text: " + oldText);// 返回新的,要设置的txtreturn "那朵花";});});// 绑定点击$("#id_btn_readHtml").click(function() {// 设置p的html,参数是一个函数// 该函数的参数1是 index// 该函数的参数2是 old内容// 该函数的返回值是 要设置的new 内容$("#id_p_jp").html(function(index,oldHtml) {//NSLog("index: " + index + "\nold html: " + oldHtml);// 返回新的,要设置的 htmlreturn "<b style='color:green;'>あの</b>";});});});</script><p class="sgcenter"><b>注意:</b>text()、html()、val()和attr()<br/>回调函数演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

$("#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 + ")"; 
  }); 
});

设置属性 - attr("属性名","属性值")

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

下面的例子演示如何改变（设置）链接中 href 属性的值：

核心代码:

$("button").click(function(){ 
  $("#id_p").attr("href","//www.baidu.com/jquery"); 
});

attr() 方法也允许您 同时设置多个属性。使用对象即可

下面的例子演示如何同时设置 href 和 title 属性：

实例

$("button").click(function(){ 
  $("#id_a").attr({ 
    "href" : "//www.baidu.com/jquery", 
    "title" : "jQuery 教程" 
  }); 
});

attr("属性名",匿名函数) 的回调函数

jQuery 方法 attr()，也提供回调函数。

回调函数由2个参数：

1.被选元素列表中  当前该元素所处的下标，

2.以及原始（旧的）值。

然后以函数新值return返回您希望设置成的新的属性值。

下面的例子演示带有回调函数的 attr() 方法：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><b style="color:red;">修改 属性值 演示:</b><br/><a id="id_a" href="menma.png" target="_self">我们仍未知道<b style="color:teal;">那年夏天</b>所见到的<b style="color:teal;">花的名字</b></a><br/><button id="id_btn_setAttr" class="class_btn class_btn_green" type="button" >修改1个</button><button id="id_btn_setAttrs" class="class_btn class_btn_green" type="button" >修改2个</button><button id="id_btn_setAttrCallBack" class="class_btn class_btn_green" type="button" >回调修改</button><script type="text/javascript">$(document).ready(function() {// 绑定点击$("#id_btn_setAttr").click(function() {// 修改1个属性$("#id_a").attr("href","http://localhost/html_157.html");});// 绑定点击$("#id_btn_setAttrs").click(function() {// 同时修改2个属性,参数是对象$("#id_a").attr({"href": "http://localhost/html_499.html","target": "_blank"});});// 绑定点击$("#id_btn_setAttrCallBack").click(function() {// 回调修改,参数1是要修改的属性名,参数2是函数// 函数的参数1是:被选元素列表中  当前该元素所处的下标// 参数2:old 属性值// 返回值: 欲使用的新的属性值$("#id_a").attr("href",function(index,oldAttrValue) {NSLog("index: " + index + "\nold attr value: " + oldAttrValue);// 返回欲使用的新的属性值return "http://127.0.0.1/form_get.html";});});});</script><p class="sgcenter"><b>注意:</b>text()、html()、val()和attr()<br/>回调函数演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

相关文章

对于 jQuery，具有操作 DOM 的能力很重要。

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

详细内容请参考本文附录的“jQuery - DOM 操作”部分的内容

attr() 方法设置或返回被选元素的属性和值。

当该方法用于  返回属性值，则返回 第一个匹配元素的值。

当该方法用于  设置属性值，则为匹配元素设置一个或多个属性/值对。

语法

返回属性的值：

$(selector).attr(attribute)

设置属性和值：

$(selector).attr(attribute,value)

使用 属性名 + 回调函数 来  设置属性和值：

$(selector).attr(attribute,function(index,currentvalue))

如果参数是对象, 则可设置多个属性和值：

$(selector).attr({attribute:value, attribute:value,...})
参数 描述
attribute 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定要返回属性值到集合的函数

  • index - 接受集合中元素的 index 位置。
  • currentvalue - 接受被选元素的当前属性值。

jQuery - 添加元素

通过 jQuery，可以很容易地 添加 新元素/内容。

添加新的 HTML 内容

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

  • append() - 在被选元素内部的结尾插入指定  子元素内容
  • prepend() - 在被选元素内部的开头插入指定 子元素内容
  • after() - 在被选元素之后插入   兄弟元素内容
  • before() - 在被选元素之前插入 兄弟元素内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><p id="id_p_result">那朵花</p><button class="class_btn class_btn_green" type="button" >append追加</button><script type="text/javascript">var i = 0;$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// var element = "<b>"+ ++i +"</b>"$("#id_p_result").append(element);});});</script><p class="sgcenter"><b>注意:</b>append()追加子元素演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><p id="id_p_result">那朵花</p><button class="class_btn class_btn_green" type="button" >prepend追加</button><script type="text/javascript">var i = 0;$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// var element = "<b>"+ ++i +"</b>"$("#id_p_result").prepend(element);});});</script><p class="sgcenter"><b>注意:</b>prepend()在 内部开头 追加子元素演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

通过 append() 和 prepend() 方法添加若干新的子元素

append() 和 prepend() 方法能够通过参数接收无限数量的新的子元素。

我们可以提前通过 jQuery 来 生成 新的子文本/HTML（就像上面的例子那样），

也可以 通过 JavaScript 代码和 DOM 元素 来生成 新的子文本/html。

在下面的例子中，我们创建若干个新子元素。

这些新的子元素可以提前 通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。

然后我们通过 append() 方法  把这些新的子元素追加到文本中（对 prepend() 同样有效）：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><p style="background-color:rgba(255,181,197,0.5);" id="id_p_result">那朵花</p><button class="class_btn class_btn_green" type="button" >append追加</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// var element_1 = "<p>1.龙与虎</p>"var jQueryObject = $("<p></p>");var element_2 = jQueryObject.text("2.食梦者");var element_3 = document.createElement("p");element_3.innerHTML = "3.轻音少女";// 一次性添加n个$("#id_p_result").append(element_1,element_2,element_3);});});</script><p class="sgcenter"><b>注意:</b>append()在 内部结尾 追加子元素演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后  插入 新的兄弟元素 内容。

jQuery before() 方法在被选元素之前  插入  新的兄弟元素 内容。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><p style="background-color:rgba(255,181,197,0.5);" id="id_p_result">那朵花</p><button class="class_btn class_btn_green" type="button" >after追加</button><script type="text/javascript">var i = 0;$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// var element = "<b>"+ ++i +"</b>"$("#id_p_result").after(element);});});</script><p class="sgcenter"><b>注意:</b>after()追加新的兄弟元素演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

实例

$("img").after("在后面添加新的兄弟文本元素");

$("img").before("在前面添加新的兄弟文本元素");

通过 after() 和 before() 方法添加若干新的兄弟元素

after() 和 before() 方法能够通过参数接收无限数量的新的兄弟元素。

可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新的兄弟元素。

在下面的例子中，我们创建若干新的兄弟元素。

这些新的兄弟元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。

然后我们通过 after() 方法把这些新的兄弟元素插到文本中（对 before() 同样有效）：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><p style="background-color:rgba(255,181,197,0.5);" id="id_p_result">那朵花</p><button class="class_btn class_btn_green" type="button" >after追加</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// var element_1 = "<p>1.龙与虎</p>"var jQueryObject = $("<p></p>");var element_2 = jQueryObject.text("2.食梦者");var element_3 = document.createElement("p");element_3.innerHTML = "3.轻音少女";// 一次性添加n个$("#id_p_result").after(element_1,element_2,element_3);});});</script><p class="sgcenter"><b>注意:</b>after()在 后面 追加新的兄弟元素演示</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

实例

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);          // 在图片后添加文本 
}

提示：在jQuery中，append/prepend 是在选择元素内部插入子元素，

而after/before 是在元素外面追加兄弟元素。

jQuery - 删除元素

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

删除元素/内容

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

  • remove() - 删除 被选元素（及其内部的子元素）
  • empty() - 只删除   被选元素中  内部的子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="中国成人教育网-免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div id="id_div_container" style="height:100px;border:1px solid gray;background-color:rgba(0,0,0,0.8);"><p style="background-color:rgba(255,181,197,0.8);color:white;">那朵花</p></div><button class="class_btn class_btn_green" type="button" >remove删除</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// remove,删除元素及其后代$("#id_div_container").remove();});});</script><p class="sgcenter"><b>注意:</b>remove()是删除该元素,及其子元素</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

jQuery empty() 方法

jQuery empty() 方法  只是清空  被选元素的 内部的所有子元素。

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div id="id_div_container" style="height:100px;border:1px solid gray;background-color:rgba(0,0,0,0.8);"><p style="background:rgba(255,181,197,0.8);color:white;" >那朵花</p><p style="background-color:rgba(255,181,197,0.8);color:white;" >龙与虎</p></div><button class="class_btn class_btn_green" type="button" >empty清空</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// empty,只是清空元素内部的子元素$("#id_div_container").empty();});});</script><p class="sgcenter"><b>注意:</b>empty()只是清空 该元素内部的子元素</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--></head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><p name="anime">龙与虎</p><p name="anime">轻音少女</p><p name="girl" style="color:red;">面码</p><p name="girl" style="color:red;">赫萝</p><button class="class_btn class_btn_green" type="button" >remove先过滤再删除</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// remove,删除元素及其后代$("p").remove("[name=anime]");});});</script><p class="sgcenter"><b>注意:</b>remove()是删除该元素,及其子元素<br/>remove()还可以通过参数进行过滤</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

实例

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

jQuery - 获取并设置 CSS 类

通过 jQuery，可以很容易地对 CSS 元素进行操作。切换 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

  • addClass() - 向被选元素添加  一个或多个类 用空格格开

  • removeClass() - 从被选元素删除  一个或多个类  用空格格开

  • toggleClass() - 对被选元素进行  添加/删除  类  的切换操作

  • css() - 设置或返回样式属性

实例样式表

下面的  样式表  将用于本页的所有例子：

.class_anime
{
font-weight:bold;
font-size:x-large;
}

.class_girl
{
color:red;
}

jQuery addClass() 方法

下面的例子展示如何  向不同的元素  添加 class 属性。

当然，在添加类时，您也可以 通过 逗号 选取多个元素：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div name="anime">食梦者</div><p name="anime">龙与虎</p><p name="anime">轻音少女</p><p name="girl">面码</p><p name="girl">赫萝</p><div name="girl">古城荆棘王</div><button class="class_btn class_btn_green" type="button" >addClass</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 用分号分隔,给多个添加元素添加类$("div[name=anime],p[name=anime]").addClass("class_anime");// 用分号分隔,给多个添加元素添加类// 可简写成$("[name=girl]")$("div[name=girl],p[name=girl]").addClass("class_girl");});});</script><p class="sgcenter"><b>注意:</b>addClass()</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

$("button").click(function(){
  $("h1,h2,p").addClass("class_girl");
  $("div").addClass("class_anime");
});

您也可以在 addClass() 方法中,用 空格分隔 添加多个类：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div name="anime">食梦者</div><p name="anime">龙与虎</p><p name="anime">轻音少女</p><p name="girl">面码</p><p name="girl">逢坂大河</p><div name="girl">艾拉</div><button class="class_btn class_btn_green" type="button" >addClass,同时添加多个类,用空格分隔</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 同时添加多个类,用空格分隔$("[name=girl]").addClass("class_girl class_anime");});});</script><p class="sgcenter"><b>注意:</b>addClass(),同时添加多个类,用空格分隔</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

jQuery removeClass() 方法

下面的例子演示如何在 不同的元素 中删除指定的 class 属性：

可同时移除多个class,用空格分隔即可

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div name="anime" class="class_anime">食梦者</div><p name="anime" class="class_anime">龙与虎</p><p name="anime" class="class_anime">轻音少女</p><p name="girl" class="class_girl">面码</p><p name="girl" class="class_girl">逢坂大河</p><div name="girl" class="class_girl">艾拉</div><button class="class_btn class_btn_green" type="button" >removeClass</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 同时移除多个类,用空格分隔$("div,p").removeClass("class_anime class_girl");});});</script><p class="sgcenter"><b>注意:</b>removeClass(),同时移除多个类,用空格分隔</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");  // 可同时移除多个类,用空格分隔即可
});

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。

该方法对被选元素进行添加/删除类的切换操作：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div name="anime" class="class_anime">食梦者</div><p name="anime" class="class_anime">龙与虎</p><p name="anime" class="class_anime">轻音少女</p><p name="girl" class="class_girl">面码</p><p name="girl" class="class_girl">逢坂大河</p><div name="girl" class="class_girl">艾拉</div><button class="class_btn class_btn_green" type="button" >removeClass</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 同时移除多个类,用空格分隔$("div[name],p[name]").toggleClass("class_anime class_girl");});});</script><p class="sgcenter"><b>注意:</b>toggleClass(),添加与移除进行切换,多个类请用空格分隔</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");  // 多个class可用空格分隔
});

jQuery - css() 方法

jQuery css() Method

css() 方法  设置或返回  被选元素的  一个或多个  样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法:

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><button class="class_btn class_btn_green" type="button" >查看css样式</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 同时移除多个类,用空格分隔var cssStyle = $("h1").css("background-color");NSLog("背景色: " + cssStyle);var textShadow = $("h1").css("text-shadow");NSLog("text-shadow: " + textShadow);});});</script><p class="sgcenter"><b>注意:</b>css(),设置或返回一个或多个css样式</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><button class="class_btn class_btn_green" type="button" >设置css样式</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 同时移除多个类,用空格分隔var cssStyle = $("body").css("background-color","black").css("color","white");});});</script><p class="sgcenter"><b>注意:</b>css(),设置或返回一个或多个css样式</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

参数只有1个对象

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><button class="class_btn class_btn_green" type="button" >设置css样式</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {// 同时移除多个类,用空格分隔var cssStyle = $("body").css({"background-color" : "black","color" : "white"});});});</script><p class="sgcenter"><b>注意:</b>css(),设置或返回一个或多个css样式<br/>设置多个css样式时,参数只有1个对象</p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

jQuery - 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸 方法

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

  • width()   单纯的content width
  • height()  单纯的content height
  • innerWidth()   盒子内部的空间(content + padding)
  • innerHeight()  盒子内部的空间(content + padding)
  • outerWidth()   盒子的大小(content + padding + border)
  • outerHeight()  盒子的大小(content + padding + border)
  • outerWidth(true)  盒子的大小 + margin
  • outerHeight(true)  盒子的大小 + margin

jQuery 尺寸

jQuery width() 和 height() 方法

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

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

下面的例子返回指定的 <div> 元素的宽度和高度：

核心代码:

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

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回:  元素的content宽度 + 内边距 padding 之后的盒子内部空间宽度。

innerHeight() 方法返回: 元素的content高度 + 内边距 padding 之后的盒子内部空间高度。

下面的例子返回指定的 <div> 元素的 inner-width/height：

核心代码:

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

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回:  盒子整个的宽度,即 元素的content宽度+内边距padding + 边框border。

outerHeight() 方法返回: 盒子整个的高度,即 元素的content高度+内边距padding + 边框border。

下面的例子返回指定的 <div> 元素的 outer-width/height：

代码如下:

<!DOCTPYE html>
<html lang="zh">
<head>  <link rel="icon" href="beyond.jpg" type="image/x-icon"/><meta charset="UTF-8"><meta name="author" content="beyond"><meta http-equiv="refresh" content="520"><meta name="description" content="免费零基础教程"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /><meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY"><title>beyondの心中の动漫神作</title><link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css"><script type="text/javascript" src="nslog.js"></script><!--[if lt IE 9]><script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><![endif]--><style type="text/css">body{font-size: 100%; /*声明margin和padding是个好习惯*/  margin: 0;  padding: 0; background-image: url("sakura4.png");  background-repeat: no-repeat;  background-position: center center;  }</style><!-- 绿色按钮的css效果 --><link rel="stylesheet" type="text/css" href="beyondbuttongreen.css"><!-- 引入 jquery 2.1.4 --><!--[if gte IE 9]><!--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><!--<![endif]--><style type="text/css">.class_anime {font-weight: bold;font-size: x-large;}.class_girl {color: red;}</style>
</head>  <body>  <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  未闻花名</h1><div id="id_div" style="height:50px;width:300px;padding:10px;margin:3px;border:1px solid red;background-color:lightblue;">我们仍未知道那年夏天所见到的花的名字</div><button class="class_btn class_btn_green" type="button" >设置或获得各种宽高</button><script type="text/javascript">$(document).ready(function () {// 绑定事件$(".class_btn_green").click(function() {NSLog("width:300,padding:10,border:1,margin:3px;");// 同时移除多个类,用空格分隔NSLog("width: " + $("#id_div").width());NSLog("innerWidth: " + $("#id_div").innerWidth());NSLog("outerWidth: " + $("#id_div").outerWidth());NSLog("outerWidth(true): " + $("#id_div").outerWidth(true));});});</script><p class="sgcenter"><b>注意:</b>width()   单纯的content width <br/>innerWidth()   盒子内部的空间(content + padding)<br/>outerWidth()   盒子的大小(content + padding + border)<br/>outerWidth(true)  盒子的大小 + margin<br/></p><footer id="copyright"><p style="font-size:14px;text-align:center;font-style:italic;">  Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  </p>        </footer></body>
</html>

效果如下:

核心代码:

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

提示：

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

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

附录:

DOM 操作方法

下表是用来操作 DOM 元素的全部方法 ——

序号 方法 & 描述
1 after( content )

在每一个匹配元素之后插入内容
2 append( content )

在每一个匹配元素内部添加内容。
3 appendTo( selector )

将所有匹配元素添加到另一个指定的元素组中。
4 before( content )

在每个匹配的元素之前插入内容。
5 clone( bool )

克隆匹配的 DOM 元素以及所有的事件处理程序，并选择克隆项。
6 clone( )

克隆匹配的 DOM 元素并选择克隆项。
7 empty( )

从匹配的元素集合中删除所有的孩子节点。
8 html( val )

设置每个匹配元素的 html 内容。
9 html( )

获取第一个匹配元素的 html 内容(内部 HTML)。
10 insertAfter( selector )

将所有的匹配元素插入到另一个指定的元素集合之后。
11 insertBefore( selector )

将所有匹配的元素插入到另一个指定的元素集合之前。
12 prepend( content )

将内容前置到每个匹配元素的内部。
13 prependTo( selector )

将所有匹配元素前置到另一个指定的元素集合中。
14 remove( expr )

从 DOM 中删除所有的匹配元素。
15 replaceAll( selector )

用匹配的元素替换与指定的选择器相匹配的元素。
16 replaceWith( content )

用指定的 HTML 或 DOM 元素代替所有的匹配元素。
17 text( val )

设置所有匹配元素的文本内容。
18 text( )

获取所有匹配元素的组合的文本内容。
19 wrap( elem )

用指定的元素包装每个匹配的元素。
20 wrap( html )

用指定的 HTML 内容包装每个匹配的元素。
21 wrapAll( elem )

将匹配的集合中的全部元素包装到一个单独的元素中。
22 wrapAll( html )

将匹配的集合中的全部元素包装到一个单独的元素中。
23 wrapInner( elem )

用 DOM 元素包装每个匹配元素(包括文本节点)的内部孩子内容。
24 wrapInner( html )

用 HTML 结构包装每个匹配元素(包括文本节点)的内部孩子内容。

jQuery HTML / CSS 方法

下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法。

下面的方法适用于 HTML 和 XML 文档。除了：html() 方法。

方法 描述
addClass() 向被选元素添加一个或多个类名
after() 在被选元素后插入内容
append() 在被选元素的结尾插入内容
appendTo() 在被选元素的结尾插入 HTML 元素
attr() 设置或返回被选元素的属性/值
before() 在被选元素前插入内容
clone() 生成被选元素的副本
css() 为被选元素设置或返回一个或多个样式属性
detach() 移除被选元素（保留数据和事件）
empty() 从被选元素移除所有子节点和内容
hasClass() 检查被选元素是否包含指定的 class 名称
height() 设置或返回被选元素的高度
html() 设置或返回被选元素的内容
innerHeight() 返回元素的高度（包含 padding，不包含 border）
innerWidth() 返回元素的宽度（包含 padding，不包含 border）
insertAfter() 在被选元素后插入 HTML 元素
insertBefore() 在被选元素前插入 HTML 元素
offset() 设置或返回被选元素的偏移坐标（相对于文档）
offsetParent() 返回第一个定位的祖先元素
outerHeight() 返回元素的高度（包含 padding 和 border）
outerWidth() 返回元素的宽度（包含 padding 和 border）
position() 返回元素的位置（相对于父元素）
prepend() 在被选元素的开头插入内容
prependTo() 在被选元素的开头插入 HTML 元素
prop() 设置或返回被选元素的属性/值
remove() 移除被选元素（包含数据和事件）
removeAttr() 从被选元素移除一个或多个属性
removeClass() 从被选元素移除一个或多个类
removeProp() 移除通过 prop() 方法设置的属性
replaceAll() 把被选元素替换为新的 HTML 元素
replaceWith() 把被选元素替换为新的内容
scrollLeft() 设置或返回被选元素的水平滚动条位置
scrollTop() 设置或返回被选元素的垂直滚动条位置
text() 设置或返回被选元素的文本内容
toggleClass() 在被选元素中添加/移除一个或多个类之间切换
unwrap() 移除被选元素的父元素
val() 设置或返回被选元素的属性值（针对表单元素）
width() 设置或返回被选元素的宽度
wrap() 在每个被选元素的周围用 HTML 元素包裹起来
wrapAll() 在所有被选元素的周围用 HTML 元素包裹起来
wrapInner() 在每个被选元素的内容周围用 HTML 元素包裹起来

jQuery 属性操作方法

下面列出的这些方法获得或设置元素的 DOM 属性。

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法 描述
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。

注释：jQuery 文档操作参考手册中也列出了以上方法。本参考页的作用是方便用户单独查阅有关属性操作方面的方法。

jQuery CSS 操作函数

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性 描述
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。

未完待续,下一章节,つづく

jQuery_03_操作HTML和CSS相关推荐

  1. javascript操作html元素CSS属性

    以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css">  .or ...

  2. uniapp修改html样式,关于css:uniapp操作dom改变css样式

    在uniapp中,想给元素增加一些动静的css款式,例如transform, uni.createSelectorQuery().select(".sticke").boundin ...

  3. jQuery 样式操作||操作 css 方法/设置类样式方法

    操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...

  4. jquery关于css,jQuery css操作

    jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: //宽高都是200px,背景颜色红色; 怎么获取div的属性值呢: $("#div").css(&quo ...

  5. JavaWeb开发 前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作

    JavaWeb开发 前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...

  6. jQueryDOM操作

    jQueryDOM操作 1.查找元素属性 在jQuery中查找元素属性非常简单attr("属性名称") var $test=$("span") alert($t ...

  7. CSS background-position随笔

    1.定义和用法 background-position 属性设置背景图像的起始位置. 这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始. ...

  8. jQuery样式操作

    1.attr()方法获取和设置元素的class 用法: 获取 $("element").attr("class"); 设置 $("element&qu ...

  9. 跟着JQuery API学Jquery 之四 css

    在javascript中我们常常要改变dom的css样式 ,同样Jquery也对改变css做了封装不用我们去用 getElementByid().style.--来操作了 1 css 这里只有一个函数 ...

最新文章

  1. wx5 mysql起不来_mysql（四）—–mysql主从配置-wx5bd1240aa20ac的博客
  2. abb智能控制系统_ABB助力国网冀北电力打造虚拟电厂
  3. 最快60秒完成新冠病毒核酸对比 阿里云向社会免费开放基因计算服务
  4. MySQL忘记密码后，修改
  5. 调整oracle数据库编码
  6. 【专利提交】个人通过CPC客户端网上提交专利文稿的完整流程
  7. java word模板生成pdf,java根据模板生成pdf
  8. 儿童故事小程序开发功能
  9. 酷狗计算机自动续费,怎么取消酷狗自动续费-APP自动续费关不了？可在微信支付宝这样操作！...
  10. 苹果笔记本装win7_m2 ngff无线网卡接口的笔记本电脑装苹果网卡
  11. W32TM注册time.windows.com作为权威时间同步源
  12. 强烈建议使用Windows Live Writer发布日志
  13. 段正淳是否是一个卑劣的人？
  14. 静态方法中调用非静态方法
  15. Web应用程序设计十个建议
  16. python 使用excel画图
  17. Java 条件语句 - if...else
  18. 织梦城市分站怎么安装织梦二级域名站群织梦制作企业分站教程
  19. Html+CSS练习（百度注册页面）--div布局实现
  20. JAVA输入1~7输出星期一~星期日

热门文章

  1. win7打开仅计算机黑屏,win7系统打开计算机黑屏的解决方法
  2. Ubuntu PX4无人机仿真环境配置
  3. 实验六 555定时器及应用
  4. 数值计算（一）之解线性方程组（高斯消去法，列选主元消去法，全选主元消去法，杜立特尔分解，克洛特分解，乔里斯基分解）
  5. 探店带货博主推荐：呆头鹅批量剪辑软件高效率批制作二次原创视频，一天批量制作1000+探店带货视频
  6. 2020年从放弃保研到考研上岸北航CS的3000字复习建议
  7. 如何快速构建PLC数据采集系统，为您的设备装一个“黑匣子”？
  8. 7-1 程序改错题2 (6分)
  9. 无接触梯控模组及设备
  10. 阿里云扛把子-阿里云服务器介绍