js選擇器實例（js中選擇器）

• 1、jQuery層次選擇器用法示例
• 2、JS實現樹形選擇器
• 3、js 選擇器 tr 選擇若干個怎麼寫？
• 4、JS選擇器
• 5、vue.js使用element-ui改寫一個多級聯動的選擇器
• 6、javascript選擇器有哪些

本文實例講述了jQuery層次選擇器用法。分享給大家供大家參考，具體如下：

!DOCTYPE

html

PUBLIC

“-//W3C//DTD

XHTML

1.0

Transitional//EN”

“”

html

xmlns=””

head

meta

http-equiv=”Content-Type”

content=”text/html;

charset=utf-8″

/

title2-5/title

!–

引入jQuery

—

script

src=”js/jquery-1.10.1.min.js”

type=”text/javascript”/script

script

src=”js/assist.js”

type=”text/javascript”/script

link

rel=”stylesheet”

type=”text/css”

href=”css/style.css”

/

script

type=”text/javascript”

$(document).ready(function(){

//選擇

body內的所有div元素.

$(‘#btn1’).click(function(){

$(‘body

div’).css(“background”,”#bbffaa”);

})

//在body內的選擇

元素名是div

的子元素.

$(‘#btn2’).click(function(){

$(‘body

div’).css(“background”,”#bbffaa”);

})

//選擇

所有class為one

的下一個div元素.

$(‘#btn3’).click(function(){

$(‘.one

+

div’).css(“background”,”#bbffaa”);

})

//選擇

id為two的元素後面的所有div兄弟元素.

$(‘#btn4’).click(function(){

$(‘#two

~

div’).css(“background”,”#bbffaa”);

})

});

/script

/head

body

h3層次選擇器./h3

button

id=”reset”手動重置頁面元素/button

input

type=”checkbox”

id=”isreset”

checked=”checked”/

label

for=”isreset”點擊下列按鈕時先自動重置頁面/label

br

/

br

/

input

type=”button”

value=”選擇

body內的所有div元素.”

id=”btn1″/

input

type=”button”

value=”在body內,選擇子元素是div的。”

id=”btn2″/

input

type=”button”

value=”選擇

所有class為one

的下一個div元素.”

id=”btn3″/

input

type=”button”

value=”選擇

id為two的元素後面的所有div兄弟元素.”

id=”btn4″/

br

/

br

/

!–

測試的元素

—

div

class=”one”

id=”one”

id為one,class為one的div

div

class=”mini”class為mini/div

/div

div

class=”one”

id=”two”

title=”test”

id為two,class為one,title為test的div.

div

class=”mini”

title=”other”class為mini,title為other/div

div

class=”mini”

title=”test”class為mini,title為test/div

/div

div

class=”one”

div

class=”mini”class為mini/div

div

class=”mini”class為mini/div

div

class=”mini”class為mini/div

div

class=”mini”/div

/div

div

class=”one”

div

class=”mini”class為mini/div

div

class=”mini”class為mini/div

div

class=”mini”class為mini/div

div

class=”mini”

title=”tesst”class為mini,title為tesst/div

/div

div

style=”display:none;”

class=”none”style的display為”none”的div/div

div

class=”hide”class為”hide”的div/div

div

包含input的type為”hidden”的div

input

type=”hidden”

size=”8″/

/div

span

id=”mover”正在執行動畫的span元素./span

/body

/html

效果圖：

更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jquery選擇器用法總結》、《jQuery操作DOM節點方法總結》、《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery表格(table)操作技巧匯總》及《jQuery常見經典特效匯總》

希望本文所述對大家jQuery程序設計有所幫助。

這個簡單，我寫了段代碼，你copy過去看下是不是你要的效果！望採納！！

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

title製作樹形菜單/title

style type=”text/css”

div{/*隱藏層*/

display:none;

}

a {/*文字鏈接的背影樣式*/

font-size:13px;

color: #ffffff;

text-decoration: none;

background-color:#669933;

width:100px;

line-height:25px;

text-align:center;

display: block;

border-right:1px solid #ffffff;

border-bottom:1px solid #ffffff;

}

a:hover {

/*鼠標在文字鏈接上時的文字背景樣式*/

font-size:13px;

color: #ffffff;

background-color:#ee9d01;

width:100px;

text-align:center;

display: block;

}

/style

script type=”text/javascript”

function show(d){

document.getElementById(d).style.display=’block’; //顯示層

}

function hide(d){

document.getElementById(d).style.display=’none’; //隱藏層

}

/script

/head

body

table border=”0″ cellspacing=”0″ cellpadding=”0″

tr

tda href=”#” onmousemove=”show(1)” onmouseout=”hide(1)”手機數碼/a/td

tda href=”#” onmousemove=”show(2)” onmouseout=”hide(2)”淘寶集市/a/td

tda href=”#” onmousemove=”show(3)” onmouseout=”hide(3)”品牌商城/a/td

/tr

tr

td

div id=”1″

a href=”#”手機數碼1/a

a href=”#”手機數碼2/a

a href=”#”手機數碼3/a

/div

/td

td

div id=”2″

a href=”#”淘寶集市1/a

a href=”#”淘寶集市2/a

a href=”#”淘寶集市3/a

/div

/td

td

div id=”3″

a href=”#”品牌商城1/a

a href=”#”品牌商城2/a

a href=”#”品牌商城3/a

/div

/td

/tr

/table

/body

/html

for(var i=1;i10;i++){

    $(“td”)[i].style.display=””;

}

for(var i=10;i22;i++){

    $(“td”)[i].style.display=”none”;

}

或者：

$(“td:lt(10):gt(0)”).css(“display”,””);

$(“td:lt(22):gt(9)”).css(“display”,”none”);

建議你找比較新的 比較標準的資料來學習 table元素是沒有跟表單那種name屬性的 如果你要取到最好加個id 用document.getElementsById來取才好 或者你把這個放到name為qform的一個form元素裡面 這樣才能用name取元素 而不是給table加name

在jsp中使用js中的設置屬性，進而獲得session保存的屬性值，實例如下：

session設置：

session.setAttribute(“username”,username);

session.setAttribute(“password”,password);

session獲取：

username=session.getAttribute(“username”);

password=session.getAttribute(“password”);

JavaScript選擇器介紹：

1、document.querySelector()

querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代

（1）獲取文檔中 id=“demo” 的元素：

document.querySelector(“#demo”);

（2）獲取文檔中第一個p的元素

document.querySelector(“p”);

（3）獲取文檔中 class=“example” 的第一個元素

document.querySelector(“.example”);

（4）獲取文檔中 class=“example” 的第一個 p 元素:

document.querySelector(“p.example”);

（5）獲取文檔中有 “target” 屬性的第一個 a 元素：

document.querySelector(“a[target]”);

（6）多選擇器時

document.querySelectorAll(’.ynqc’)

2、document.getElementById

這個方法將返回一個與之對應id屬性的節點對象，它是document對象特有的函數，只能通過其來調用該方法，使用方法下:document.getElementById(‘idName’);

3、getElementsByTagName

這個方法返回一個對象數組（準確的說是HTMLCollection集合）,返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);

4、getElementsByClassName

這個方法來獲取指定class名的元素,該方法返迴文檔中所有指定類名的元素集合，作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標，使用方法如下:document.getElementsByClassName(‘className’);

5、選擇器的優缺點

（1）querySelector是按css規範來實現的，所以它傳入的字符串中第一個字符不能是數字.

（2）querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．

（3）query選擇符選出來的元素及元素數組是靜態的，而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組，不會隨着文檔操作而改變．