jQuery基礎(chǔ)學(xué)習(xí)

Query是一個(gè)JavaScript庫(kù)

jQuery極大簡(jiǎn)化了JavaScript

JQuery是一個(gè)寫得更少，做的更多的JavaScript庫(kù)

$("p").hide();找到所有p標(biāo)簽，讓它消失。

$("#test").hide() 隱藏id=test標(biāo)簽

$(this).hide() 隱藏當(dāng)前的這個(gè)標(biāo)簽

jQuery兩個(gè)版本，一個(gè)是壓縮過后的，一個(gè)是未經(jīng)壓縮的。

Google 和 Microsoft 對(duì) jQuery 的支持都很好。

$(document).ready(function(){

--- jQuery functions go here ----

});

文檔加載完全在進(jìn)行jQuery操作。

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

我可以選擇全局的p標(biāo)簽，也可以選擇某一區(qū)域的p標(biāo)簽

jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。

$("p").css("background-color","red");

把所有p標(biāo)簽的背景色變?yōu)榧t色。

jQuery 使用名為 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號(hào)。

Query就對(duì)javascript的一個(gè)擴(kuò)展, 封裝, 就是讓javascript更好用, 更簡(jiǎn)單。

人家怎么說的來著, jQuery就是要用更少的代碼, 漂亮的完成更多的功能。

javascript與jQuery常用方法比較

1 加載DOM區(qū)別

javascript： window.onload

實(shí)例

function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload=first;
window.onload=second;
//只會(huì)執(zhí)行第二個(gè)window.onload；不過可以通過以下方法來進(jìn)行改進(jìn)：
window.onload=function(){
first();
second();
}

jQuery： $(document).ready() 簡(jiǎn)化為$(function(){ //... })

實(shí)例1:

$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}}

實(shí)例2:

$(document).ready(function(){
first();
} )
$(document).ready(function(){
second();
} ) //兩條均會(huì)執(zhí)行

可以簡(jiǎn)化為:

$(function(){
first();
});
$(function(){
second();
});

jQuery加載與普通加載區(qū)別

方法 window.onload $(document).ready()

執(zhí)行時(shí)機(jī) 必須等待網(wǎng)頁(yè)中的所有內(nèi)容加載完畢后網(wǎng)頁(yè)中的所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,

(包括圖片才能執(zhí)行) 可能DOM元素關(guān)聯(lián)的東西并沒有加載完

編寫個(gè)數(shù) 不能同時(shí)編寫多個(gè)(后者會(huì)"覆蓋"前者) 能同時(shí)編寫多個(gè)

簡(jiǎn)化寫法無(wú) $()

2 獲取ID

javascript： document.getElementById('idName')

jQuery： $('#idName')

3 獲取name和class

javascript： document.getElementsByName('name') name屬性

jQuery： $('.className') class屬性

4 獲取TagName

javascript： document.getElementsByTagName('tagName')

jQuery： $('tagName')

js中元素不存在使用它會(huì)報(bào)錯(cuò)

var div=document.getElementsByTagName("div")[0];

div.onclick=function(){

console.log("javascript");

}

jQuery不會(huì)報(bào)錯(cuò)

var $div=$("div");

$div.click(function(){

console.log("jQuery");

})

5 創(chuàng)建對(duì)象并加入文檔中

javascript：

var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
//將p元素追加為Id為div1的lastchild子節(jié)點(diǎn)，如果想將新創(chuàng)建的p元素插入到已存在的某個(gè)元素之前，可以使用insertBefore()方法

jQuery：

jQuery提供了4種將新元素插入到已有元素（內(nèi)部）之前或者之后的方法：

append()、appendTo(目標(biāo))、prepend()、prependTo(目標(biāo))。 (prepend()、prependTo(目標(biāo))插在子元素之前)

格式：$(html);

HTML代碼：

<p>World!</p>

jQuery代碼:

$('p').append('<b>Hello!</b>'); //輸出：<p>World!<b>Hello!</b></p>
$('<b>Hello!</b>').appendTo('p'); //輸出：同上
$('p').prepend('<b>Hello!</b>'); //輸出：<p><b>Hello!</b>World! </p>
$('<b>Hello!</b>').prependTo('p'); //輸出：同上

6 插入新元素

javascript：

insertBefore() 語(yǔ)法格式：

parentElement.insertBefore(newElement,targetElement)

