jQuery的属性与样式
之.attr()与.removeAttr()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery的属性与样式之.attr()与.removeAttr()</title>
<style>
input {
display : block;
margin : 10px;
padding : 10px;
background : #bbffaa;
border : 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.attr()与.removeAttr()</h2>
<h3>.attr</h3>
<p>
一、jQuery中用attr()方法来获取和设置元素属性。
attr()有4个表达式：
1，attr(属性名)：获取属性的值；
2，attr(属性名，属性值)：设置属性的值；
3，attr(属性名，函数名)：设置属性的函数值；
4，attr(属性名1：属性值1，属性名2：属性值2)；
二、removeAttr()删除方法
.removeAttr(属性名)：为匹配的元素集合中的所有元素移除属性；
三、区分attribute和property
1，Attribute：特性，dom节点自带的属性，如id，class，title，align等；
2，Property：属性，是dom元素作为对象，其附加的内容，如tagName，nodeName，弄的T一盆等；
3，获取Attribute用attr，获取Property用prop；
</p>
<form>
<input type="text" value="设置value" />
<input type="text" value="获取value"/>
<input type="text" value="回调拼接value" />
<input type="text" value="删除value" />
</form>
<script type="text/javascript">
//找到第一个input，通过attr设置属性value的值
$('input:first').attr('value','.attr( attributeName, value )')
</script>
<script type="text/javascript">
//找到第二个input，通过attr获取属性value的值
$('input:eq(1)').attr('value')
</script>
<script type="text/javascript">
//找到第三个input，通过使用一个函数来设置属性
//可以根据该元素上的其它属性值返回最终所需的属性值
//例如，我们可以把新的值与现有的值联系在一起：
$('input:eq(2)').attr('value',function(i, val){
return '通过function设置' + val
})
</script>
<script type="text/javascript">
//找到第四个input，通过使用removeAttr删除属性
$('input:eq(3)').removeAttr('value')
</script>
</body>
</html>之.html()与.text()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery的属性与样式之html()及.text()</title>
<link rel="stylesheet" href="choose.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.html()与.text()</h3>
.html() 与 .text()
1，.html()读取修改元素的html结构；
2，.text()读取修改元素的文本内容；
3，.html()方法内容使用的是DOM的innerHTML()属性来处理的。
这个操作是针对整个HTML内容，不仅仅只是文本内容；
4，.text()结果返回一个字符串，包含所有匹配元素的合并文本；
<div class="left first-div">
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
<div class="div">
<a>:first-child</a>
<a>第二个元素</a>
<a>:last-child</a>
</div>
</div>
<h4>显示通过html方法获取到的内容</h4>
<p></p>
<h4>显示通过text方法获取到的内容</h4>
<p></p>
<script type="text/javascript">
//显示出html方法获取到的内容
//.html()是整个html文档结构
$('p:first').html( $(".first-div").html() )
</script>
<script type="text/javascript">
//显示出text方法获取到的内容
//.text()是文本内容的合集
$('p:last').text( $(".first-div").text() )
</script>
<script type="text/javascript">
//通过.text()方法替换文本内容
$(".left a:first").text('替换第一个a元素的内容')
</script>
<script type="text/javascript">
//通过.html()方法替换html结构
$(".left div:first").html('整个div的子节点都被替换了')
</script>
<script type="text/javascript">
//通过.text()的回调，获取原本的内容，修改，在重新赋值
$(".left a:first").text(function(idnex,text){
return '增加新的文本内容' + text
})
</script>
</body>
</html>之.val()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery的属性与样式之.val()</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>.val()</h3>
1，.val()方法：用于处理表单元素的值，如input、select、textarea；
只能用在表单元素上；
2，.text()方法：用来读取元素的纯文本内容，包括后代元素；
不能用在表单元素上；
3，.html()和.val()方法：若是用在多个元素上时，只读取第一个元素；
4，.text()方法：若是用在多个元素上时，将会读取所有选中元素的文本内容；
<br>
<select id="single">
<option selected="selected">单选前端</option>
<option>单选后端</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">多选上面</option>
<option>多选中间</option>
<option selected="selected">多选下面</option>
</select>
<input type="text" value="click a button" />
<p id="p1"></p>
<p id="p2"></p>
<script type="text/javascript">
//单个select，返回第一个
$("#p1").text( $("#single").val() )
</script>
<script type="text/javascript">
//多个select被选择，返回["上面", "下面"]
$("#p2").text( $("#multiple").val() )
</script>
<script type="text/javascript">
//选择一个表单，修改value的值
$("input[type='text']").val('修改表单中的内容')
</script>
</body>
</html>之增加样式.addClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="3-4.css" type="text/css">
<title>jQuery的属性与样式之增加样式.addClass()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
1，.addClass(className)方法作用：为每个匹配元素动态增加一个或多个class类名；
2，注意：.addClass(className)方法不会替换一个样式类名，
它只是简单的添加一个类名到元素上；
<h2>.addClss()方法</h2>
<div class="left">
<div class="xiao">
<p>newClass</p>
</div>
<div class="xiao">
<p>newClass</p>
</div>
</div>
<div class="right">
<div class="aa bb boke">
<article>
<p>bokeClass</p>
</article>
</div>
<div class="bb cc boke">
<article>
<p>bokeClass</p>
</article>
</div>
</div>
<script type="text/javascript">
$('.left div').addClass('newClass');
</script>
<script type="text/javascript">
$('div').addClass(function (index, className) {
if(-1!==className.indexOf('boke')){
$(this).addClass('bokeClass');
}
});
</script>
</body>
</html>之删除样式 .removeClass()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.newClass{
background: #bbffaa;
}
.imoocClass{
background: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.removeClass()方法</h2>
1，removeClass([className])：每个匹配元素移除一个或多个用空格隔开的类名；
2，removeClass(function(index,class))：一个函数，返回一个或多个将要被移除的类名；
<div class="left">
<div class="aaron newClass">
<p>newClass</p>
</div>
<div class="aaron newClass">
<p>newClass</p>
</div>
</div>
<div class="right">
<div class="aa bb imoocClass">
<article>
<p>imoocClass</p>
</article>
</div>
<div>
<article>
<p>imoocClass</p>
</article>
</div>
</div>
<script type="text/javascript">
//class=left下div元素删除newClass样式
$('.left div').removeClass('newClass')
</script>
<script type="text/javascript">
//.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
$('.right > div:first').removeClass(function(index,className){
//className = aa bb imoocClass
//把div的className赋给下一个兄弟元素div上作为它的class
$(this).next().addClass(className)
//删除自己本身的imoocClass
return 'imoocClass'
})
</script>
</body>
</html>之切换样式 .toggleClass()
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery切换样式.toggleClass()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
body,
table,
td
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.h {
background: #f3f3f3;
color: #000;
}
.c {
background: #ebebeb;
color: #000;
}
</style>
</head>
<body>
<h2>隔行换色</h2>
<h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>jQuery快到碗里来！</td>
<td>jQuery快到碗里来！</td>
</tr>
<tr>
<td>jQuery快到碗里来！</td>
<td>jQuery快到碗里来！</td>
</tr>
<tr>
<td>jQuery快到碗里来！</td>
<td>jQuery快到碗里来！</td>
</tr>
<tr>
<td>jQuery快到碗里来！</td>
<td>jQuery快到碗里来！</td>
</tr>
<tr>
<td>jQuery快到碗里来！</td>
<td>jQuery快到碗里来！</td>
</tr>
</table>
<script type="text/javascript">
//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");
</script>
<script type="text/javascript">
//给所有的偶数tr元素切换class="c"的样式
//所有基数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("c");
</script>
<script type="text/javascript">
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body>
</html>之样式操作 .css()
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="3-7.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<title>jQuery样式操作.css()</title>
</head>
<body>
<h3>获取css属性</h3>
<div class="first">获取颜色</div>
<p></p>
<div class="second">获取文字尺寸</div>
<p></p>
<div class="third">获取宽高尺寸</div>
<p></p>
<script type="text/javascript">
//background-color:blue; => rgb(0, 0, 255)
//颜色都会转化成统一的rgb标示
$('p:eq(0)').text( $('.first').css('background-color'))
</script>
<script type="text/javascript">
//字体大小都会转化成统px大小 em=>px
$('p:eq(1)').text( $('.first').css('font-size') )
</script>
<script type="text/javascript">
//获取尺寸，传入CSS属性组成的一个数组
//{width: "60px", height: "60px"}
var value = $('.first').css(['width','height']);
//因为获取的是一个对象，取到对应的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>
</br></br></br>
<h3>设置css属性</h3>
<div class="fourth">设置颜色设置文字尺寸</div>
<div class="fifth">设置颜色设置文字尺寸</div>
<div class="sixth">通过回调设置新的值</div>
<div class="seventh">同时设置多少个样式</div>
<script type="text/javascript">
//多种写法设置颜色
$('.fourth').css('background-color','red');
$('.fifth').css('backgroundColor','yellow');
</script>
<script type="text/javascript">
//多种写法设置字体大小
$('.fourth').css('font-size','15px');
$('.fifth').css('font-size','0.9em');
</script>
<script type="text/javascript">
//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css('width',function(index,value){
value = value.split('px');
return (Number(value[0])+50)+value[1];
})
</script>
<script type="text/javascript">
//合并设置,通过对象传设置多个样式
$('.seventh').css({
'font-size':'15px',
'background-color':'green',
'border':'1px solid gray'
})
</script>
</body>
</html>之元素的数据存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery元素的数据存储</title>
<style type="text/css">
.left,.right {
width: 300px;
height: 120px;
}
.left div,.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #cccccc;
}
.left div {
background: #bbffdd;
}
.right div {
background: #ddffbb;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>jQuery.data()静态方法</h2>
<div class="left">
<div class="inner">
<p>click</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h2>.data()实例方法</h2>
<div class="right">
<div class="inner">
<p>click</p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type="text/javascript">
$('.left').click(function () {
var ele = $(this);
//通过$.data方式设置数据
$.data(ele,"a","data test");
$.data(ele,"b",{name:"小"});
//通过$.data方式取出数据
var reset = $.data(ele,"a") + "<br>" + $.data(ele,"b").name;
ele.find('span').append(reset);
});
</script>
<script type="text/javascript">
$('.right').click(function () {
var ele = $(this);
//通过.data方式设置数据
ele.data("a","data test");
ele.data("b",{name:"小"});
//通过.data方式取出数据
var reset = ele.data("a") + "<br>" + ele.data("b").name;
ele.find('span').append(reset);
});
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
