jQuery学习 三 jQuery HTML
三 jQuery HTML
(1) jQuery 捕获
获得内容 - text()、html() 以及 val() 获取属性 - attr()
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
1,text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
2,html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
3,val() - 设置或返回表单字段的值
<body>
<input type="text" name="sex" value="1" />性别
<br/>
<button id="btn">提交</button>
</body>
$("#btn").click(function(){
var vals = $("input[name=sex]").val();
alert(vals);
});
4,attr() 方法用于获取属性值
<body>
<p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p>
<button>显示 href 属性的值</button>
</body>
$("button").click(function(){
alert($("#runoob").attr("href"));
});
(2) jQuery 设置
设置内容 - text()、html() 以及 val()
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="W3Cschool教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("W3Cschool");
});
设置属性 - attr() attr() 方法也用于设置/改变属性值。 attr() 方法也允许您同时设置多个属性
<body>
<p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.w3cschool.cn/jquery",
"title" : "jQuery 教程"
});
});
(3) jQuery 添加元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
<body>
<p>家</p>
<button>追加文本</button>
</body>
$('button').click(function(){
$("p").prepend('大').append('好');
});
<body>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button>添加文本</button>
</body>
$('button').click(function(){
$("ul").prepend('<li>1</li>').append('<li>5</li>');
});
<body>
<p>这是一个段落。</p>
<button οnclick="appendText()">追加文本</button>
</body>
<script>
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<body>
<img src="/statics/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
<body>
<img src="/statics/images/w3c/logo.png" >
<br><br>
<button οnclick="afterText()">之后插入</button>
</body>
<script>
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
</script>
(4) jQuery 删除元素
remove() - 删除被选元素（及其子元素）
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>移除div元素</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
remove也可指定移除如
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
empty() - 从被选元素中删除子元素
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>清空div元素</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
(5) jQuery CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
<style type="text/css">
.important{font-weight:bold;font-size:xx-large;}
.blue{color:blue;}
</style>
<body>
<h1>标题 1</h1>
<h2>标题 2</h3>
<p>这是一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() 方法设置或返回被选元素的一个或多个样式属性。
1,返回 CSS 属性 css("propertyname");
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
$("button").click(function(){
alert("背景颜色 = " + $("p").css("background-color"));
});
2,设置 CSS 属性 css("propertyname","value");
$("p").css("background-color","yellow");
3,设置多个 CSS 属性 css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
(6) jQuery 尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
三 jQuery HTML
(1) jQuery 捕获
获得内容 - text()、html() 以及 val() 获取属性 - attr()
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
1,text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
2,html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
3,val() - 设置或返回表单字段的值
<body>
<input type="text" name="sex" value="1" />性别
<br/>
<button id="btn">提交</button>
</body>
$("#btn").click(function(){
var vals = $("input[name=sex]").val();
alert(vals);
});
4,attr() 方法用于获取属性值
<body>
<p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p>
<button>显示 href 属性的值</button>
</body>
$("button").click(function(){
alert($("#runoob").attr("href"));
});
(2) jQuery 设置
设置内容 - text()、html() 以及 val()
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="W3Cschool教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("W3Cschool");
});
设置属性 - attr() attr() 方法也用于设置/改变属性值。 attr() 方法也允许您同时设置多个属性
<body>
<p><a href="http://www.w3cschool.cn" id="runoob">W3Cschool教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.w3cschool.cn/jquery",
"title" : "jQuery 教程"
});
});
(3) jQuery 添加元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
<body>
<p>家</p>
<button>追加文本</button>
</body>
$('button').click(function(){
$("p").prepend('大').append('好');
});
<body>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button>添加文本</button>
</body>
$('button').click(function(){
$("ul").prepend('<li>1</li>').append('<li>5</li>');
});
<body>
<p>这是一个段落。</p>
<button οnclick="appendText()">追加文本</button>
</body>
<script>
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<body>
<img src="/statics/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
<body>
<img src="/statics/images/w3c/logo.png" >
<br><br>
<button οnclick="afterText()">之后插入</button>
</body>
<script>
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
</script>
(4) jQuery 删除元素
remove() - 删除被选元素（及其子元素）
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>移除div元素</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
remove也可指定移除如
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
empty() - 从被选元素中删除子元素
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>清空div元素</button>
</body>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
(5) jQuery CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
<style type="text/css">
.important{font-weight:bold;font-size:xx-large;}
.blue{color:blue;}
</style>
<body>
<h1>标题 1</h1>
<h2>标题 2</h3>
<p>这是一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() 方法设置或返回被选元素的一个或多个样式属性。
1,返回 CSS 属性 css("propertyname");
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
$("button").click(function(){
alert("背景颜色 = " + $("p").css("background-color"));
});
2,设置 CSS 属性 css("propertyname","value");
$("p").css("background-color","yellow");
3,设置多个 CSS 属性 css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});
(6) jQuery 尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
$("button").click(function(){
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="div 宽度: " + $("#div1").width() + "</br>";
txt+="div 高度: " + $("#div1").height() + "</br>";
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
本文内容题材摘自w3cschool,为自己的学习文章，非教学文章，后面每天会更新内容，直到学完整个jqury. 如需查看题材来源：http://www.w3cschool.cn/jquery/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
