元素类型jQuery选择器

zoukankan html css js c++ java

元素类型jQuery选择器

在本篇文章中,我们主要介绍元素类型的内容,自我感觉有个不错的建议和大家分享下

    ---------基本选择器--------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

.imgclass

{

200px; height:200px;

}

.imgclass1

{

210px; height:210px;

}

table tr td

{

300px; height:300px;

}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#Button1').click(function () {

//获得的是有所类型(tagname)为img的元素

//$('img').hide(3000);

//$('img').show(3000);

//获得的是有所class性属的值为“imgclass”的元素

//$('.imgclass').hide(3000);

//$('.imgclass').show(3000);

//获得文档中的有所元素

//$('*').hide(2000);

//$('*').css('background-color', 'Blue');

//$('#img1,#img3,#Button2').hide(2000);

//$("#img1,#img3,#Button2").show(2000);//定一是将有所id用一对''括起来，而不能每一个id分别用引号括起来

//多个选择器既可是以id，也可是以id，tagname和classname的混合体

//$('#img1,#img3,input').hide(2000);

//$("#img1,#img3,input").show(2000);

})

//变改图片款式

$('#Button2').click(function () {

$('#img2').removeClass();

$('#img2').addClass('imgclass1');

})

})

</script>

    </head>

    <body>

<table>

<tr>

<td>

<img id="img1" src="images/1.jpg" class="imgclass" />

</td>

<td>

<img id="img2" src="images/2.jpg" class="imgclass" />

</td>

</tr>

<tr>

<td>

<img id="img3" src="images/3.jpg" class="imgclass" />

</td>

<td>

<img id="img4" src="images/4.jpg" class="imgclass" />

</td>

</tr>

</table>

<input id="Button1" type="button" value="玩儿" /><br />

<input id="Button2" type="button" value="变改件控款式" /><br />

    </body>

    </html>

    ----次层选择器--------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

.imgclass

{

100px;

height: 100px;

}

div

{

250px;

height: 250px;

background-color: #eee;

border: solid 2px Blue;

}



</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#Button1').click(function () {

//$('#divFirst img').hide(2000); //获得的是id为divfirst的层中的有所tagname为img的元素，不管这些元素否是还嵌套在别的元素中

//$('#divFirst span img').hide(2000); //获得的是id为divfirst的层中的有所span子元素中的img元素,要需注意的是这个span子元素可是以divFirst的儿子或者孙子

// $('#divFirst>span img').hide(2000); ////获得的是id为divFirst的层中的第一级span元素中的有所img元素

//$('#divFirst+div img').hide(2000); //获得的是id为divFirst的层后面的同级的第一个div元素，且此div必须紧随其后，如果旁边有别的元素离隔，则不能获得。

//$('#divFirst').next().hide(2000); //获得的是id为divfirst的层后面的第一个同级元素，不管是什么类型

//$('#divFirst~div img').hide(2000); //获得的divfirst后边有所同级别的，且类型为div里边的有所img元素,即藏隐第二级的

$('#divFirst').nextAll().hide(2000); //获得的是divfirst后变的有所同级元素，不管是什么类型(类型不确定)

})

})



</script>

    </head>

    <body>

<input id="Button1" type="button" value="次层选择器" />

<div id="divFirst">

<span>第一层景致<a href="#">

<img alt="" src="images/1.jpg" class="imgclass" /></a> </span>

<div>

<span><img src="images/2.jpg" class="imgclass" /></span></div>



</div>

    <img id="img6" src="images/5.jpg" class="imgclass" />

<div>

第二层<img id="img3" src="images/3.jpg" class="imgclass" />

</div>

<div>

第三层<img id="img4" src="images/4.jpg" class="imgclass" />

</div>

<img id="img5" src="images/6.jpg" class="imgclass" />

    </body>

    </html>

    ----表单选择器---

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

#Select1

{

144px;

}

#TextArea1

{

height: 124px;

250px;

}

.div{ border:solid 1px #eee; background-color:Aqua;}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

//$('#form1 div').html($('#form1 :input').length);

//$('#form1 :password').css('background-color','red');

//$('#form1 :text').css('display','none');

//$('#form1 :input').css('display', 'none');

//$('#form1 :radio').css('display', 'none');

//$('#form1 :checkbox').css('display', 'none');

//$('#form1 :submit').css('display','none');

//$('#form1 :reset').css('display', 'none');

//$('#form1 :image').css('display', 'none');

// $('#form1 :file').css('display', 'none');

})

</script>

    </head>

    <body>

    <form id="form1" action="简略滤过.aspx">

<h1>

注册用户</h1>



<p>

用户名<input id="Text1" type="text" /></p>

<p>

密码<input id="Password1" type="password" /></p>

<p>

技巧<select id="Select1" name="D1" multiple="multiple">

<option value="0">javascript</option>

<option value="1">sql server</option>

