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>
效果如下:
核心代码:
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
下面的例子演示如何通过 jQuery val() 方法获得 输入的表单字段的值:
核心代码:
alert("Value: " + $("#test").val());
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
实例
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");
// 设置html
pHanaObject.html("<b style='color:teal;'>那朵花</b>")
// name属性的值是girlName的元素
var inputNameObject = $("[name='girlname']");
// 设置value
inputNameObject.val("lolita");
// a标签
var aObject = $("#id_a_hana");
// 设置text
aObject.text("anohana");
// 设置href
aObject.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>
效果如下:
核心代码:
$("#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);
// 返回新的,要设置的txt
return "那朵花";
}
);
}
);
// 绑定点击
$("#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);
// 返回新的,要设置的 html
return "<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>
效果如下:
核心代码:
$("#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 属性的值:
核心代码:
$("#id_p").attr("href","//www.baidu.com/jquery");
});
attr() 方法也允许您 同时设置多个属性。使用对象即可
下面的例子演示如何同时设置 href 和 title 属性:
实例
$("#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>
效果如下:
核心代码:
$(" #id_a").attr("href", function(index,origValue){
return origValue + "/jquery";
});
});
相关文章
对于 jQuery,具有操作 DOM 的能力很重要。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易:
详细内容请参考本文附录的“jQuery - DOM 操作”部分的内容
attr() 方法设置或返回被选元素的属性和值。
当该方法用于 返回属性值,则返回 第一个匹配元素的值。
当该方法用于 设置属性值,则为匹配元素设置一个或多个属性/值对。
语法
返回属性的值:
设置属性和值:
使用 属性名 + 回调函数 来 设置属性和值:
如果参数是对象, 则可设置多个属性和值:
参数 | 描述 |
---|---|
attribute | 规定属性的名称。 |
value | 规定属性的值。 |
function(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>
效果如下:
核心代码:
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>
效果如下:
核心代码:
通过 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>
效果如下:
核心代码:
{
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").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>
效果如下:
实例
{
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>
效果如下:
核心代码:
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>
效果如下:
核心代码:
过滤被删除的元素
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>
效果如下:
实例
jQuery - 获取并设置 CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作。切换 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
addClass() - 向被选元素添加 一个或多个类 用空格格开
removeClass() - 从被选元素删除 一个或多个类 用空格格开
toggleClass() - 对被选元素进行 添加/删除 类 的切换操作
css() - 设置或返回样式属性
实例样式表
下面的 样式表 将用于本页的所有例子:
{
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>
效果如下:
核心代码:
$("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>
效果如下:
核心代码:
$("#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>
效果如下:
核心代码:
$("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>
效果如下:
核心代码:
$("h1,h2,p").toggleClass("blue"); // 多个class可用空格分隔
});
jQuery - css() 方法
jQuery css() Method
css() 方法 设置或返回 被选元素的 一个或多个 样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
下面的例子将返回首个匹配元素的 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>
效果如下:
核心代码:
设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:
下面的例子将为所有匹配元素设置 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>
效果如下:
核心代码:
设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:
参数只有1个对象
下面的例子将为所有匹配元素设置 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>
效果如下:
核心代码:
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> 元素的宽度和高度:
核心代码:
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:
核心代码:
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>
效果如下:
核心代码:
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() | 设置或返回匹配元素的宽度。 |
未完待续,下一章节,つづく