jquery简单选择器

日期:2018-02-25 16:02:48 章节:  jquery选择器

jquery简单选择器主要包括一下8种:

(1) :first :匹配第一个元素

(2) :last :匹配最后一个元素

(3) :even :匹配索引为偶数的元素

(4) :odd  :匹配索引为奇数的元素

(5) :eq(index) :匹配索引为指定值的元素

(6) :gt(index) :匹配索引大于指定值的元素

(7) :lt(index) :匹配索引小于指定值的元素

(8) :not(selector) :匹配除了指定选择器之外的元素

首先新建demo3.html页面,并且引入jquery文件

<head>
    <meta charset="UTF-8">
    <title>www.isoftvip.com</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

写测试的html元素如下:

<div id="idBox">
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

在文章结尾处写js脚本代码

<script>
   $(function () {
       //first匹配第一个元素
       $("#idBox p:first").css('font-size','20px');
       //last匹配最后一个元素
       $("#idBox p:last").css('font-size','20px');
       //even 匹配偶数
       $("#idBox p:even").css('color','blue');
       //odd 匹配奇数
       $("#idBox p:odd").css('color','green');
       //eq(index)  匹配指定索引的元素
       $("#idBox p:eq(2)").css('text-decoration','underline');
       //gt(index)  匹配大于index所有元素
       $("#idBox p:gt(9)").text("匹配索引大于9的所有元素");
       //gt(index)  匹配大于index所有元素
       $("#idBox p:lt(2)").text("匹配索引小于2的所有元素");
       //not(index)  除了指定索引的元素
       $("#idBox p:not(1)").css('font-weight',700);
   });
</script>

这里主要做了这些操作:

(1)将第一个和最后一个p内容字体大小改为20px

(2)将偶数索引p,颜色变为蓝色,奇数索引内容颜色变为绿色,(注意:索引从0开始)

(3)索引大于9和索引小于2的内容变为  指定内容

(4)除了索引为1的其他元素全部加粗

原文地址:http://www.isoftvip.com/topics/jquery-vedio/jquery-first-not-eq.html

最终的效果就是下面这样。

TIM截图20180225162509.png