jq获取对象简单.get()和.index()方法

最新推荐文章于 2024-07-26 03:31:43 发布

小调调hxy

最新推荐文章于 2024-07-26 03:31:43 发布

阅读量1.6k

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/u014185792/article/details/21694517

版权

学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

This is a heading

This is a paragraph.

This is another paragraph.

图书种类

计算机类
教材类
杂志类
文学类

运动

篮球
足球
羽毛球
乒乓球

<html>
<head>
    <script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    // 设置羽毛球背景色为为橙色
    $("#hide").click(function () {
        //通过.get()方法获取对象
        var e1 = $("ol li").get(2);
        //通过.css方法设置对象背景色
        $(e1).css("background-color", "orange");
        //js设置对象背景色
        //e1.style.background = "red";

    });
    //还原背景色
    $("#show").click(function () {
        var e1 = $("ol li").get(2);
        $(e1).css("background-color", "white");
    });
    //动态获取元素位置
    $("li").click(function() {
        alert($(this).index()+1);
    });
});


</script>


</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


<h3>图书种类</h3>
<ul type="circle">
	<li >计算机类</li>
	<li>教材类</li>
	<li>杂志类</li>
	<li class = "my_love">文学类</li>
</ul>

<h3>运动</h3>
<ol >
	<li>篮球</li>
	<li>足球</li>
	<li class = "my_love" title="sport">羽毛球</li>
	<li class = "my_love" title="sport">乒乓球</li>
</ol>

<ul>
	<li id="foo">foo</li>
	<li id="bar">bar</li>
</ul>


<button id="hide" type="button">设置</button>
<button id="show" type="button">还原</button>

</body>
</html>