<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>位置选择器</title>

        <script src="js/jquery.js"></script>

        <script type="text/javascript">

        $(function(){

            //获取第一个li

            $("li:first").css("border","2px dotted red");

            //获取最后一个出现的DIV

            $("div:last").css("border","2px dotted black");

            //奇数 odd 段落，在jQuery中所有的元素从0开始

            $("p:odd").css("border","2px dotted blue");

            //偶数 even 输入框

            $("input[type='text']:even").css("border","2px dotted orange");

            //第三个超链接 使用eq精确指定组建下标位置

            $("a:eq(2)").css("border","2px dotted lightblue");

            //获取第三个之后的超链接 使用gt获取指定位置之后的所有元素

            $("a:gt(2)").css("border","3px dotted red");

            //利用lt获取指定位置之前的元素

            $("p:lt(1)").css("border","4px soild red");

        })

        </script>

    </head>

    <body>

    <div>

    <ul>

    <li>li111111</li>

    <li>li2222222</li>

    <li>li33333</li>

    </ul>

    </div>

    <div>

        <p>p1</p>

        <p>p2</p>

        <p>p3</p>

        <p>p4</p>

        <p>p5</p>

    </div>

    <div>

        姓名<input type="text" />

        <br>

                姓名1<input type="text" /><br>

                        姓名2<input type="text" /><br>

                                姓名3<input type="text" /><br>

                                        姓名4<input type="text" /><br>

                                                姓名5<input type="text" /><br>

    </div>

    <div>

        <a href="#">href1</a>

        <a href="#">href2</a>

        <a href="#">href3</a>

        <a href="#">href4</a>

        <a href="#">href5</a>

    </div>

    </body>

</html>

jQuery学习- 位置选择器的更多相关文章

  1. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  3. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery学习- 层叠选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery学习-属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery学习-基本选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

  8. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  9. jQuery学习(三)——选择器总结

    1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...

随机推荐

  1. Hibernate 集成 Ehcache 开启二级缓存

    一.将 Ehcache.xml 放到 classpath 下 <?xml version="1.0" encoding="UTF-8"?> < ...

  2. 创建和修改 ExpressRoute 线路

    本文介绍如何使用 Azure 门户和 Azure Resource Manager 部署模型创建 Azure ExpressRoute 线路. 以下步骤还说明如何查看线路状态,以及如何更新.删除和取消 ...

  3. Oracle EBS 获取用户挂的职责 请求 请求的类别(RTF还是什么的)

    select fu.user_ID, fu.user_name, fu.start_date, fu.END_DATE, fu.description, fe.last_name, fr.RESPON ...

  4. 一些centos 6和centos 7的区别

      CentOS 6(OLE 6,RHEL 6类似) CcnetOS 7(OLE 7,RHEL 7类似) 影响 默认文件系统 ext4 xfs 大量小文件在ext4上工作性能较好在64位linux中, ...

  5. 用UITextView模拟UITextField的placeHolder

    用UITextView模拟UITextField的placeHolder 效果: 源码: // // ViewController.m // TextView // // Created by You ...

  6. AFNetworking 2.5.x 网络请求的封装

    AFNetworking 2.5.x 网络请求的封装 源码地址 https://github.com/YouXianMing/Networking 说明 1. 将block形式的请求转换成用代理来处理 ...

  7. 工具-github在linux下面没有git push报错

    time: 2015/12/25 1. 描述: error: The requested URL returned error: 403 Forbidden while accessing https ...

  8. 《C++ Primer Plus》读书笔记之六—函数探幽

    第八章 函数探幽 1.常规函数与内联函数的主要区别不在于编写方式,而在于C++编译器如何将它们组合到程序中. 2.常规函数调用使程序跳到另外一个地址(函数地址),并在函数结束时返回,更详细的的实现过程 ...

  9. THE CUP OF LIFE即生命之杯。

    生命之杯 编辑 THE CUP OF LIFE即生命之杯. <生命之杯>(西班牙语:La copa de la vida,英语:The Cup of Life)是一首由波多黎各裔歌手瑞奇· ...

  10. 利用Intellij IDEA开发Spark程序

    网上例子大多是基于scala的,并且配置基于sbt.scala的eclipse环境超级麻烦,所以下载IDEA. 准备:jdk,IDEA安装(可以不用事先安装sbt和Scala,这在IDEA里都可以pl ...