`

jQuey常用选择器（一）

CSSjQueryJavaScriptHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        div,span,p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;

        }
        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                //改变id为one的元素的背景色         必须是单引号
                //$('#one').css('background','#bfa');

                //改变class为mini的所有元素背景色
                //$('.mini').css('background','red');

                //改变标签为div的所有元素背景色
                //$('div').css('background','red');

                //改变所有元素背景色
                //$('*').css('background','red');

                //改变<span>元素和id为two的元素的所有元素背景色
                //$('span,#two').css('background','red');

                //层次选择器
                //1.改变body里面所有<div>的背景色
                //$('body div').css('background','red');

                //2.改变body内子元素div的背景色
                //$('body>div').css('background','green');

                //3.改变id为one的元素的下一个兄弟div元素的背景色
                //$('#one + div').css('background','yellow');

                //4.改变id为two的元素后面所有div兄弟元素的背景色
                //$('#two ~ div').css('background','blue');

                //上面3的替代方法
                //$('#one').next('div').css('background','gray');

                //上面4的替代
                //$('#two').nextAll('div').css('background','gray');

                // 3过滤选择器
                //3.1基本过滤选择器

                //1改变第一个div的颜色
//                $('div:first').css('background','red');
//
//                // 2改变最后一个div的颜色
//                $('div:last').css('background','yellow');

                //3改变所有class不为one的div的背景色
                //$('div:not(.one)').css('background','yellow');

                //4改变索引值为偶数的div的背景色    计数从0开始
                //$('div:even').css('background','red');

                //5改变索引值为奇数的div的背景色
                //$('div:odd').css('background','red');

                //6改变索引值为3的div的背景色
                //$('div:eq(3)').css('background','red');

                //7改变索引值大于3的div的背景色
                //$('div:gt(3)').css('background','red');

                //8改变索引值小于3的div的背景色
                //$('div:lt(3)').css('background','red');

                //9改变所有标题元素的
                //$(':header').css('background','red');

                //10改变所有标题元素的
                //$(':animated').css('background','red');

                //3.2内容过滤选择器
                //1改变内容包含di的div元素的背景色
                //$('div:contains(di)').css('background','red');

                //2改变不包含子元素或者文本的空div元素的背景色
                //$('div:empty').css('background','red');

                //3改变含有class为mini的子元素的div元素的背景色
                //$('div:has(.mini)').css('background','red');

                //4改变含有子元素或者文本元素的元素的背景色
                //$('div:parent').css('background','red');

                //3.3可见性过滤选择器
                //1改变所有可见元素的背景色
                //$('div:visible').css('background','red');

                //2将不可见元素3秒显示出来
                //$('div:hidden').show(3000);


                //3.4 属性过滤选择器
                //1改变含有title属性的div元素的背景色
                //$('div[title]').css('background','red');

                //2改变属性值等于test的div元素的背景色
                //$('div[title=test]').css('background','red');

                //3改变title值不等于tets的div元素的背景色
                //$('div[title!=test]').css('background','red');

                //4改变title以te开头的div元素的背景色
                //$('div[title^=te]').css('background','red');

                //5.改变title以est结尾的div元素的背景色
                //$('div[title$=est]').css('background','red');

                //6.改变title含有es的div元素的背景色
                //$('div[title*=es]').css('background','red');

                //7改变含有id属性，并且title属性含有es的div元素的背景色
                //$('div[id][title*=es]').css('background','red');

                //3.5子元素过滤选择器
                //1改变每个class为one的div元素的第二个子元素的背景色    必须空格
                //$('div.one :nth-child(2)').css('background','red');

                //2改变每个class为one的div元素的第一个子元素的背景色
                //$('div.one :first-child').css('background','red');

                //3.改变每个class为one的div元素的最后一个子元素的背景色
                //$('div :last-child').css('background','red');

                //4.如果class为one的div元素只有一个子元素，那么改变这个子元素的背景色
                //$('div :only-child').css('background','red');

            }

        );
    </script>
</head>
<body>

    <h1>jQuery选择器</h1>
    <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" 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>

 

分享到：
| Flash Builder切换语言
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用，由一位国外专家创建，并进行了轻微的修改。** 在jQuery中，选择器分为多种类型，包括基础选择器、类别选择器、ID选择器、属性...

    jquery 城市选择器

    jQuery城市选择器是网页表单设计中常用的一种组件，通过合理的数据结构和事件驱动，实现了级联选择的效果。理解其工作原理，并结合实际项目需求进行优化，能有效提升网站的用户体验和交互性。随着前端技术的不断发展...

    jQuery颜色选择器

    jQuery颜色选择器是一种在网页开发中常用的前端工具，它极大地简化了用户在网页上选取颜色的过程。这个插件，称为colpick，是基于jQuery库构建的，为网页设计师和开发者提供了一个直观、易于集成的颜色选择界面。...

    jquery颜色选择器

    jQuery颜色选择器是一种在网页开发中常用的交互组件，它允许用户通过图形化界面选取颜色，通常集成在HTML表单中，用于输入颜色值。在网页设计中，这种选择器为用户提供了一种直观、便捷的方式来设定元素背景色、字...

    基于jquery实现的地址选择器

    【基于jQuery实现的地址选择器】是一种常用的前端交互组件，常用于用户在填写表单时选择他们的居住地或发货地址。这种组件通过级联下拉菜单的形式，展示省、市、区、乡镇、社区等多级行政区域，使得用户能够方便快捷...

    jquery 颜色选择器插件

    其中，颜色选择器作为一个常用的组件，能让用户方便地选取所需的颜色，提升用户体验。本文将深入探讨一款优秀的jQuery颜色选择器插件——colpick，它以其简洁的界面、丰富的功能和良好的可定制性，深受开发者喜爱。 ...

    jQuery选择器速查表

    基本选择器是jQuery中最常用的，它们通过元素的id、class和标签名来选取元素。 - **id选择器**：通过元素的id来选取，用`#`前缀标识。例如`$('#testID')`选取id为`testID`的元素。 - **类选择器**：通过元素的class...

    Jquery 选择器整理

    基本选择器是jQuery中最常用的类型之一，它们提供了简单的DOM元素选择方式。通过这些选择器，开发者可以快速定位到页面中的特定元素。 **代码示例与返回值：** 1. **根据给定的ID匹配一个元素** - **选择器:** `#...

    常用jQuery选择器总结

    jQuery选择器是jQuery库的核心功能之一，用于高效地定位并操作网页中的DOM元素。通过使用jQuery选择器，开发者可以轻松地选取需要的HTML元素，并执行一系列的DOM操作，如添加样式、修改内容或绑定事件等。 1. **...

    1、jQuery常用的选择器分类及其用法1

    以下是关于 jQuery 常用选择器分类及其用法的详细说明： ### 一、基本选择器 1. **ID 选择器**：使用 `#` 符号指定元素的 ID。例如，`$("#myID")` 会选取 ID 为 "myID" 的元素。 2. **Class 选择器**：使用 `.` ...

    jquery一些案列和一些选择器

    本教程将基于提供的"jquery一些案列和一些选择器"来深入理解jQuery的核心概念和常用选择器。 1. **jQuery引入** 在HTML文档中，可以通过在`&lt;head&gt;`标签内添加`&lt;script&gt;`标签来引入jQuery库。通常，我们从CDN（内容...

    39.jQuery中的常用选择器.avi

    jQuery中的常用选择器

    jquery常用插件包

    jQuery通过选择器语法大大简化了DOM元素的选取，使得开发者能够更快速地定位到页面上的特定元素。 接下来，我们逐一分析这些插件： 1. **jQuery UI Dialog 插件**：Dialog插件是jQuery UI库的一部分，它允许开发者...

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例，帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS，可以轻松地选取...

    jQuery 常用版本大全

    例如，通过`$()`选择器可以轻松选取HTML元素，`$(element).click(function() {...})`可以绑定点击事件，`$(element).hide()`和`$(element).show()`用于元素的显示和隐藏，而`$(element).animate()`则实现了平滑的...

    jQuery常用功能大全

    ### jQuery常用功能详解 #### 一、页面元素的引用 在使用jQuery时，最基础的操作之一就是选择页面上的元素。这通常通过`$()`符号来完成。jQuery的强大之处在于它支持多种选择器语法，比如： - **ID选择器**：通过...

    jQuery选择器

    基本选择器是jQuery中最常用的选择器之一，用于快速定位文档中的特定元素。它包括： - **ID选择器**：`#id` - 匹配文档中带有指定ID的单一元素。例如，`$("#test")`选取id为`test`的元素。 - **类选择器**：`....

    城市选择器代码 - jquery

    城市选择器是网页开发中常用的一种组件，尤其在处理与地理位置相关的数据时，它能提供用户友好的交互体验。在本案例中，我们讨论的是一个基于jQuery实现的城市选择器，其特点是采用浅绿色调，给人一种温和的感觉，...

    jquery 颜色选择插件

    **jQuery颜色选择插件**是一种常用的前端开发工具，它为网页中的输入元素提供了方便的颜色选择功能，用户可以通过视觉化的调色板选取颜色，提升用户体验。本文将深入探讨jQuery颜色选择插件及其相关知识点。 首先，...

Magicbox
Global site tag (gtag.js) - Google Analytics