<!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. 探讨Oracle分区表

    一年又一年,又到年底了,对于数据库的分区表需要检查一下,有无最大分区,次分区是否需要追加分区,如果程序不是自动追加分区的话,那么年中结算的时候,就会报错. 1.oracle分区主要有五种类型 (1)R ...

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

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

  3. Oracle特殊恢复原理与实战（DSI系列）

    1.深入浅出Oracle(DSI系列Ⅰ) 2.Oracle特殊恢复原理与实战(DSI系列Ⅱ) 3.Oracle SQL Tuning(DSI系列Ⅲ)即将开设 4.Oracle DB Performan ...

  4. flask的g对象

    故名思议我们可以理解这个g对象是一个全局的对象,这个对象存储的是我们这一次请求的所有的信息,只是存储这一次的请求 g:global 1. g对象是专门用来保存用户的数据的.  2. g对象在一次请求中 ...

  5. SDWebImage动画加载图片

    SDWebImage动画加载图片 效果 源码 https://github.com/YouXianMing/Animations // // PictureCell.m // SDWebImageLo ...

  6. django的admin后台注册model并显示

    在admin后台注册model并显示其他字段: 修改app下的admin.py,注册model: from .models import vmadmin.site.register(vm) #注册名为 ...

  7. 外键应用（foreignkey）、多对多

    1.创建model: 定义hv表,保存hv server infors: 定义vm表,保存vm infors: 一个vm只能对应一台hv server:一台hv server可以包含有多台vm cla ...

  8. json格式转换（json,csjon)（天气预报）

    json格式数据默认为string,可以使用eval()函数或者json模块将其转换为dict.标准Json字符串必须使用双引号(")而不能使用单引号('),否则从字符串转换成dict类型会 ...

  9. 解决win 和 ubuntu 虚拟机之间 无法 复制粘贴的问题，以及重装vmtool后，还是无法解决的办法

    第一步:重新安装vmware-tool 我这里已经装过了,所以显示这个,不然应该是显示:安装 VMware Tools 它会打开一个文件夹,把压缩包复制到任一个地方解压,执行.pl的那个文件:sudo ...

  10. 铁乐学python-面向对象的更多说明

    以下内容摘自授课老师的博客http://www.cnblogs.com/Eva-J/ 面向对象的更多说明 面向对象的软件开发 很多人在学完了python的class机制之后,遇到一个生产中的问题,还是 ...