將一個(gè)img元素插入一個(gè)段落之前。

HTML代碼：

<p>這是一段文字</p>

javascript代碼：

var imgs=document.getElementById('imgs');
var para=document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);

jQuery：

jQuery提供了4種將新元素插入到已有元素（外部）之前或者之后的方法：before()、insertBefore(目標(biāo))、after()、insertAfter(目標(biāo))。

格式：$('html');

HTML代碼：

<p>World!</p>

jQuery代碼

$('p').after('<b>Hello!</b>'); //輸出：<p>World! </p><b>Hello!</b>
$('<b>Hello!</b>').insertAfter ('p'); //輸出：同上
$('p').before('<b>Hello!</b>'); //輸出：<b>Hello!</b><p>World! </p>
$('<b>Hello!</b>').insertBefore('p'); //輸出：同上

7 復(fù)制節(jié)點(diǎn)

javascript：

reference=node.cloneNode(bool)

這個(gè)方法只有一個(gè)布爾型的參數(shù), 它的可取值只能是true或者false。該參數(shù)決定是否把被復(fù)制節(jié)點(diǎn)的子節(jié)點(diǎn)也一同復(fù)制到新建節(jié)點(diǎn)里去。

jQuery：

clone() //復(fù)制節(jié)點(diǎn)后，被復(fù)制的新元素并不具有任何行為 ,默認(rèn)值false,也復(fù)制子節(jié)點(diǎn)

clone(true) //復(fù)制節(jié)點(diǎn)內(nèi)容及其綁定的事件

備注：該方法通常與appendTo()、prependTo()等方法結(jié)合使用。

8 刪除節(jié)點(diǎn)

javascript：

reference=element.removeChild(node)

removeChild()方法將一個(gè)給定元素里刪除一個(gè)子節(jié)點(diǎn)

jQuery：

remove();

remove()方法作用就是從DOM中刪除所有匹配的元素，remove()方法還可以與其他的過濾選擇器結(jié)合使用，非常方便。

將ul li下的title不是"Hello"的li移除：

$('ul li').remove(li[title!='Hello']);

empty(); 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。

從DOM中把所有段落刪除

HTML 代碼:

<p>Hello</p> how are <p>you?</p>

jQuery 代碼:

$("p").remove();

把所有段落的子元素(包括文本節(jié)點(diǎn))刪除

HTML 代碼:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代碼:

$("p").empty();結(jié)果:

<p></p>

9 包裹節(jié)點(diǎn)

javascript： javascript暫無(wú)

jQuery：

wrap() //將匹配元素用其他元素的結(jié)構(gòu)化標(biāo)記單獨(dú)包裹起來

wrapAll() //將所有匹配的元素用一個(gè)元素包裹起來

wrapInner() //將匹配元素的子內(nèi)容用其他結(jié)構(gòu)化的標(biāo)記包裹起來

把所有的段落用一個(gè)新創(chuàng)建的div包裹起來

jQuery 代碼:

$("p").wrap("<div class='wrap'></div>");

用一個(gè)生成的div將所有段落包裹起來

jQuery 代碼:

$("p").wrapAll("<div></div>");

把所有段落內(nèi)的每個(gè)子內(nèi)容加粗

jQuery 代碼:

$("p").wrapInner("<b></b>");

10 屬性操作：設(shè)置屬性節(jié)點(diǎn)、查找屬性節(jié)點(diǎn)

javascript：

document.getElementsByTagName('tagName').title
document.getElementsByTagName('tagName').title="My title";
document.getElementsByTagName('tagName')['title']="My title";
document.getElementsByTagName('tagName').getAttribute('My title');
document.getElementsByTagName('tagName').setAttribute('title','My title');
document.getElementsByTagName('tagName').removeAttribute('title','My title');

jQuery：

jQuery中設(shè)置和查找屬性節(jié)點(diǎn)都是：attr() 。

$('p').attr('title'); //獲取p元素的title屬性
$('p').attr('title','My title'); //設(shè)置p元素的title屬性
$('p').removeAttr('title') //刪除p元素的title屬性
$('p').attr('title':'My title','class':'myClass'); //當(dāng)需要添加多個(gè)屬性時(shí), 可以用"屬性":"值"對(duì)的形式, 中間用逗號(hào)隔開。

11 替換節(jié)點(diǎn)

javascript：

var reference=element.replaceChild(newChild,oldChild)