<option value="2">c#</option>

</select></p>

<p>

学历:<input id="Radio1" checked="checked" name="R1" type="radio" value="V1" />大专<input

id="Radio2" checked="checked" name="R1" type="radio" value="V1" />本科<input id="Radio3"

checked="checked" name="R1" type="radio" value="V1" />研究生</p>

<p>

喜好:<input id="Checkbox1" type="checkbox" />山爬<input id="Checkbox2" type="checkbox" />泅水<input

id="Checkbox3" type="checkbox" />踢球<input id="Checkbox4" type="checkbox" />玩</p>

<p>

验证码:<input type="image" src="images/1.jpg" style="80px; height:80px" />

<p>

个人简介:</p>

<p>

<textarea id="TextArea1" name="S1" rows="3"></textarea></p>

<p>

上传头像:<input id="File1" type="file" /><input id="Button1" type="button" value="上传" /></p>

<p>

<input id="Submit1" type="submit" value="注册" /><input id="Reset1" type="reset" value="置重" /></p>

<div id="divShow">

</div>

</form>

    </body>

    </html>

    -------简略滤过选择器----------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

.imgclass

{

200px;

height: 200px;

}

.imgclass1

{

220px;

height: 220px;

}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

    每日一道理
如果只看到太阳的黑点，那你的活生将缺少温暖；如果你只看到月亮的阴影，那么你的生命历程将难以找到光明；如果你总是发现朋友的缺点，你么你的人生旅程将难以找到知音；同样，如果你总希望自己完美无缺，假设你的这一愿望真的能如愿以偿，那么你最大的缺点就是没有缺点。

$(function () {

$('#Button1').click(function () {

//$('#img1').next().next().next().hide(2000);//虽然很弱智，但是能用。

//$('img:eq(1)').hide(2000);//获得img集合中的第二个元素，即下表为1的元素

//$('img:gt(0)').hide(2000); //获得img集合中下表大于0的有所元素，即下表为1的元素

//$('img:lt(3)').hide(2000);

//$('img:even').hide(2000); //获得img集合中有所下表为偶数的元素

//$('img:odd').hide(2000); //获得img集合中有所下表为偶数的元素

/*$('img:eq(0)').hide(2000);

$('img:first').hide(2000);

$('img').first().hide(2000);*/

//获得img元素集合中的第一个元素的三种式方

/*$('img:not(#img1)').hide(2000);

$('img:not(.imgclass1)').hide(2000);*/

//not后边的元素不能使索引，可是以元素id或者classname

$('p,a,input,img:not(.imgclass1)').hide(2000); //not后面的类型可以不止一个，但是要消除的元素的类型定一要和:not紧挨着

})

})

</script>

    </head>

    <body>

    <img id="img1" src="images/1.jpg" class="imgclass1" />

<img src="images/2.jpg" class="imgclass" />

<img src="images/3.jpg" class="imgclass" />

<img src="images/4.jpg" class="imgclass" />

<br />

<a href="#">百度</a>

<p>大家讲演不要念稿，请说普通话</p>

<input id="Button1" type="button" value="玩儿" /><br />

    </body>

    </html>

    ------内容滤过选择器---------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

div{ float:left; border:solid 1px #ccc; 65px; height:65px; }

span{ float:left; border:solid 1px #ccc; 45px; height:45px; background-color:#eee;}

.classadd{ background-color:Red;}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript"> $(function () {

$('#btn').click(function () {

//为div元素中有所文本括包A的元素添加款式，括包嵌套元素

//$('div:contains(A)').addClass('classadd');

//为div元素中有所不括包子元素或者文本的元素添加款式

//$('div:empty').addClass('classadd');

//为div元素中有所含包span元素的元素设置款式，不含包span元素

//$('div:has(span)').addClass('classadd');

//为有所含包子元素或者文本的元素设置款式

$('div:parent').addClass('classadd');

})

})

</script>

    </head>

    <body>

    <form id="form1" >

<div>ABCD</div>

<div><span></span></div>

<div>EACH</div>

<div></div>

<div><div>CAD</div></div>

<div><span></span></div>

<input type="button" id="btn" value="点我" />

</form>

    </body>

    </html>

    ----性属滤过选择器----

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">



</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#Button1').click(function () {

//为有所拥有id性属的元素设置款式,画动效果

//$('div[title]').hide(3000);

//$('div[title=t1]').hide(3000);

//$('div[title!=t1]').hide(3000);

// //性属值以t头开

//$('div[title^=t]').hide(3000

//$('div[title$=1]').hide(3000);

//$('div[title*=t]').hide(3000);

// //id值以d开始，title值以3束结

$('div[id^=d][title$=4]').hide(3000);

})

})

</script>

    </head>

    <body>

    <div title="t1">第一层

    </div>

    <div id="div2" title="t2">第二层

    </div>

    <div id="div3" title="t3">第三层

    </div>

    <div id="div4" title="t4">第四层

    </div>

