本文目录一览：
- 1、jQuery层次选择器用法示例
- 2、JS实现树形选择器
- 3、js 选择器 tr 选择若干个怎么写？
- 4、JS选择器
- 5、vue.js使用element-ui改写一个多级联动的选择器
- 6、javascript选择器有哪些
jQuery层次选择器用法示例
本文实例讲述了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程序设计有所帮助。
JS实现树形选择器
这个简单，我写了段代码，你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
js 选择器 tr 选择若干个怎么写？
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");
JS选择器
建议你找比较新的 比较标准的资料来学习 table元素是没有跟表单那种name属性的 如果你要取到最好加个id 用document.getElementsById来取才好 或者你把这个放到name为qform的一个form元素里面 这样才能用name取元素 而不是给table加name
vue.js使用element-ui改写一个多级联动的选择器
在jsp中使用js中的设置属性，进而获得session保存的属性值，实例如下：
session设置：
session.setAttribute("username",username);
session.setAttribute("password",password);
session获取：
username=session.getAttribute("username");
password=session.getAttribute("password");
javascript选择器有哪些
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这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．