該方法是將一個(gè)給定父元素里的一個(gè)子節(jié)點(diǎn)替換為另外一個(gè)節(jié)點(diǎn)。

jQuery：

replaceWith()、replaceAll()

replaceWith() 與 replaceAll() 作用相同。差異在于語(yǔ)法：內(nèi)容和選擇器的位置, 以及 replaceAll() 無(wú)法使用函數(shù)進(jìn)行替換。

$(selector).replaceWith(content) 用指定的HTML內(nèi)容或元素替換被選元素

$(content).replaceAll(selector) 用指定的HTML內(nèi)容或元素替換被選元素。

<p>hello</p> 想替換為： <h2>Hi</h2>

jQuery代碼：

$('p') .replaceWith('<h2>Hi</h2>');

或者可以寫成：

$('<h2>Hi</h2>').replaceAll('p');

12 刪除節(jié)點(diǎn)

javascript：removeChild()

var list=document.getElementById("myList");

list.removeChild(list.childNodes[0]);

jQuery:

$("p").remove();

13 CSS操作

javascript：

格式：element.style.property

CSS-DOM能夠讀取和設(shè)置style對(duì)象的屬性, 其不足之處是無(wú)法通過它來提取外部CSS設(shè)置的樣式信息, 而jQuery的css()方法是可以的。

document.body.style.backgroundColor="red";

jQuery：

格式：$(selector).css()

css()方法獲取元素的樣式屬性

此外, jQuery還提供了height()和width()分別用來獲取元素的高度和寬度(均不帶單位), 而css(height)、css(width)返回高寬, 且?guī)挝弧?/p>

$("p").css({color: "#ff0011", background: "blue", "font-size":"16px" });

$("p").css({color: "#ff0011", background: "blue", fontSize:"16px" }); jQuery也支持

注意點(diǎn)：CSS中的如"font-size"這樣有"-"的屬性, 要使用首字母小寫的駝峰式表示, 如fontSize。

jQuery中的css()的帶橫線的屬性可以原樣輸出, 但需帶引號(hào), 也可以使用首字母小寫的馱峰式表示。

javascript：

className屬性

DOM對(duì)象.className="className";

DOM對(duì)象.className +=" claaaName";

DOM對(duì)象.className="";

jQuery：

addClass(class|fn)

removeClass(class|fn)

toggleClass(class|fn)

14 表單value值的操作

javascipt：

formNode.value

formNode.attr('value');

formNode.attr('value',信息值);

jQuery：

val([val|fn|arr])

$().val(); //獲得value屬性值

$().val(value值); //設(shè)置value屬性的值(文本框)

$().val([,,]); //設(shè)置value屬性的值(單選框、復(fù)選框、下拉式列表)

該val()方法在復(fù)選框、單選按鈕、下拉列表的使用有凸出表現(xiàn)。

15 事件的屬性

相同之處

altKey Alt鍵是否被按下. 按下返回true

ctrlKey ctrl鍵是否被按下, 按下返回true

shiftKey Shift鍵是否被按下, 按下返回true

screenX/Y 對(duì)于鼠標(biāo)事件, 獲取事件相對(duì)于屏幕原點(diǎn)的水平/垂直坐標(biāo)

type 事件的名稱,如click、mouseover等

以上為javascript和jQuery相同的屬性

不同之處

javascript：

clientX/Y 鼠標(biāo)指針在客戶端區(qū)域的坐標(biāo), 不包括工具欄、滾動(dòng)條

jQuery:

pageX/Y 鼠標(biāo)指針在客戶端區(qū)域的坐標(biāo), 不包括工具欄，滾動(dòng)條;

16 事件的兼容性

事件目標(biāo):

javascript：

IE:srcElement 標(biāo)準(zhǔn)DOM:targe

jQuery:

target 引起事件的元素/對(duì)象

keyCode和CharCode:

javascript：

charcode keycode(keypress) keycode(keydown、keyup)

IE 無(wú) 按鍵的Unicode值按鍵的數(shù)字代碼

標(biāo)準(zhǔn)DOM 按鍵的Unicode值按鍵的數(shù)字代碼按鍵的數(shù)字代碼

jQuery:

keyCode 對(duì)于keyup和keydown事件返回被按下的鍵。不區(qū)分大小寫, a和A都返回65;

鼠標(biāo)事件,值對(duì)應(yīng)按下的鼠標(biāo)鍵

javascript：

