<!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. 设置Office 365邮箱默认发送和接收邮件大小限制

    Office 365默认的 35MB 的邮件大小限制.Office 365 最大是支持 150MB 的邮件体积的. 我们只需用 Windows Powershell 连接 Office 365 ,然后 ...

  2. Windows ->> 解决Windows 10下面无法多用户同时远程桌面

    解决Windows 10下面无法多用户同时远程桌面 https://pc4u.org/how-to-allow-multiple-rdp-sessions-windows-10-without-mod ...

  3. 网罗收集10046的各种Case，方便trace信息的收集

    每逢与遇到SQL相关性能,我们总是需要收集10046的,来查看和诊断问题.因为10046真实的反应的SQL语句执行的时候的真实信息,解析,执行,获取的时间消耗,row source operation ...

  4. linux下yum安装指定的mysql版本

    因为直接使用yum安装的mysql会是默认版本5.1的版本  但是有的同学不满足又想要其他版本的怎么办呢? 曾时候我来提供一种方案(仅供参考): 我们可以使用rpm包来进行指定mysql版本的安装, ...

  5. Fuckey V1.0 Beta版发布！！！

    Fuckey,以前叫FullNexus4,只因为当时想做一个软件给自己的Nexus 4,方便方便一下,不过这名字感觉太局限了,毕竟很多朋友不是使用的Nexus 4的手机,但却还是使用了FullNexu ...

  6. Altium制作DC002的PCB封装和3D模型

    Altium制作DC002的PCB封装和3D模型 常用的电源连接器(Dc Power Jack Connector)DC002.DC005等等型号的3D模型在网上很难找到合适的,我们可以选择CUI 公 ...

  7. 寒假短期学习计划 - C++

    寒假短期学习计划 - C++ 一.所选课程 && 相关 0.选以下课的理由: 选课理由0: 只是短期的计划,先选些短视频感受:之后再视情况选其他课: 选课理由1: 难度低,以前自学过一 ...

  8. 新手学Linux：在VMware14中安装CentOS7详细教程

    VMware Workstation14安装CentOS7.0 详情教程 1.准备工作 a)下载VMware workstation14 b)下载CentOS7 c)下载SSH Secure Shel ...

  9. Java8系列之重新认识HashMap（转）

    原文出处: 前利 简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashMap和Tree ...

  10. UVa 1252 - Twenty Questions（状压DP）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...