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 条评论
登录 后参与评论

相关文章

  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • jquery属性操作 html() prop()

    使用html()相当于原生javascript的innerHtml,即可以获取元素的之间的html内容,还可以创建新的html元素。

    Devops海洋的渔夫
  • jquery样式操作

    选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

    Devops海洋的渔夫
  • HTML规范 - 整体结构

    申霖
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • APICloud开发者进阶之路|【案例源码】简单时间轴

    因为想做透明头部,但是win页面打开frm页面后,会遮住win页面的头部,所以就取消了win页面的header标签,下面是win页面的代码:

    APICloud
  • jQuery第二十一篇 scrollTop

    用户7873631
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程
  • 块级格式化上下文

    BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券