button IE中的按鍵 Firefox中的按鍵

0 未按下案件左鍵

1 左鍵中鍵(滑輪)

2 右鍵右鍵

3 同時(shí)按下左、右鍵不支持組合鍵，未按下任何鍵時(shí)button值為undefined

4 中鍵(滑輪)

5 同時(shí)按下左、中鍵

6 同時(shí)按下右、中鍵

7 同時(shí)按下左、中、右鍵

jQuery:

which 對(duì)于鍵盤事件, 返回觸發(fā)事件的鍵的數(shù)字編碼。對(duì)于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(hào)(1左,2中,3右);

15 事件設(shè)置

DOM1級(jí)事件設(shè)置

node.onclick=function(){}

node.onclick=函數(shù);

DOM2級(jí)事件設(shè)置

node.addEventListener(類型，處理，事件流);

node.removeEventListener(類型，處理，事件流);

node.attachEvent();

node.detachEvent();

jquery事件設(shè)置

$().事件類型(事件處理函數(shù)fn); //設(shè)置事件

$().事件類型(); //觸發(fā)事件執(zhí)行

$().bind('事件類型',fn); //綁定事件

$().one('事件類型',fn); //綁定事件(一次)

$().live('事件類型',fn); //綁定事件(委派)

16 處理頁(yè)面中的元素

javascript：

使用javascript腳本獲取頁(yè)面內(nèi)容的方式主要有兩種, 第一種是通過表單獲取表單元素的value值。格式為：

表單名稱.元素名.value;

該方式只能獲取表單中的元素值，對(duì)于其他標(biāo)簽元素則無(wú)能為力。

第二種方式通過id名來獲取頁(yè)面中任意標(biāo)簽的內(nèi)容。格式為：

document.getElementById('id'). value;

document.getElementById ('id').innerText;

使用第二種方式時(shí)要注意, 標(biāo)簽的id名必須存在且唯一, 否則就會(huì)出現(xiàn)錯(cuò)誤。

為標(biāo)簽內(nèi)容賦值時(shí), 則使用如下格式：

id.innerHTML='要顯示的內(nèi)容';

jQuery:

html([val|fn]) 返回值:String

取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

在一個(gè) HTML 文檔中, 我們可以使用html()方法來獲取任意一個(gè)元素的內(nèi)容。

如果選擇器匹配多于一個(gè)的元素, 那么只有第一個(gè)匹配元素的 HTML 內(nèi)容會(huì)被獲取。

val String

function(index, html) Function

此函數(shù)返回一個(gè)HTML字符串。接受兩個(gè)參數(shù), index為元素在集合中的索引位置, html為原先的HTML值。

text()

text([val|fn]) 返回值:String

val String 用于設(shè)定HTML內(nèi)容的值

function(index, html) Function 此函數(shù)返回一個(gè)HTML字符串。接受兩個(gè)參數(shù)，index為元素在集合中的索引位置，html為原先的HTML值。

17 事件對(duì)象

javascript：

node.onclick=function(oEvent){
if(window.event) oEvent=window.event; //兼容性寫法
}

在IE瀏覽器中事件對(duì)象是window對(duì)象的一個(gè)屬性window.event；

在標(biāo)準(zhǔn)的DOM中規(guī)定event對(duì)象必須作為唯一的參數(shù)傳給事件處理函數(shù)。

因此, javascript要處理好各瀏覽器的事件對(duì)象的兼容性。

jQuery:

$().bind('click',function(evt){ window.event });
$().click(function(evt){});
$().bind('mouseover',f1);
function f1(evt){}

事件對(duì)象：就直接使用的evt即可, 在jQuery框架內(nèi)部對(duì)各瀏覽器的事件對(duì)象作出了兼容處理。

18 阻止瀏覽器默認(rèn)動(dòng)作、阻止事件冒泡

javascript：

DOM2級(jí)瀏覽器默認(rèn)動(dòng)作阻止：

事件對(duì)象.preventDefault(); 主流瀏覽器

事件對(duì)象.returnValue=false; IE(6,7,8)瀏覽器

DOM2級(jí)事件冒泡阻止：

事件對(duì)象.stopPropagation(); 主流瀏覽器

事件對(duì)象.cancelBubule=true; IE(6,7,8)瀏覽器

jQuery：

$().bind('click',function(evt){
evt.preventDefault();
evt.stopPropagation();
});

