第六章：深入理解jQuery

发表时间: 2021-10-14 22:13

jQuery选择器:

jQuery选择器类似于CSS选择器，用来选取网页中的元素;示例:

$("h3").css("background","#09F");

注释:获取并设置网页中所有<h3>元素的背景

“h3”为选择器语法，必须放在$()中

$(“h3”)返回jQuery对象

.css()是为jQuery对象设置样式的方法

1、基本选择器(标签选择器、类选择器、ID选择器、并集选择器和全局选择器)

2、层次选择器(后代选择器、子选择器、相邻元素选择器、同辈元素选择器)——层次选择器通过DOM 元素之间的层次关系来获取元素

3、属性选择器:属性选择器通过HTML元素的属性来选择元素

$("#news a[class]").css("background","#c9cbcb");

$("#news a[class='hot']").css("background","#c9cbcb");

$("#news a[href$='html']").css("background","#c9cbcb");

(属性选择器可以根据是否包含某属性来选取元素)

4、基本过滤选择器

:eq(index)选取索引等于index的元素（index从0开始）$("li:eq(1)" )选取索引等于1的<li>元素

:gt(index)选取索引大于index的元素（index从0开始）$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）

:header选取所有标题元素，如h1~h6$(":header" )选取网页中所有标题元素

:focus选取当前获取焦点的元素$(":focus" )选取当前获取焦点的元素

:animated选择所有动画$(":animated" )选取当前所有动画元素

6、可见性过滤选择器

:visible选取所有可见的元素$(":visible" )选取所有可见的元素

:hidden选取所有隐藏的元素$(":hidden" ) 选取所有隐藏的元素

$("p:hidden").show();

$("p:visible").hide();

制作示例:

<!DOCTYPE html>

<head>

<title>制作全网热播视频页面</title>

</head>

<style>

* {

margin: 0;

padding: 0;

font-family: "微软雅黑";

font-size: 14px;

}

ul,

ol,

li {

list-style: none;

}

#play {

margin: 0 auto;

width: 680px;

overflow: hidden;

}

#play h1 {

line-height: 40px;

font-size: 22px;

}

#play ul>li {

float: left;

width: 220px;

height: 308px;

overflow: hidden;

position: relative;

}

#play ol li {

height: 37px;

padding: 0px 0px 0 10px;

position: relative;

}

#play ul>li>span {

display: block;

position: absolute;

left: 0;

bottom: 0;

font-size: 25px;

color: #ffffff;

font-weight: bold;

padding: 5px 10px;

z-index: 100;

}

#play ul>li>p {

position: absolute;

left: 50px;

bottom: 10px;

color: #ffffff;

}

#play ol {

padding-top: 13px;

padding-right: 5px;

}

#play ol li span {

display: inline-block;

color: #ffffff;

margin-right: 5px;

width: 20px;

height: 20px;

font-size: 12px;

font-weight: bold;

text-align: center;

}

#play ol li p {

position: absolute;

right: 0;

top: 3px;

color: #ffffff;

background: #f0a30f;

padding: 0 8px;

font-size: 12px;

display: none;

}

</style>

<body>

<h1>全网热播视频</h1>

<ul>

</li>

</li>

<li>

<ol>

</li>

</li>

<li><span>5</span>亲爱的翻译官<p>加入看单</p>

</li>

<li><span>6</span>仙剑云之凡<p>加入看单</p>

</li>

<li><span>7</span>权力的游戏第五季<p>加入看单</p>

</li>

</li>

<li><span>9</span>那年青春我们正好<p>加入看单</p>

</li>

</li>

</ol>

</li>

</ul>

</section>

</body>

</html>

$(function () {

// 设置图片与标题与文字内容边距

$("#play ul>li:not(li:last)").css("margin-right","10px");

// 设置右侧列表背景颜色

$("ul>li:last").css("background-color","#f0f0f0");

// 设置数字的背景颜色

$("ul>li>span").css("background-color","#f0a30f");

$("ul>li>ol>li>span:first").css("background-color","#f0a30f");

$("ul>li>ol>li:not(li:eq(0)) span").css("background-color","#a4a3a3");

// 设置图标

$("ul>li>ol>li:lt(5)").css("background","url(../sixClass/img/orange.jpg) right -4px no-repeat");

$("ul>li>ol>li:eq(1)").css("background","url(../sixClass/img/green.jpg) right -4px no-repeat");

$("ul>li>ol>li:gt(4)").css("background","url(../sixClass/img/green.jpg) right -4px no-repeat");

// 设置右边列表隐藏、显示效果

$("ul>li>ol>li").mouseover(function(){

$(this).find(":hidden").show();

})

$("ul>li>ol>li").mouseout(function(){

$("#play ol>li p:visible").hide();

})

</script>

第六章：深入理解jQuery

热门阅读

推荐阅读