首页 > 其他分享 >jQuery入门（二）jQuery选择器

jQuery入门（二）jQuery选择器

时间：2024-08-06 23:27:20浏览次数：13  
标签：jQuery 入门 元素 alert let div 选择器 属性

　　JQuery选择器
　　　　选择器：类似于 CSS 的选择器，可以帮助我们获取元素。例如：id 选择器、类选择器、元素选择器、属性选择器等等。 jQuery 中选择器的语法：$();


一、jQuery的选择器

（一）基本选择器

1.元素选择器 语法： $("元素的名称") 作用：根据元素名称获取元素对象们。 let divs = $("div");
2.id选择器 语法： $("#id的属性值") 作用：根据ID属性值获取元素对象。 let div1 = $("#div1");
3.类选择器 语法： $(".class的属性值") 作用：根据class属性值获取对象们。 let cls = $(".cls");

示例代码： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>基本选择器</title>

</head>

<body>

    <div id="div1">div1</div>

    <div class="cls">div2</div>

    <div class="cls">div3</div>

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

    //1.元素选择器   $("元素的名称")

    let divs = $("div");

    //alert(divs.length);

 

    //2.id选择器    $("#id的属性值")

    let div1 = $("#div1");

    alert(div1);

 

    //3.类选择器     $(".class的属性值")

    let cls = $(".cls");

    //alert(cls.length);

 

</script>

</html>

 


（二）层级选择器

1. 后代选择器 $("A B"); A下的所有B(包括B的子级)。 let spans1 = $("div span");
2. 子选择器 $("A > B"); A下的所有B(不包括B的子级)。 let spans2 = $("div > span");
3. 兄弟选择器 $("A + B"); A相邻的下一个B。 let ps1 = $("div + p");
4. 兄弟选择器 $("A ~ B"); A相邻的所有B。 let ps2 = $("div ~ p");
示例代码： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>层级选择器</title>

</head>

<body>

    <div>

        <span>sp1

            <span>sp1-1</span>

            <span>sp1-2</span>

        </span>

        <span>sp2</span>

    </div>

 

    <div>div2</div>

    <p>p1</p>

    <p>p2</p>

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)

    let spans1 = $("div span");

     // alert("后代选择器 个数:"+spans1.length);// 4个

 

    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)

    let spans2 = $("div > span");

//  alert("子选择器 个数:"+spans2.length); //2个

 

    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B

    let ps1 = $("div + p");

//    alert("兄弟选择器 个数:"+ps1.length);//1个

//    alert(ps1.html());

 

    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B

    let ps2 = $("div ~ p");

      alert("兄弟选择器 个数:"+ps2.length); //2个

    

</script>

</html>

 



（三）属性选择器

1.属性名选择器 语法: $("元素[属性名]"); 作用:根据指定名称获取元素对象们。 let in1 = $("input[type]");
2.属性值选择器,语法 $("元素[属性名=属性值]") ;作用:根据制定属性名和属性值获取元素对象们。 let in2 = $("input[type='password']");
示例代码: 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>属性选择器</title>

</head>

<body>

    <input type="text"  value="text1">

    <input type="password"   value="pwd1">

    <input type="password"  value="pwd2">

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

    //1.属性名选择器   $("元素[属性名]")

    let in1 = $("input[type]");

    alert(in1.length);

 

 

    //2.属性值选择器   $("元素[属性名=属性值]")

    let in2 = $("input[type='password']");

    alert(in2.length);

 

</script>

</html>

 


（四）过滤器选择器

1.首元素选择器 语法: $("A:first"); 作用 : 获得选择的元素中的第一个元素。 let div1 = $("div:first");
2.尾元素选择器 语法: $("A:last");作用 : 获得选择的元素中的最后一个元素。 let div4 = $("div:last");
3.非元素选择器 语法: $("A:not(B)");作用 : 不包括指定内容的元素。 let divs1 = $("div:not(#div2)");
4.偶数选择器 语法: $("A:even");作用:偶数 , 从0开始计数。 let divs2 = $("div:even");
5.奇数选择器 语法: $("A:odd");作用: 奇数 , 从0开始计数。 let divs3 = $("div:odd");
6.等于索引选择器 语法: $("A:eq(index)");作用 : 指定索引元素。 let div3 = $("div:eq(2)");
7.大于索引选择器 语法: $("A:gt(index)");作用 : 大于指定索引元素。 let divs4 = $("div:gt(1)");
// 8.小于索引选择器 语法: $("A:lt(index)");作用 : 小于指定索引元素。 let divs5 = $("div:lt(2)");
示例代码： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>过滤器选择器</title>

