1.html()取出或设置html内容
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>
