单击某一段文字改写文本颜色,方法用法实例

By admin in 4858美高梅 on 2019年7月28日

说明:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>loading</title>
<script src=”../scripts/jquery-1.3.1.js”
type=”text/javascript”></script>
<style>
单击某一段文字改写文本颜色,方法用法实例。.container{
width: 60%;
margin: 0 auto;
border:1px solid #666;
}
.comment{
background-color: #cfcfcf;
}

jQuery中toggleClass()方法用法实例,jquerytoggleclass

本文实例叙述了jQuery中toggleClass()方法用法。共享给我们供我们参考。具体解析如下:

此方法对丰裕或移除匹配成分的三个或两个类进行切换。
toggleClass()方法检查相配成分中钦定的类。如若海市蜃楼则增加类,假设已设置则删除之。那就是所谓的切换效果。

语法结构一:

复制代码 代码如下:

$(selector).toggleClass(class,switch)

若果存在(荒诞不经)就删除(增添)叁个类。

参数列表:

参数 描述
class 规定添加或删除的类。
如果需要添加多个类,使用空格间隔。
switch 可选。布尔值,为true则加上对应的class,否则就删除。

实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”” />
<title>帮客之家</title>
<style type=”text/css”>
.content{display:none;}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“button”).click(function(){
    $(“div”).toggleClass(“content”);
4858美高梅,  })
}) 
</script>
</head>
<body>
<button>增多越来越多内容</button>
<div class=”content”><textarea cols=”40″ rows=”5″
name=”textarea”></textarea></div>
</body>
</html>

语法结构二:

复制代码 代码如下:

$(selector).toggleClass(function(index,class),switch)

把函数的再次回到值作为切换的类。

参数列表:

参数 描述
function(index,class) 函数定义返回需要添加或删除的一个或多个类名。
index – 可选,接受选择器的索引位置。
class – 可选,接受选择器的当前的类。
switch 可选。布尔值,为true则加上对应的class,否则就删除。

实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=” utf-8″>
<meta name=”author” content=”” />
<title>帮客之家</title>
<style type=”text/css”>
.content{display:none;}
</style>
<script type=”text/javascript”
src=”mytest/jQuery/jquery-1.8.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
  $(“button”).click(function(){
    $(“div”).toggleClass(function(){
      return “content”
    });
  })
}) 
</script>
</head>
<body>
<button>增添越来越多内容</button>
<div class=”content”><textarea cols=”40″ rows=”5″
name=”textarea”></textarea></div>
</body>
</html>

希望本文所述对我们的jQuery程序设计有所支持。

本文实例陈述了jQuery中toggleClass()方法用法。分享给咱们供大家参考。具体深入分析如下:
此方法…

单击某一段文字,改文字变为葱青,再一次单击之后,文字又变回海军蓝。

</style>
</head>
<body>
<div class=”container”>
<input type=”button” id=”send” value=”Ajax获取”>
<div class=”comment”>已有评说</div>
<div id=”resText”></div>
</div>
<script type=”text/javascript”>
$(“#send”).click(function() {
$(“#resText”).load(“text.html”,function(responseText,textStatus,XMLHttpRequest)
{
alert(responseText);
alert(textStatus);
alert(XMLHttpRequest);

复制代码 代码如下:

});
});n
</script>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>jquery test</title>
<script src=”jquery-1.11.1.min.js”></script>
<style type=”text/css”>
.red
{
color:red;
}
</style>
</head>

//要加载的文书text.html,如下代码

<body>
<p>学如逆水行舟,不进则退</p>
<p>学如逆水行舟,不进则退</p>
<p>学如逆水行舟,不进则退</p>
<p>学如逆水行舟,不进则退</p>
<script type=”text/javascript”>
$(“p”).click(function(){
if($(this).hasClass(“red”)){ //判定是不是持有该class
$(this).removeClass(“red”);
}else{
$(this).addClass(“red”);
}
})
</script>
</body>
</html>

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>loading</title>
</head>
<body>
<div class=”comment”>
<h6>张三</h6>
<p class=”para”>学生1</p>
</div>
<div class=”comment”>
<h6>李四</h6>
<p class=”para”>学生2</p>
</div>
<div class=”comment”>
<h6>小明</h6>
<p class=”para”>学生3</p>
</div>
</body>
</html>

因为那是二个class交替变化的进度,所以能够应用toggleClass方法,若对应的class:”red”存在的话,则移除之,如若不设有,则加多之

 

复制代码 代码如下:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>jquery test</title>
<script src=”jquery-1.11.1.min.js”></script>
<style type=”text/css”>
.red
{
color:red;
}
</style>
</head>

<body>
<p>学如逆水行舟,不进则退</p>
<p>学如逆水行舟,不进则退</p>
<p>学如逆水行舟,不进则退</p>
<p>学如逆水行舟,不进则退</p>
<script type=”text/javascript”>
$(“p”).click(function(){
$(this).toggleClass(“red”);
})
</script>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有