</head>

<body>

    <div>div1</div>

    <div id="div2">div2</div>

    <div>div3</div>

    <div>div4</div>

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

    // 1.首元素选择器    $("A:first");

    let div1 = $("div:first");

  alert(div1.html());

 

    // 2.尾元素选择器    $("A:last");

    let div4 = $("div:last");

    //alert(div4.html());

 

    // 3.非元素选择器    $("A:not(B)");

    let divs1 = $("div:not(#div2)");

//  alert(divs1.length);

 

    // 4.偶数选择器        $("A:even");

    let divs2 = $("div:even");

//    alert(divs2.length);

//    alert(divs2[0].innerHTML);//div1

//    alert(divs2[1].innerHTML);//div3

 

    // 5.奇数选择器        $("A:odd");

    let divs3 = $("div:odd");

//    alert(divs3.length);

//    alert(divs3[0].innerHTML);//div2

//    alert(divs3[1].innerHTML);//div4

 

    // 6.等于索引选择器     $("A:eq(index)");

    let div3 = $("div:eq(2)");

  //  alert(div3.html());//div3

 

    // 7.大于索引选择器     $("A:gt(index)");

    let divs4 = $("div:gt(1)");

//    alert(divs4.length);

//    alert(divs4[0].innerHTML);//div3

//    alert(divs4[1].innerHTML);//div4

 

    // 8.小于索引选择器     $("A:lt(index)");

    let divs5 = $("div:lt(2)");

//  alert(divs5.length);

//  alert(divs5[0].innerHTML);//div1

//  alert(divs5[1].innerHTML);//div2

    

</script>

</html>

 


（五）表单属性选择器

1.可用元素选择器 语法： $("A:enabled"); 作用：获得可用元素 let ins1 = $("input:enabled");
2.不可用元素选择器 语法： $("A:disabled"); 作用：获得不可用元素 let ins2 = $("input:disabled");
3.单选/复选框被选中的元素 语法： $("A:checked"); 作用：获得单选复选框选中的元素 let ins3 = $("input:checked");
4.下拉框被选中的元素 语法： $("A:selected"); 作用：获得下拉框选中的元素 let select = $("select option:selected"); 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>表单属性选择器</title>

</head>

<body>

    <input type="text" disabled><br />

    <input type="text" ><br />

    <input type="radio" name="gender"  value="men" checked>男

    <input type="radio" name="gender" value="women"  >女<br />

    <input type="checkbox" name="hobby" value="study" checked>学习

    <input type="checkbox" name="hobby" value="work" checked>工作

    <br />

    <select>

        <option>---请选择---</option>

        <option  selected>本科</option>  <!---->

        <option>专科</option>

    </select>

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

    // 1.可用元素选择器  $("A:enabled");

    let ins1 = $("input:enabled");

    alert(ins1.length);//5

 

    // 2.不可用元素选择器  $("A:disabled");

    let ins2 = $("input:disabled");

    //alert(ins2.length);//1

 

    // 3.单选/复选框被选中的元素  $("A:checked");

    let ins3 = $("input:checked");

//  alert(ins3.length);//3

//    alert(ins3[0].value);//man

//    alert(ins3[1].value);//stydy

//    alert(ins3[2].value);//work

 

    // 4.下拉框被选中的元素   $("A:selected");

    let select = $("select option:selected");

   // alert(select.html());//本科

    

</script>

</html>

 



二、总结
选择器：类似于 CSS 的选择器，可以帮助我们获取元素。 jQuery 中选择器的语法：$();
- 基本选择器 - $("元素的名称"); - $("#id的属性值"); - $(".class的属性值");
- 层级选择器 - $("A B"); - $("A > B");
- 属性选择器 - $("A[属性名]"); - $("A[属性名=属性值]");
- 过滤器选择器 - $("A:even"); - $("A:odd");
- 表单属性选择器 - $("A:disabled"); - $("A:checked"); - $("A:selected");

标签：jQuery,入门,元素,alert,let,div,选择器,属性
From： https://www.cnblogs.com/kongsq/p/18346172

