2、JQuery——属性与样式
-
- JQuery属性与样式
- attr与removeAttr 设置内容
- 例子
- html和text 设置内容
- val用来处理表单
- addClass
- removeClass 方法
- toggleClass 方法
- css方法
- 数据存储data
- attr与removeAttr 设置内容
- JQuery属性与样式
JQuery——属性与样式
.attr()与.removeAttr() 设置内容
attr()有4个表达式
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
优点：
attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题
例子
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>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>.attrh3>
<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(2)").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() 设置内容
.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素
.html()方法 ：设置或返回所选元素的内容（包括 HTML 标记）
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
1、 .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
2、 .html( htmlString ) 设置每一个匹配元素的html内容
3、 .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数.text()方法：设置或返回所选元素的文本内容
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
1、.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
2、.text( textString ) 用于设置匹配元素内容的文本
3、.text( function(index, text) ) 用来返回设置文本内容的一个函数
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js">script>
head>
<body>
<h3>.html()与.text()h3>
<div class="left first-div">
<div class="div">
<a>:first-childa>
<a>第二个元素a>
<a>:last-childa>
div>
<div class="div">
<a>:first-childa>
<a>第二个元素a>
<a>:last-childa>
div>
div>
<h4>显示通过html方法获取到的内容h4>
<p>p>
<h4>显示通过text方法获取到的内容h4>
<p>p>
<script type="text/javascript">
//显示出html方法获取到的内容
//.html()是整个html文档结构
$('p:first').text( $(".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()用来处理表单
jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
- .val()方法：设置或返回表单字段的值
.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>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>
<select id="single">
<option>慕课网option>
<option>博客园option>
select>
<select id="multiple" multiple="multiple">
<option selected="selected">imoccoption>
<option >慕课网option>
<option selected="selected">博客园option>
select>
<input type="text" value="click a button" />
<p>p>
<script type="text/javascript">
//单个select，返回第一个
$("p").text( $("#single").val() )
script>
<script type="text/javascript">
//多个select被选择，返回["imocc", "博客园"]
$("p").text( $("#multiple").val() )
script>
<script type="text/javascript">
//选择一个表单，修改value的值
$("input[type='text']").val('修改表单的字段')
script>
body>
html>.addClass()
向被选元素添加一个或多个类
.addClass( className )方法
1、.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
2、.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
<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>.addClss()方法h2>
<div class="left">
<div class="aaron">
<p>newClassp>
div>
<div class="aaron">
<p>newClassp>
div>
div>
<div class="right">
<div class="aa bb imooc">
<article>
<p>imoocClassp>
article>
div>
<div class="bb cc imooc ">
<article>
<p>imoocClassp>
article>
div>
div>
<script type="text/javascript">
//class=left下div元素增加一个新的样式，增加背景颜色
$('.left div').addClass('newClass')
script>
<script type="text/javascript">
//通过className(fucntion)方法
//这个函数返回一个或更多用空格隔开的要增加的样式名。
//接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容
//找到所有的div，然后通过addClass设置颜色，根据返回的className的判断，
$("div").addClass(function(index,className) {
//找到类名中包含了imooc的元素
if(-1 !== className.indexOf('imooc')){
//this指向匹配元素集合中的当前元素
$(this).addClass('imoocClass')
}
});
script>
body>
html>.removeClass( )方法
.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class
<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>
<div class="left">
<div class="aaron newClass">
<p>newClassp>
div>
<div class="aaron newClass">
<p>newClassp>
div>
div>
<div class="right">
<div class="aa bb imoocClass">
<article>
<p>imoocClassp>
article>
div>
<div>
<article>
<p>imoocClassp>
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( )方法
在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换
<html>
<head>
<meta charset="utf-8">
<title>隔行换色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>
<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>
div>
<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()方法
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js">script>
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("fontSize","0.9em");
script>
<script type="text/javascript">
//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
});
script>
<script type="text/javascript">
//合并设置,通过对象传设置多个样式
$('.seventh').css({
'font-size' :"15px",
"background-color" :"#40E0D0",
"border" :"1px solid red"
});
script>
body>
html>数据存储“.data()”
1、jQuery提供的存储接口
- jQuery.data( element, key, value ) //静态接口,存数据
- jQuery.data( element, key ) //静态接口,取数据
- .data( key, value ) //实例接口,存数据
- .data( key ) //实例接口,存数据
2、删除数据
- jQuery.removeData( element [, name ] )
- .removeData( [name ] )
例子
<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;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
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="aaron">
<p>点击看结果p>
<p>jQuery.datap>
div>
<div><span>span>div>
div>
<h2>.data()实例方法h2>
<div class="right">
<div class="aaron">
<p>点击看结果p>
<p>.datap>
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") + "" + $.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") + "" + ele.data("b").name
ele.find('span').append(reset)
})
script>
body>
html>