您的位置：首页 > Web前端 > JQuery

jQuery的简单入门练习

2016-09-28 14:22 519 查看 
<html>
<head>
<meta charset="utf-8">
<title>jQuery的练习</title>
<script src="jquery.js"></script>

<script language="javascript">
$("document").ready(function(){
$("#p1").click(function(){
alert($("#p3").text());
});

$("#p2").click(function(){
alert($("#p3").html());
});

$("#b1").click(function(){
alert($("#b2").val());
});

$("#a1").click(function(){
alert($("#a2").attr("href"));
});

$(".b1").click(function(){
$(".p1").text("欢迎加入柠檬");
});

$(".b2").click(function(){
$(".p2").html("也欢迎你加入柠檬");
});

$(".b3").click(function(){
$(".p3").val("柠檬棒棒哒");
});

$(".s1").click(function(){
$(".s2").append("<b>棒棒哒;</b>");
});

$(".f1").click(function(){
$(".f2").prepend("<b>柠檬人;</b>");
});

$("#q1").click(function(){
$("img").before("<i>美女;</i>");
});

$("#q2").click(function(){
$("img").after("<i>帅哥;</i>");
});

$("#g1").click(function(){
$("#g2").remove();
});

$("#k1").click(function(){
$("#k2").empty();
});

$("#c1").click(function(){
$("h2,i").addClass("col");
});

$("#c2").click(function(){
$("h2").removeClass("col");
});

$("#c3").click(function(){
$("h4").toggleClass("col");
});

$("#d1").click(function(){
//$("p").css("background-color","purple");
$("p").css({"background-color":"purple","font-size":"26px"});
});

});
</script>
<style type="text/css">
.col{
color:red;
font-size:28px;
}

</style>
</head>
<body>
<h3>1:text() - 设置或返回所选元素的文本内容;
html() - 设置或返回所选元素的内容（包括 HTML 标记）
</h3>
<div>
<p id="p3">这是段落中的<b>粗体</b>文本</p>
<button id="p1">显示文本</button>
<button id="p2">显示HTML</button>
</div>
<br/><hr>
<h3>2:val() - 设置或返回表单字段的值</h3>
<div>
名称：<input type="text" id="b2" value="柠檬学院"/>
<button id="b1">显示值</button>
</div>
<h3>3:获取属性 - attr();jQuery attr() 方法用于获取属性值。</h3>
<div>
<a id="a2" href="http://www.bjlemon.com">柠檬学院</a><br/>
<button id="a1">显示href属性的值</button>
</div>
<br><hr>
<h3>4:设置内容 - text()、html() 以及 val();
text() - 设置或返回所选元素的文本内容;
html() - 设置或返回所选元素的内容（包括 HTML 标记）;
val() - 设置或返回表单字段的值
</h3>
<div>
<p class="p1">这是一个段落</p>
<p class="p2"><b>这是另一个段落</b></p>
输入框：<input class="p3" type="text" value="柠檬学院"/><br/><br/>
<button class="b1">设置文本</button>
<button class="b2">设置HTML</button>
<button class="b3">设置值</button>
</div>
<br/><hr>
<h3>5:append() - 在被选元素的结尾插入内容;
prepend() - 在被选元素的开头插入内容;
after() - 在被选元素之后插入内容;
before() - 在被选元素之前插入内容
</h3>
<p class="s2">柠檬学院</p>
<button class="s1">末尾添加文本</button>
<p class="f2">柠檬学院</p>
<button class="f1">开头插入文本</button>
<br/>
<img src="index.jpg"/><br/>
<button id="q1">之前</button>
<button id="q2">之后</button>
<br><hr>
<h3>6:remove() - 删除被选元素（及其子元素）;empty() - 从被选元素中删除子元素
</h3>
<div id="g2" style="width:200px;height:200px;background-color:pink">
<p>柠檬学院棒棒哒</p>
<p>我要成为柠檬人</p>
<p>为了柠檬而奋斗</p>
</div>
<button id="g1">删除</button>
<hr>
<div id="k2" style="width:200px;height:200px;background-color:pink">
<p>柠檬学院棒棒哒</p>
<p>我要成为柠檬人</p>
<p>为了柠檬而奋斗</p>
</div>
<button id="k1">删除</button>
<br><hr>
<h3>7:addClass() - 向被选元素添加一个或多个类;
removeClass() - 从被选元素删除一个或多个类;
toggleClass() - 对被选元素进行添加/删除类的切换操作;
css() - 设置或返回样式属性;
</h3>
<h2>柠檬学院</h2>
<i>柠檬人</i><br/>
<button id="c1">为元素添加css样式</button>
<button id="c2">删除元素的css样式</button><br/>
<h4>柠檬人加油！！！</h4>
<button id="c3">切换css</button>
<br><hr>
<h3>
8:css() 方法设置或返回被选元素的一个或多个样式属性。
</h3>
<div>
<p style="background-color:red;">柠檬学院</p>
<p style="background-color:yellow;">柠檬学院</p>
<p style="background-color:pink;">柠檬学院</p>
<p style="background-color:blue;">柠檬学院</p>
</div>
<button id="d1">设置css样式</button>

</body>
</html>






内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航