jQuery的一些基本 *** 作（一）

目录

        一、了解jQuery是什么

        二、jQuery常用的 *** 作有哪些

        三、下载jQuery

        四、体验jQuery

        五、jQuery的选择器    

        六、jQuery的筛选器

         七、一点小小的建议

---

一、了解jQuery是什么

        简单的说，jQuery就是对JavaScript的DOM *** 做进行了一个封装。

二、jQuery常用的 *** 作有哪些

        jQuery常用的 *** 作有：

                1、获取DOM节点；

                2、 *** 作节点文本；

                3、 *** 作节点样式；

                4、 *** 作节点类名；

                5、 *** 作节点属性；

                6、获取节点尺寸；

                7、获取节点偏移量；

                8、 *** 作节点事件；

                9、 *** 作节点动画；

                10、ajax的封装；

三、下载jQuery

        首先，前往官网下载jquery.min.js文件，这里提供一下地址：jQuery官网       

        进去之后，你会看到如下界面：

         点击连接之后，按住ctrl+s，​​​​​​​选择保存的路径，最后就下载成功啦！

四、体验jQuery

       1、 将下载好的jQuery文件拖入你的项目路径下（随便哪个位置，只要你能找到）。

       2、创建一个HTML文件，然后在head标签内引入刚刚导入的文件。

    
    
    
    
    //在这里引入哦，路径别照着抄，写你自己的相对路径或者绝对路径
    
  

       3、在引入jQuery文件后，会自动引入两个变量，一个是 $  ,一个是jQuery（这两个将在后面用到）。

console.log($);
console.log(jQuery);

五、jQuery的选择器    

        jQuery的选择器：通过选择器获取想要的元素

        语法：$('选择器名')

        注意：不管使用任何选择器，获取到的元素都是一个元素集合（如果不懂得话，按照下面得例子在控制台输出结果就知道咯^_^）。

        举个例子：

//这里是一段html结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

/* 这里通过$("选择器名")  获取想要的元素标签 */

        是不是很简单呢？

六、jQuery的筛选器

        什么是筛选器？简单地说，就是对通过jQuery选择器选择出来的结果进行二次选择。

        语法：$("选择器名").筛选器名()

        常见的筛选器：

                1、first()

                2、last()

                3、eq(索引)

                4、parent()

                5、parents()

                6、next()

                7、nextAll()

                8、prev()

                9、prevAll()

                10、siblings()

                11、find(选择器)

                ......

        咱话不多说，还是直接上代码（ *** 作之前千万别忘了引入jQuery文件哦!）：

    
          1
          2
          3
          4
          
            5
            子二级
          
          子一级
              我是ul内的第一个span标签
          6
          7
          
            8
            

              子三级
            
          
          9
          10
    

      //   1、first() 选择结果的第一个
      console.log($("li").first());
      //   2、last() 选择结果的最后一个
      console.log($("li").last());
      //   3、eq(索引)  选择传入的索引的那一个。注意：索引是从0开始的
      console.log($("li").eq(2));
      //   4、next() 当前选择的下一个
      console.log($("span").next());
      //   5、nextAll() 当前选择标签后的所有
      console.log($("span").nextAll());
      //   6、prev() 前一个元素
      console.log($("span").prev());
      //   7、prevAll() 前面所有的元素
      console.log($("span").prevAll());
      //   8、parent() 父元素
      console.log($("span").parent());
      //   9、parents() 该元素的所有父级结构，逐层获取，直到html标签为止
      console.log($("span").parents());
      //   10、siblings() 拿到该元素的所有兄弟元素
      console.log($("span").siblings());
      //   11、find(选择器) 找到该元素所有后代元素中，满足要求的元素
      console.log($("ul").find("i"));

 七、一点小小的建议

        看这篇文章的如果是小白的话，请把话记在心里，如果是大佬的话，那就可以略过了。在看文章代码的时候，各位小白千万要记得“好记性不如烂笔头”这句话，代码的技术是练出来的，不是看出来的，勤学苦练才能掌握。如果说你是看一眼就会的天才，那就把我的话当作“噗噗”给放掉吧，如果你只是个想我一样的普通人，那么请一起练习，朝着高阶大佬共同进步！

        好啦，这一篇文章就到这，后面还会继续发布后续内容，如果有哪里说的不对的地方，或者各位大佬有什么建议，欢迎私信或者留言哦~

        本人第一次写文章，望各位大佬多多指教！

        最后，如果喜欢的话，请记得收藏点赞！拜托拜托~