相关文章

  • 【项目实战】开源的即时通讯组件OpenIM入门介绍
    一、OpenIM是什么？IM，是即时通讯（InstantMessaging，简称IM）OpenIM，是一个开源的、强大的即时通讯组件。OpenIM，提供了完整的即时通讯服务功能。OpenIM，被设计为高并发、高可用、易于扩展的架构。OpenIM，适合构建企业级的即时通讯平台。OpenIM，由一群热爱开源技术的开发者创建......
  • Day19--Java多线程编程入门学习
    1.什么是多线程？多线程是一种并发编程技术，它允许程序同时执行多个线程。线程是程序执行的基本单位，一个程序至少有一个线程，即主线程。通过使用多线程，可以在一个程序中同时处理多个任务，提高程序的效率和响应能力。2.为什么要使用多线程？提升性能：在多核处理器上，多线程可以将......
  • Day18_2--Vue.js Ajax（使用 Axios）基础入门学习
    Vue.js中的Ajax请求（使用Axios）什么是Axios？Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境中。它是现代化的Ajax库，用来替代传统的XMLHttpRequest。为什么选择Axios？简单易用：Axios提供了简洁且强大的API，使得发送HTTP请求变得非常简单......
  • C++入门基础1
    目录1.c++发展历史2.C++在⼯作领域中的应⽤3.C++学习建议和书籍推荐3.1学习难度3.2书籍的推荐4.c++第一个程序5.命名空间5.1namesapce的价值5.2namespace的定义5.2.1 正常的命名空间定义5.3命名空间的使用5.3.1指定命名空间访问5.3.2using将命名空间中某......
  • jQuery基础学习笔记
    jQuery基础学习个人说明：本文所涉及的到各种jQuery中的函数，方法，api等都不完整，只是一些常用的方法而已，详情还得阅读官方文档中文版：https://www.jquery123.com/jQuery的简单介绍jQuery:是一个快速，小，功能丰富的]avaScript库。它使诸如HTML文档遍历和操作，事件处理、动画和Aja......
  • 【Mind+】掌控板入门教程05 心情灯
        大自然的各种色彩使人产生各种感觉，心理学家认为，不同的颜色会让人产生不同的情绪。比如，红色通常给人刺激、热情和幸福的感觉，而绿色作为自然界中草原和森林的颜色，给人以理想、年轻、新鲜的感觉，蓝色则让人感到悠远、宁静等等。    今天就让我们用......
  • GitHub星标4000！清华大牛的CTF竞赛入门指南，真的太香了！
    想进入网络安全行业、实现从学校到职场的跨越，参加CTF竞赛是很好的成长途径。通俗而言，CTF是模拟“黑客”所使用的技术、工具、方法等手段发展出来的网络安全竞赛，有了手段之后需要的就是经验与黑客感(HackorFeel)。CTF赛题涉及的领域很广，市面上也早有在知识广度上均有所覆盖的C......
  • 【NumPy 入门：常用函数与方法总结】
    文章目录前言1、np.array()函数2、np.arange函数（用于生成数值序列的函数）3、np.linspace函数（用于生成数值序列的函数）4、ndarray.dtype和ndarray.dtype.name属性5、矩阵乘积6、ravel方法、T和flat属性7、np.vstack和np.hstack函数8、column_stack函数9、np.r_和......
  • 什么是大模型？大模型入门指南（非常详细）从入门到精通，看这一篇就够了
    伴随着这段时间，人工智能，AI的热门，“大模型”一词也经常出现在我们的视野中。对于普通人来说，GPT，人工智能，AI，大模型，这些每个字都看得懂但是连起来却觉得理解不完全。今天我们就来讲讲大模型以及GPT。什么是大模型？我们在生活中常常使用过很多模型，比如自制雪糕的雪糕模具，蛋糕店......
  • 一名优秀的AI产品经理成长规划？普通人如何入门？
    最近听到很多人在谈论跳槽面试。其中最多的莫过于在面试中，HR问的：你的职业规划是什么？如果你入职了，在这个岗位想达到怎样的目标？打算如何达到你的目标？你最近3年的职业规划是怎样的？今天跟大家一起探讨探讨：一个产品经理的职业生涯规划，应该是怎么样的？简单来说，产品经理的......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99