<input id="Button1" type="button" value="click" />

    </body>

    </html>

    -----子元素滤过选择器------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

ul{ list-style-type:none; padding:0px;}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#btn').click(function () {

//$('li:eq(0)').css('background-color','Blue');

//$('li:first-child').css('background-color', 'Blue')

//$('li:last-child').css('background-color', 'Blue')

$('li:nth-child(2)').css('background-color', 'Blue')//从1开始，不是0

    // $('li:only-child').css('background-color', 'Blue')

})

})

</script>

    </head>

    <body>

<ul>

<li>大师兄，傅师让魔鬼抓走了</li>

<li>二师兄，傅师让魔鬼抓走了</li>

<li>大师兄，二师兄，傅师让魔鬼抓走了</li>

<li>傅师，大师兄来回救我们的</li>

</ul>

<ul>

<li>大师兄，咱们把产业分了吧</li>

<li>沙师弟，咱们把产业分了吧</li>

<li>大师兄，二师兄，咱们把产业分了吧</li>

<li>傅师，大师兄，二师兄把产业分了</li>

</ul>

<ul>

<li>悟空，去弄些斋饭来</li>

<li>沙僧，去弄些斋饭来</li>

<li>八戒，去弄些斋饭来</li>

</ul>

<ul>

<li>沙僧语录:大师兄，傅师让魔鬼抓走了;</li></ul>

<input type="button" id="btn" value="click" />

    </body>

    </html>

    ------选择器综合训练导航条-------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

<title></title>

<style type="text/css">

body{ font-size:13px;}

#divFrame{ border:1px solid #666; 300px; overflow:hidden}

#divFrame .divHead{ background-color:#eee; padding:8px; height:18px; cursor:hand;}

#divFrame .divHead h3{ padding:0px; margin:0px; float:left}

#divFrame .divHead span{ float:right; margin-top:3px;}

#divFrame .divContent{ padding:8px}

#divFrame .divContent ul{ list-style-type:none; margin:0px; padding:0px}

#divFrame .divContent ul li{ float:left; 95px; height:23px; line-height:23px}

#divFrame .divBot{ float:right; padding-top:5px; padding-bottom:5px}

</style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('.divHead').click(function () {

if ($('.divContent').is(':visible')) {

$('.divHead span').html('开展');

$('.divContent').hide(3000);

}

else {

$('.divHead span').html('挂起');

$('.divContent').show(3000);

}

});

$('.divBot>a').click(function () {

if ($('.divBot>a').text() == '简化') {

$('ul li:gt(4):not(:last)').hide(3000);

$('.divBot>a').text('更多');

}

else {

$('ul li:gt(4):not(:last)').show(3000).css('background-color', '#eee');

$('.divBot>a').text('简化');

}

});

});

</script>

    </head>

    <body>

    <div id="divFrame">

<div class="divHead"><h3>图书分类</h3>

<span>挂起</span>

</div>

<div class="divContent">

<ul>

<li><a href="#">小说（1100）</a></li>

<li><a href="#">文艺（230）</a></li>

<li><a href="#">春青（1430）</a></li>

<li><a href="#">少儿（1560）</a></li>

<li><a href="#">活生（870）</a></li>

<li><a href="#">社科（1460）</a></li>

<li><a href="#">管理（1450）</a></li>

<li><a href="#">计算机（1780）</a></li>

<li><a href="#">育教（930）</a></li>

<li><a href="#">工具书（3450）</a></li>

<li><a href="#">引进版（980）</a></li>

<li><a href="#">其他类（3230）</a></li>



</ul>

</div>

<div class="divBot">

<a href="#">简化</a>

</div>

    </div>

    </body>

    </html>

文章结束给大家分享下程序员的一些笑话语录：自行车
一个程序员骑着一个很漂亮的自行车到了公司，另一个程序员看到了他，问到，“你是从哪搞到的这么漂亮的车的？”
骑车的那个程序员说， “我刚从那边过来，有一个漂亮的姑娘骑着这个车过来，并停在我跟前，把衣服全脱了，然后对我说，‘你想要什么都可以’”。
另一个程序员马上说到， “你绝对做了一个正确的选择，因为那姑娘的衣服你并不一定穿得了”。

查看全文

相关阅读:
python 多进程下的日志打印
 卷积神经网络思考点,卷积网络就是很多个小分类器构建的网络
 ShuffleNetV1 paper reading
find,grep,mv 组合使用,对大量数据切割方便
 常用的开源协议
 python3 日志重复打印logger
pytorch clamp 与clamp_区别
 version GLIBCXX_3.4.21 not defined in file libstdc++.so.6 with link time reference
pytorch,cuda8,torch.cuda.is_available return flase (ubuntu14)
opencv remap 函数

原文地址：https://www.cnblogs.com/xinyuyuanm/p/3035868.html