preventDefault()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對(duì)各瀏覽器作出了兼容處理。

stopPropagation()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對(duì)各瀏覽器作出了兼容處理。

return false 與event.preventDefault()區(qū)別

1. return false 實(shí)際上執(zhí)行了三種操作

event.preventDefault()

event.stopPropation()

終止函數(shù)執(zhí)行并立即執(zhí)行

2 .為了避免對(duì)程序執(zhí)行過多的隱式操作造成的Bug，建議

只需要阻止事件默認(rèn)行為時(shí)，應(yīng)該使用event.preventDefault()

只需要阻止事件冒泡時(shí)，應(yīng)該使用event.stopPropagation()

只有當(dāng)同時(shí)阻止事件冒泡和阻止事件默認(rèn)行為時(shí),才使用return false

19 頁(yè)面滾動(dòng)

javascript：

scrollBy() 按照指定的像素值來滾動(dòng)內(nèi)容。

scrollTo() 把內(nèi)容滾動(dòng)到指定的坐標(biāo)。

<script>
function scrollWindow(){
window.scrollTo(100,500);
}
</script>
<input type="button" onclick="scrollWindow()" value="滾動(dòng)條" />

jQuery:

offset([coordinates]) 獲取匹配元素在當(dāng)前視口的相對(duì)偏移。

返回的對(duì)象包含兩個(gè)整型屬性: top 和 left, 以像素計(jì)。此方法只對(duì)可見元素有效。

$("p:last").offset({ top: 10, left: 30 });

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>獲得 offset</button>
</body>
</html>

輸出結(jié)果: 本段落的偏移是 8 left 和 8 top。

scrollLeft() 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。

scrollTop() 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條頂部的偏移。

Query選擇器:

jQuery選擇器類似于CSS選擇器，用來選取網(wǎng)頁(yè)中的元素;示例:

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

注釋:獲取并設(shè)置網(wǎng)頁(yè)中所有<h3>元素的背景

“h3”為選擇器語(yǔ)法，必須放在$()中

$(“h3”)返回jQuery對(duì)象

.css()是為jQuery對(duì)象設(shè)置樣式的方法

1、基本選擇器(標(biāo)簽選擇器、類選擇器、ID選擇器、并集選擇器和全局選擇器)

2、層次選擇器(后代選擇器、子選擇器、相鄰元素選擇器、同輩元素選擇器)——層次選擇器通過DOM 元素之間的層次關(guān)系來獲取元素

3、屬性選擇器:屬性選擇器通過HTML元素的屬性來選擇元素

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

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

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

(屬性選擇器可以根據(jù)是否包含某屬性來選取元素)

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開始）$(“l(fā)i:lt(1)” )選取索引小于1的<li>元素（注：小于1，不包括1）

:header選取所有標(biāo)題元素，如h1~h6$(":header" )選取網(wǎng)頁(yè)中所有標(biāo)題元素

:focus選取當(dāng)前獲取焦點(diǎn)的元素$(":focus" )選取當(dāng)前獲取焦點(diǎn)的元素

:animated選擇所有動(dòng)畫$(":animated" )選取當(dāng)前所有動(dòng)畫元素

6、可見性過濾選擇器

:visible選取所有可見的元素$(":visible" )選取所有可見的元素

:hidden選取所有隱藏的元素$(":hidden" ) 選取所有隱藏的元素

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

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

制作示例:

<!DOCTYPE html>

<head>

<title>制作全網(wǎng)熱播視頻頁(yè)面</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>

<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>權(quán)力的游戲第五季<p>加入看單</p>

</li>

</li>

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

</li>

<li><span>10</span>鄉(xiāng)村受情8（上）<p>加入看單</p>

</li>

</ol>

</li>

</ul>

</section>

</body>

</html>

$(function () {

// 設(shè)置圖片與標(biāo)題與文字內(nèi)容邊距

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

// 設(shè)置右側(cè)列表背景顏色

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

// 設(shè)置數(shù)字的背景顏色

$("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");

// 設(shè)置圖標(biāo)

$("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");

// 設(shè)置右邊列表隱藏、顯示效果

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

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

})

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

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

})

</script>

在線咨詢

上一篇：TensorFlow開發(fā)者會(huì)峰會(huì)：支持Swift，更
下一篇：CSS bottom 屬性

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

jQuery基礎(chǔ)學(xué)習(xí)

您的項(xiàng)目需求