jQuery选择器全解-基础选择器

Id选择：

根据元素Id选择,$(“layer1”) 选择ID为layer1的元素

<div id="layer1" style="width: 300px;height: 300px;border: 1px solid red"></div>
alert($("#layer1").height());

element

element选择器是一个用于搜索的元素。指向DOM节点的标签名

<a href=""></a>
<a href=""></a>
<a href=""></a>
alert($("a").length);

.class选择器

.class选择器根据给定的类匹配元素，是一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到

<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
alert($("#ID").val() +  "  " + $("a").text() + "    " + $(".classname").val());

selector1,selector2,selectorN选择器

这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

<h2 class="title">并集选择器 的h2</h2>
<dl>
    <dt>并集选择器</dt>
</dl>
<input  type="button" value="设置所有h2 dt  class 为title 的背景颜色" id="4" /><br />

$("#4").click(function (){
    $("h2,dt,.title").css("background","pink");
});

层级选择器

ancestor descendant选择器

其指在给定的祖先元素下匹配所有的后代元素，作为参数的ancestor代表任何有效的选择器，而descendant则用以匹配元素的选择器，并且它是第一个选择器的后代

<form>

    <label>Name:</label>

    <input name="name" />

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />

    </fieldset>

</form>
alert($("form input").length)

parent>child选择器

parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下：parent代表任何有效选择器；child用以匹配元素的选择器，并且它是第一个选择器的子元素。

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">World
            <span id="n6" class="c">365mini.com</span>
        </span>
    </p>
</div>
alert($("p > span ").length + "  " + $("p > span > span").length);

prev+next选择器

这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下：prev代表任何有效选择器；next代表一个有效选择器并且紧接着第一个选择器。

<form>

    <label>Name:</label>

    <input name="name" />

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />

    </fieldset>

</form>
alert($("label + input").length)

prev ~ siblings选择器

prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下：prev代表任何有效选择器；siblings代表一个选择器，并且它作为第一个选择器的同辈。

<div id="divTest">
    <input type="text" value="投资" />
    <input id="next" type="text" />
    <input type="text"  value="担当" />
    <input type="text" title="学习" value="学习" />
    <a>1</a>
    <a>2</a>
</div>
alert(jQuery("#next~[title]").val());

jQuery选择器全解-基本过滤器

<div id="divTest">
    <ul>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
<input type="button" value="li_first" id="one"/>
<input type="button" value="li_last" id="two"/>
<input type="button" value="not(selector)" id="three"/>
<input type="button" value="li_even" id="four"/>
<input type="button" value="li_odd" id="five"/>
<input type="button" value="li_eq(index)" id="six"/>
<input type="button" value="li_gt(2)" id="seven"/>
<input type="button" value="li_:lt(1)" id="leng"/>

first

匹配找到的第一个元素

$("#one").click(function (){
    $("li:first").css("background","pink");
});

last

匹配找到的最后一个元素

$("#two").click(function (){
    $("li:last").css("background","pink");
});

not(selector)

去除所有与给定选择器匹配的元素

$("#three").click(function (){
alert($("input:not(:checked)").val())
});

even

匹配所有索引值为偶数的元素，从 0 开始计数

$("#two").click(function (){
    $("li:even").css("background","pink");
});

odd

匹配所有索引值为奇数的元素，从 0 开始计数

$("#two").click(function (){
    $("li:odd").css("background","pink");
});

eq(index)

匹配一个给定索引值的元素 注:index从 0 开始计数

$("#two").click(function (){
    $("li:eq(3)").css("background","pink");
});

gt(index)

匹配所有大于给定索引值的元素 注:index从 0 开始计数

$("#two").click(function (){
    $("li:gt(3)").css("background","pink");
});

lt(index)

选择结果集中索引小于 N 的 elements 注:index从 0 开始计数

$("#two").click(function (){
    $("li:lt(3)").css("background","pink");
});

jQuery选择器全解-内容过滤器

<div id="divTest">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li><a href=""></a></li>
        <li>内容过滤器</li>
        <li>hyip内容过滤器</li>
    </ul>
</div>
<input type="button" value="li_contains(text)" id="one"/>
<input type="button" value="li_empty+li" id="two"/>
<input type="button" value="li_has(selector)" id="three"/>

contains(text)

匹配包含给定文本的元素

 $("#one").click(function (){
    $("li:contains(‘hyip‘)").css("background","pink");
});

empty

匹配所有不包含子元素或者文本的空元素

 $("#one").click(function (){
    $("li:empty+li").css("background","pink");
});

:has(selector)

