jquery选择器

jquery用法思想

选择某个网页元素,然后对它进行某种操作

jquery选择器

jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

下面就写示例来看看,如下:

还可以再简写一下,如下:

对选择集进行过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素

上面演示如何使用jquery来选择上元素,那么下面继续来演示一下选择集的过滤。

$('div').has('p'); // 选择包含p元素的div元素

首先写出一个样式框架,如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        
    </script>
    <style type="text/css">
        div *{
            background: gold;
        }
    </style>
</head>
<body>
    <!-- div>(p{这是段落$}+a{这是超链接})*2 -->
    <div>
        <p>这是段落1</p>
        <a href="">这是超链接</a>
        <p>这是段落2</p>
        <a href="">这是超链接</a>
        <div class="box">这是div</div>
    </div>
</body>
</html>

那么使用选择集过滤,过滤p元素设置为pink背景色,如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div').has('p').css('color','pink');
        })
    </script>
    <style type="text/css">
        div *{
            background: gold;
        }
    </style>
</head>
<body>
    <!-- div>(p{这是段落$}+a{这是超链接})*2 -->
    <div>
        <p>这是段落1</p>
        <a href="">这是超链接</a>
        <p>这是段落2</p>
        <a href="">这是超链接</a>
        <div class="box">这是div</div>
    </div>
</body>
</html>

$('div').not('.myClass'); //选择class不等于myClass的div元素

这次的过滤是排除类名的方式,那么下面先来选中看看,如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div').not('.myClass').css({'backgroundColor':'cyan'});
        })
    </script>
</head>
<body>
    <div>1</div>
    <div class="myClass">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>
</html>

$('div').filter('.myClass'); //选择class等于myClass的div元素

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div').not('.myClass').css({'backgroundColor':'cyan'});
            $('div').filter('.myClass').css({'fontSize':'30px'});
        })
    </script>
</head>
<body>
    <div>1</div>
    <div class="myClass">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>
</html>

$('div').eq(5); //选择第6个div元素

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('div').not('.myClass').css({'backgroundColor':'cyan'});
            $('div').filter('.myClass').css({'fontSize':'30px'});
            $('div').eq(5).css({'backgroundColor':'gold'});
        })
    </script>
</head>
<body>
    <div>1</div>
    <div class="myClass">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>
</html>

选择集转移

$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

$('div').prev(); //选择div元素前面紧挨的同辈元素

$('div').prevAll(); //选择div元素之前所有的同辈元素

$('div').next(); //选择div元素后面紧挨的同辈元素

判断是否选择到了元素

jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券