jQuery选择器 基本选择器 层次选择器 表单选择器 过滤选择器 练习 事例

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

.imgclass

{

width:200px; height:200px;

}

.imgclass1

{

width:210px; height:210px;

}

table tr td

{

width:300px; height:300px;

}

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

})

})

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

.imgclass

{

width: 100px;

height: 100px;

}

div

{

width: 250px;

height: 250px;

background-color: #eee;

border: solid 2px Blue;

}

$(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后变的所有同级元素，不管是什么类型(类型不确定)

})

})

第一层风景







第二层


第三层




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

#Select1

{

width: 144px;

}

#TextArea1

{

height: 124px;

width: 250px;

}

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

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

})

注册用户

用户名

密码

技术javascriptsql serverc#

学历:大专本科研究生

爱好:爬山游泳踢球玩

验证码:

个人简介:

上传头像:

-------简单过滤选择器----------

.imgclass

{

width: 200px;

height: 200px;

}

.imgclass1

{

width: 220px;

height: 220px;

}

$(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紧挨着

})

})









百度
大家演讲不要念稿，请说普通话

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

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

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

.classadd{ background-color:Red;}

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

})

})

ABCD

EACH

CAD

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

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

})

})

第一层

第二层

第三层

第四层

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

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

$(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')

})

})

大师兄，师傅让妖怪抓走了
二师兄，师傅让妖怪抓走了
大师兄，二师兄，师傅让妖怪抓走了
师傅，大师兄回来救我们的

大师兄，咱们把家当分了吧
沙师弟，咱们把家当分了吧
大师兄，二师兄，咱们把家当分了吧
师傅，大师兄，二师兄把家当分了

悟空，去弄些斋饭来
沙僧，去弄些斋饭来
八戒，去弄些斋饭来

沙僧语录:大师兄，师傅让妖怪抓走了;

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

body{ font-size:13px;}

#divFrame{ border:1px solid #666; width: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; width:95px; height:23px; line-height:23px}

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

$(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('简化');

}

});

});

图书分类

挂起

小说（1100）
文艺（230）
青春（1430）
少儿（1560）
生活（870）
社科（1460）
管理（1450）
计算机（1780）
教育（930）
工具书（3450）
引进版（980）
其他类（3230）

简化