匹配含有选择器所匹配的元素的元素

 $("#one").click(function (){
    $("li:has(a)").css("background","pink");
});

可见性过滤器  Visibility Filters

<ul>
    <li>可见1</li>
    <li style="display:none;">不可见2</li>
    <li style="display:none;">不可见<3/li>
    <li>可见4</li>
</ul>

hidden

匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden

$("#one").click(function (){
 alert($("li:hidden").length);
 });

visible

匹配所有的可见元素

$("#one").click(function (){
 alert($("li:visible").length);
 });

jQuery选择器全解-属性过滤器

<input type="text" id="yi" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />

<button id="one">点击</button>

[attribute]

查找所有input标签中含有 id 属性的 div 元素

$("#one").click(function (){
 $("input[id]").css("background","pink");
 });

[attribute=value]

查找所有 name为hyipinvest的值

$("#one").click(function (){
 $("input[name=‘hyipinvest‘]").css("background","pink");
 });

[attribute!=value]

查找所有input中name不为hyipinvest的值

$("#one").click(function (){
 $("input[name!=‘investhyip‘]").css("background","pink");
 });

[attribute^=value]

查找所有input中name以hyip开头的值

$("#one").click(function (){
 $("input[name^=‘hyip‘]").css("background","pink");
 });

[attribute$=value]

查找所有input中name以hyip结束的值

$("#one").click(function (){
 $("input[name$=‘hyip‘]").css("background","pink");
 });

[attribute=value]

查找所有input中name包含oo的值

$("#one").click(function (){
 $("input[name*=‘oo‘]").css("background","pink");
 });

jQuery选择器全解-子元素过滤器

html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。

（1）:nth-child选择器。

（2）:first-child、:last-child选择器（两种）。

（3）:only-child选择器。

子元素过滤器和上面基本过滤器相差不多，这里我就不一一举例了。

jQuery选择器全解-表单选择器——表单过滤器

<form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="image" /><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
</form>

 $(document).ready(function(){
        var $alltext = $("#form1 :text");
        var $allpassword= $("#form1 :password");
        var $allradio= $("#form1 :radio");
        var $allcheckbox= $("#form1 :checkbox");
        var $allsubmit= $("#form1 :submit");
        var $allimage= $("#form1 :image");
        var $allreset= $("#form1 :reset");
        var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
        var $allfile= $("#form1 :file");
        var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
        var $allselect = $("#form1 select");
        var $alltextarea = $("#form1 textarea");
        var $AllInputs = $("#form1 :input");
        var $inputs = $("#form1 input");
        $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
                .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
                .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
                .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
                .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
                .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
                .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
                .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
                .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
                .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
                .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
                .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
                .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
                .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
                .css("color", "red")
        $("form").submit(function () { return false; }); // return false;不能提交.
    });

 

时间： 2024-08-09 22:02:08

jQuery选择器全解-基础选择器的相关文章

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el

jQuery-强大的jQuery选择器 (详解)[转]

1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个

jQuery选择器详解及实例---《转载》

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(func

jQuery内核详解与实践读书笔记2:破解jQuery选择器接口1

前两篇已经介绍了如何搭建一个jQuery框架的雏形,从这一篇开始详细了解jQuery选择器的接口.jQuery选择器功能强大但用法很简单,它仅仅提供了一个接口:jQuery(),也可以简写为$(). 1. 简单但很复杂的黑洞 jQuery提供了唯一的接口(jQuery()或$())使选择器与外界进行交流.jQuery框架的基础是查询,即查询文档元素对象,因此可以认为jQuery对象就是一个选择器,并在此基础上构建和运行查询过滤器.jQuery查询结果的数据集合是jQuery对象的一部分.在$()

JQuery————基础&amp;&amp;基础选择器

环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库.在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版. 引入jQuery文件库 下载完jQuery框架文件后,并不需要任何的安装,仅需要使用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文

jQuery选择器 (详解)

1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

jQuery选择器详解

根据所获取页面中元素的不同,可以将jQuery选择器分为4大类:基本选择器.层次选择器.过滤选择器.表单选择器. 其中,过滤选择器有可以分为6种:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器器.子元素过滤选择器.表单对象属性过滤选择器. 1.基本选择器 #id.* ..class .元素标签 .selector .selectorAll 2.层次选择器 后代.父子.相邻.兄弟: parent .child .prev . next . siblings .+ . > .~ .

CSS3 基础(1)——选择器详解

CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 [attribute^=value] [src^="https"] 选择每一个src属性的值以"https"开头的元素 [attribute$=value] [src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的