摘要:1、选择器的使用:  基本选择器:#id(根据给定的ID匹配一个元素)、element(根据给定的元素名匹配所有元素)、.class(根据给定的类匹配元素)、*(匹配所有的元素)、selector1,selectorN(将每个选择器匹配到的元素合并后一起返回)

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

1、选择器的使用:

 

 

基本选择器:

#id(根据给定的ID匹配一个元素)、element(根据给定的元素名匹配所有元素)、.class(根据给定的类匹配元素)、*(匹配所有的元素)、selector1,selectorN(将每个选择器匹配到的元素合并后一起返回)

例:

使用JQuery:

$('#myp').css('background-color','red');

使用js:

document.getElementById('myp').style.backgroundColor = 'red';

 

 

层次选择器:

ancestor descendant(根据祖先元素匹配需哦有的后台代元素)、parent>child(根据父元素匹配配所有的子元素)、prev+next(匹配所有紧接在prev元素后的相邻元素)、prev~siblings(匹配prev元素之后的所有兄弟元素)

例:

$(function () {

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

// $('#pfirst img').hide(2000);//获取的是id为pfirst的层中的所有tagname为img的元素,不管这些元素是否还嵌套在别的元素中:在本题当中指的是第一层的内容有变化

$('#pfirst span img').hide(2000); //获取的是id为pfirst的层中的所有span子元素中的img元素,需要注意的是这个span子元素可以是pFirst的儿子或者孙子:再加一个p在第二个span上面,也就是说用一个新的p把第二个span括起来,这种方法指出的是第一个p是第二个p的父类,也能获取第二个p内容,所以zilei和父类都能获得

//$('#pfirst>span img').hide(2000); //获取的是id为pFirst的层中的第一级span元素中的所有img元素::在本题当中指的是第一层的内容有变化

//$('#pfirst+p img').hide(2000); //获取的是id为pFirst的层后面的同级的第一个p元素,且此p必须紧随其后,如果中间有别的元素隔开,则不能获取。:本题当中指的是id为img6的图片

//$('#pfirst+p img').hide(2000); //本题当中指的是id为img6的图片

//$('#pfirst').next().hide(2000);//获取的是id为di

vfirst的层后面的第一个同级元素,不管是什么类型:本题当中指的是id为img2的图片

//$('#pfirst~p img').hide(2000); //获取的pfirst后边所有同级别的,且类型为p里边的所有img元素:本题当中指的是id为img3的图片,也就是第二层里面的东西的改变

//$('#pfirst').nextAll().hide(2000);//获取的是pfirst后变的所有同级元素,不管是什么类型(类型不确定):本题 当中指的是除了第一层外,其它所有的层都有变化

    })

})

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

    <p id="pfirst">

        <span>风景 <a href="#"><img alt="" id="img1" src="images/1.jpg" class="imgclass" /></a></span>

        <!--<p>-->

        <!--第二种方法利用时,加上该p-->

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

        <!-- </p>-->

第一层

    </p>

    <!-- 如果添加  $('#pfirst+p img').hide(2000);这个属性,就要把id为img6的图片隐藏-->

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

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

    <p>第三层<img alt="" id="img4" src="images/5.jpg" class="imgclass" /></p><img alt="" id="img5" src="images/1.jpg" class="imgclass" />

</body>

 

 

过滤选择器:

(简单过滤选择器):first()或:first(获取死一个元素)、last()或:last(获取最后一个元素)、:not(selector)(获取除给定选择器外的所有元素)、:even(获取所有索引值为偶数的元素,索引号从0开始)、:odd(获取所有索引值为奇数的元素,索引号从0开始)、:eq(index)(获取指定索引值的元素,索引号从0开始)、:gt(index)(获取所有大于给定索引值的元素,索引号从0开始)、:lt(index)(获取所有小于给定索引值的元素,索引号从0开始)、:header(获取所有标题类型的元素,如h1、h2...)、:animated(获取正在执行动画效果的元素)

(内容过滤选择器)::contains(text)(获取包含给定文本的元素)、:empty(获取所有不包含子元素或者文本的空元素)、:has(selector)(获取含有选择器所匹配的元素的元素)、:parent(获取含有子元素或者文本的元素)

(可见性过滤选择器)::hidden(获取所有不可见元素,或者type为hidden的元素)、:visible(获取所有的可见元素)

(属性过滤选择器):[attribute](获取包含给定属性的元素)、[attribute=value](获取等于给定的属性是某个特定值的元素)、[attribute!=value](获取不等于给定的属性是某个特定值的元素)、[attribute^=value](获取给定的属性是以某些特定值开始的元素)、[attribute$=value](获取给定的属性是某个特定值结束的元素)、[attribute*=value](获取给定的属性是以包含某些值的元素)、[selector1][selector2][selectorN](获取满足多个条件的复合属性的元素)

(子元素顾虑选择器)::nth-child(eq|even|odd|index)(获取每个父元素下的特定位置元素,所以闹从1开始)、:first-child(获取每个父元素下的第一个子元素)、:last-child(获取每个父元素下的最后一个子元素)、:only-child(获取每个父元素下的仅有一个子元素)

(表单对象属性过滤器)::enable(获取表单中所有属性为可用的元素)、:disabled(获取表单中所有属性为不可用的元素)、:checked(获取表单中所有被选中的元素)、:selected(获取表单中所有被选中option的元素)

 

 

表单选择器:

:input(获取所有input、textarea、select)、:text(获取所有单行文本框)、:password(获取所有密码框)、:radio(获取所有单选按钮)、:checkbox(获取所有复选框)、:submit(获取所有提交按钮)、:image(获取所有图像域)、:reset(获取所有重置按钮)、:button(获取所有按钮)、:file(获取所有文件域)

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_8826.html