2.prop（）取出或设置某个属性的值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性操作</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ ???var $a = $(‘.link‘); ???var $img = $(‘#img‘); ???/*取出某个属性*/ ???console.log($a.prop(‘class‘)) ???/*绝对地址*/ ???console.log($img.prop(‘src‘)); ???/*设置属性*/ ???$a.prop({‘href‘:‘http://www.baidu.com‘,‘title‘:‘百度网‘}); ???/*在标签内写内容*/ ???$a.html(‘<em>3</em>‘);})</script></head>
<body>
<a href="#" class="link">链接</a><img src="../../js/images/小林子1.jpg" alt="nanzi" id="img"></body>
</html>
例子二：手风琴
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script typt="text/javascript">
$(function(){ ???var $li = $(‘.accordion li‘); ???$li.click(function(){ ???????/*点击的li,左的位置*/ ???????$(this).animate({‘left‘:21*$(this).index()}); ???????/*点击的li前面元素也跟着左移*/ ???????$(this).prevAll().each(function(){ ???????????$(this).animate({‘left‘:21*$(this).index()}); ???????}); ???????/*点击的li后面的元素左的位置*/ ???????$(this).nextAll().each(function(){ ???????????$(this).animate({‘left‘:497-21*(5-$(this).index())}); ???????}) ???})})</script><style type="text/css">
.accordion{ ???width: 497px; ???height: 506px; ???float: left; ???overflow: hidden; ???position: relative; ???left: 50%; ???margin-left: -250px;}.accordion ul{ ???list-style: none; ???padding: 0;}.accordion ul li{ ???width: 413px; ???height: 506px; ???display: inline-block; ???float: left;}.accordion li span{ ???display: inline-block; ???width: 20px; ???height: 506px; ???border-bottom: 1px solid #fff;}.accordion li img{ ???display: inline-block;}/*位置一*/.accordion .pick1{ ???position: absolute; ???top: 0; ???background-color: #EF4B4E;}.accordion .pick1 span{ ???position: absolute; ???top: 0;}.accordion .pick1 img{ ???position: absolute; ???top: 0; ???left: 21px;}/*位置二*/.accordion .pick2{ ???position: absolute; ???top: 0; ???left: 413px; ???background-color: #EC3AF1;}.accordion .pick2 span{ ???position: absolute; ???top: 0;}.accordion .pick2 img{ ???position: absolute; ???left: 21px;}/*位置三*/.accordion .pick3{ ???position: absolute; ???top: 0; ???left: 434px; ???background-color: #4866F5;}.accordion .pick3 span{ ???position: absolute; ???top: 0;}.accordion .pick3 img{ ???position: absolute; ???left: 21px;}/*位置四*/.accordion .pick4{ ???position: absolute; ???top: 0; ???left: 455px; ???background-color: #4DC1F1;}.accordion .pick4 span{ ???position: absolute; ???top: 0;}.accordion .pick4 img{ ???position: absolute; ???left: 21px;}/*位置五*/.accordion .pick5{ ???position: absolute; ???top: 0; ???left: 476px; ???background-color: #4CF750;}.accordion .pick5 span{ ???position: absolute; ???top: 0;}.accordion .pick5 img{ ???position: absolute; ???left: 21px;}</style></head>
<body>
<div class="accordion"> ???<ul> ???????<li class="pick1"> ???????????<span>小南子01</span><img src="../../js/images/小林子1.jpg" alt="nanzi"> ???????</li> ???????<li class="pick2"> ???????????<span>小南子02</span><img src="../../js/images/小林子2.png" alt="nanzi"> ???????</li> ???????<li class="pick3"> ???????????<span>小南子03</span><img src="../../js/images/小林子3.png" alt="nanzi"> ???????</li> ???????<li class="pick4"> ???????????<span>小南子04</span><img src="../../js/images/小林子4.png" alt="nanzi"> ???????</li> ???????<li class="pick5"> ???????????<span>小南子05</span><img src="../../js/images/小林子5.png" alt="nanzi"> ???????</li> ???</ul></div></body>
</html>
3.jQuery循环
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>循环</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(a){ ???var $li = $(‘ul li‘); ???/*循环each，获取每一个li*/ ???$li.each(function(){ ???????if($(this).index()%2==0){ ???????????$(this).css({‘backgroundColor‘:‘gold‘}); ???????} ???})})</script></head>
<body>
<ul> ???<li>1</li> ???<li>2</li> ???<li>3</li> ???<li>4</li> ???<li>5</li> ???<li>6</li></ul></body>
</html>
jQuery属性操作、循环
原文地址：http://blog.51cto.com/13742773/2340609