jQuery总结

JQuery是小巧、轻量级的javascript函数库。本着“写得少，做的多”的原则来替代javascript原生代码，选择器为其核心内容。
一、引入JQuery：
cdn引入方法，注意：JQuery引入要在JS代码上。
<script src="https://cdn.bootcss.com/jquer...;></script>
二、使用JQuery

// jquery原始书写
// $(document).ready(function(){

// })
//代码简写如下两种方式：
// $().ready(function(){

// })
// $(function(){})

注意： jquery书写尽量使用原始书写方法，以提高代码读写、区分window.onload加载。
三、选择器：返回值为类似的数组的值，不会返回null和undefind;其返回值遵循其结构
选择器是jquery中最重要的部分，具体内容如下：
1、基础选择器：

#id：id选择器，不可重复，执行效率高
element：标签选择器
class:类名选择器
*：通配符选择器
其中element和class选择器可以多次重复使用，执行效率没有id选择器高

2、多项选择器：将每一个选择器的元素合并到同一个数组中返回
3、层级选择器：

 （'ancestor descendant'）后代选择器（祖先 后代）
 （'parent>child'）子选择器 只匹配一层 **执行效率高，使用率高**
 （'prev+next'）next选择器/下一下选择器，匹配所有与prev相临的元素
 （'prev~siblings'）兄弟选择器，同级关系

4、属性选择器

 [attribute] 属性名选择器
 [attribute=value]属性值选择器
 [attribute！=value]非属性选择器
 [attribute^=value]以某个属性开头
 [attribute$=value]以某个属性结尾
 [attribute*=value]包含选择器
 [selector1][selector2][selectorN]多个属性选择器（条件同时满足）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>属性选择器</title>
</head>
<body>
   <details class="tool">
       <summary>开发工具</summary>
       <p class="tool_sublime">Sublime</p>
       <p class="tool_westrom">Westrom</p>
       <p class="tool_vs">Visual Studio</p>
       <p class="tool_vscode">Visual Studio Code</p>
   </details>
   <details class="lang">
       <summary>开发语言</summary>
       <p class="lang_html">HTML</p>
       <p class="lang_css">Css</p>
       <p class="lang_js">JavaScript</p>
       <p class="lang_jquery">JQuery</p>
   </details>
   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
   <script>
       $(document).ready(function(){
       //包含选择器[attribute*=value]
           var setAtt=$('[class*=_]');
           console.log( setAtt);

       //以某个结尾的选择器[attribute^=value]即所有以tool_开头的类名
           // var lastAtt=$('[class$=s]');
           // console.log(lastAtt);

       //以某个属性开头的选择器[attribute^=value]即所有以tool_开头的类名
           // var tAtt=$('[class^=tool_]');
           // console.log(tAtt);

       // 属性名选择器
           // var att=$('[class]');
           // 输出结果为所有带Class类名的标签
           // console.log(att);
           // 输出结果为<html lang="en">标签
           // var enAtt=$('[lang]');
           // console.log(enAtt);


       //属性值选择器 [attribute=value]
           // 输出结果为: <p class="tool_sublime">Sublime</p>
           // var valueAtt=$('[class=tool_sublime]');
           // console.log(valueAtt);

       //非属性值选择器[attribute!=value]
        // 输出结果为: 类名不等于tool_sublime的元素
           // var notAtt=$('[class=tool_sublime]');
           // console.log( notAtt);


       })
   </script>
</body>
</html>

5、过滤选择器分为child与type两种类型，其中child侧重节点的查找，而type侧重于标签类型的查找，详情见如下代码：
child类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤选择器</title>
</head>
<body>
   <details class="tool" open="open">
       <summary>编辑器</summary>
       <p class="tool_sublime">Sumblime</p>
       
   </details>
   <details class="ide" open="open">
       <summary>IDE</summary>
       <p class="tool_webstrom">WebStorm</p>
       <p class="tool_vs">Visual Studio</p>
       <p class="tool_vscode">Visual Studio Code</p>
   </details>
   <details class="lang" open="open">
       <summary>开发语言</summary>
       <p class="lang_html">HTML</p>
       <p class="lang_css">Css</p>
       <p class="lang_js">JavaScript</p>
       <p class="lang_jquery">jQuery</p>
   </details>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   <script>
       $(document).ready(function(){
        // 倒数第几个nth-last-child
           var nthL=$('details> p:nth-last-child(2)');
           console.log(nthL);       
        // 指定第几个nth-child
           var nthF=$('details> p:nth-child(2)');
           console.log(nthF);
        // 独生子元素only-child
           var only=$('details> p:only-child');
           console.log(only);

        // 查找最后一个元素last-child
           var last=$('details> p:last-child');
           console.log(last);
        //   :first-child查找第一个元素 
           var first=$('details> p:first-child');
           console.log(first);
       })
   </script>
</body>
</html>

type类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤选择器</title>
</head>
<body>
   <details class="tool" open="open">
       <summary>编辑器</summary>
       <p class="tool_sublime">Sumblime</p>
       
   </details>
   <details class="ide" open="open">
       <summary>IDE</summary>
       <p class="tool_webstrom">WebStorm</p>
       <p class="tool_vs">Visual Studio</p>
       <p class="tool_vscode">Visual Studio Code</p>
   </details>
   <details class="lang" open="open">
       <summary>开发语言</summary>
       <p class="lang_html">HTML</p>
       <p class="lang_css">Css</p>
       <p class="lang_js">JavaScript</p>
       <p class="lang_jquery">jQuery</p>
   </details>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   <script>
       $(document).ready(function(){
        // 倒数第几个nth-last-of-type
           var nthL=$('details> p:nth-last-of-type(2)');
           console.log(nthL);       
        // 指定第几个nth-of-type
           var nthF=$('details> p:nth-of-type(2)');
           console.log(nthF);
        // 独生子元素only-of-type
           var only=$('details> p:only-of-type');
           console.log(only);

        // 查找最后一个元素last-of-type
           var last=$('details> p:last-of-type');
           console.log(last);
        //   :first-of-type查找第一个元素 
           var first=$('details> p:first-of-type');
           console.log(first);
       })
   </script>
</body>
</html>

注：其中过滤选择器的参数可以为n(子元素序号，从1开始)、even（偶数）、odd（奇数）、formula（特殊公式为an+b,必须为n，不可为其它字母）

------------------------------待续-----------------------------------------

jQuery总结

RoseMe

引用和评论

分支管理

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

Base64编码的“暗坑”：解密失败？可能是这些原因！

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包