什么是 jQuery 前端的一个方法库/函数库
                将很多过功能,封装好,我们可以直接使用
            官网  https://jquery.com/
            中文  https://jquery.cuishifeng.cn/
            jQuery的三大优点
                1,强大的选择器机制 --- 可以支持所有语法方式获取标签对象
                2,优质的隐式迭代   --- 获取对获取的所有标签对象都进行操作
                3,无所不能的链式编程 --- 一行代码搞定所有操作
            如何使用jQuery
                1,通过外部文件加载 jQuery 文件
                2,通过 $ 或者 jQuery 语法形式 来调用 jQuery文件中定义的方法
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1" class="div2" index="1">123</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./jquery.min.js"></script>
    <script>
        // 选择器:获取标签对象的方法
        // 所有选择器的方法,获取的标签对象,都是一个伪数组
        // 伪数组不要使用forEach 和 for...in 循环遍历
        // jQuery 有自己的循环遍历 语法
        // $()   jQuery()   获取标签对象
        // ()中可以定义任意 html和css 支持的语法形式
        // 标签名称
        // $('div')
        // console.log( $('div') );
        // id名称
        // $('#div1')
        // console.log( $('#div1') );
        // class名称
        // $('.div2')
        // console.log( $('.div2') );
        // 属性=属性值
        // $('[index="1"]')
        // console.log( $('[index="1"]') );
        // 通过标签结构获取
        // 兄弟关系
        // $('div~ul')    $('div+ul')
        // console.log( $('div~ul') );
        // 后代关系
        // $('ul>li')    $('ul li')
        // console.log( $('ul>li') );
        // 后代第一个
        // console.log( $('ul>li:first') );
        // 后代最后一个
        // console.log( $('ul>li:last') );
        // 按照标签是第几个找
        // 纯css语法
        console.log( $('ul>li:nth-child(2)') );
        console.log( $('ul>li:nth-child(odd)') );
        console.log( $('ul>li:nth-child(even)') );
        // 纯jQuery语法 都是按照索引下标找
        // 后代 奇数索引标签对象 odd 
        // css是按照个数找  jQuery是按照索引找
        console.log( $('ul>li:odd') );
        // 后代 偶数索引标签对象 even
        // css是按照个数找  jQuery是按照索引找
        console.log( $('ul>li:even') );
        // 按照标签的索引下标找
        console.log( $('ul>li:eq(2)') );
        // 相互转化
        // 要使用 js 语法操作 jQuery标签对象(伪数组)
        // 必须使用[]语法,获取某一个对应的标签
        $('ul>li:eq(2)')[0].style.color = 'red';
        const oDiv = document.querySelector('div');
        // $(oDiv)  jQuery(oDiv)  就是 jQuery标签对象(伪数组)
        console.log($(oDiv))
        console.log(jQuery(oDiv))
        // 总结:
        // 1,获取的标签对象,都是伪数组
        // 2,伪数组不要使用 forEach 和 for...in 循环
        // 3,jQuery 有自己的循环语法
        // 4,jQuery支持所有的html,css语法形式获取标签对象
        // 5,定义的方法是纯css语法,按照css语法原则执行 :nth-child(2)  第二个
        
        // 6,定义的方法是纯jQuery语法,按照索引下标原则执行 :eq(2)  索引下标是2
        // 7,jQuery 语法获取的标签对象,不支持所有的 js 语法操作
        //   因为你获取到的是一个伪数组
        //   可以通过[]语法,从伪数组中,获取一个标签对象,使用js语法进行操作
        // 8,js语法获取的标签对象,如果想要使用jQuery的方法操作
        //   必须要先转化为 jQuery标签对象(伪数组)
        //   $(js标签对象)   jQuery(js标签对象)
    </script>
</body>
</html>

jquery jquery的选择器的更多相关文章

  1. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  2. JQ001-认识jQuery 和 JQ002-jQuery选择器

    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...

  3. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  4. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  5. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  6. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  7. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

  8. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  9. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  10. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

随机推荐

  1. 通过ORPO技术微调 llama3大模型(Fine-tune Llama 3 with ORPO)

    1f45bd1e8577af66a05f5e3fadb0b29 通过ORPO对llama进行微调 前言 ORPO是一种新颖的微调技术,它将传统的监督微调和偏好对齐阶段整合到一个过程中.这减少了训练所需 ...

  2. 剑指 Offer II 018(Java). 有效的回文（简单）

    题目: 给定一个字符串 s ,验证 s 是否是 回文串 ,只考虑字母和数字字符,可以忽略字母的大小写. 本题中,将空字符串定义为有效的 回文串 . 示例 1: 输入: s = "A man, ...

  3. （已解决）安装PyMySQL出现问题--'pip' 不是内部或外部命令，也不是可运行的程序 或批处理文件

    问题描述: 输入cmd,进入命令窗口,输入pip install pymysql时候出现下面的问题: 然后进入python环境中去输入还是报错: 问题原因:环境变量配置出错,cmd下无法调用pip程序 ...

  4. 力扣482(java)-密钥格式化（简单）

    题目: 给定一个许可密钥字符串 s,仅由字母.数字字符和破折号组成.字符串由 n 个破折号分成 n + 1 组.你也会得到一个整数 k . 我们想要重新格式化字符串 s,使每一组包含 k 个字符,除了 ...

  5. Java Agent 踩坑之 appendToSystemClassLoaderSearch 问题

    简介: 从 Java Agent 报错开始,到 JVM 原理,到 glibc 线程安全,再到 pthread tls,逐步探究 Java Agent 诡异报错. 作者:鲁严波   从 Java Age ...

  6. 基于Confluent+Flink的实时数据分析最佳实践

    简介:在实际业务使用中,需要经常实时做一些数据分析,包括实时PV和UV展示,实时销售数据,实时店铺UV以及实时推荐系统等,基于此类需求,Confluent+实时计算Flink版是一个高效的方案. 业务 ...

  7. 函数式编程的Java编码实践：利用惰性写出高性能且抽象的代码

    ​简介: 本文会以惰性加载为例一步步介绍函数式编程中各种概念,所以读者不需要任何函数式编程的基础,只需要对 Java 8 有些许了解即可. ​ 作者 | 悬衡 来源 | 阿里技术公众号 本文会以惰性加 ...

  8. [Contract] Solidity 合约发布到测试网 ropsten 的作用

    当我们本地完成了一系列测试以后,接下来就是准备上线了. 关于合约部署可以参考这篇:Solidity 合约使用 truffle 部署到测试网和主网 你可能有一个疑问,在上主网之前,先上测试网的作用是什么 ...

  9. dotnet 6 在 System.Text.Json 使用 source generation 源代码生成提升 JSON 序列化性能

    这是一个在 dotnet 6 早就引入的功能,此功能的使用方法能简单,提升的效果也很棒.使用的时候需要将 Json 序列化工具类换成 dotnet 运行时自带的 System.Text.Json 进行 ...

  10. MDK在头文件中使用预编译器时，#ifdef 无效的问题

    问题:在头文件中使用预编译时,会出现无效的现象 在a.h文件中定义了宏AA_TEST,如下所示 #ifndef __A_H #define __A_H #define AA_TEST #endif 在 ...