JQuery入门到精通教程（）

系列文章目录
第一章: JQuery入门到精通教程（一）

文章目录

• 系列文章目录
• 一，什么是jQuery？
• 二， jQuery为什么要学习？
• 三，什么时候用？
• 四，怎么使用jQuery？
• 五，jQuery选择器

一，什么是jQuery？

jQuery就是JavaScript的一个库：封装了很多JS代码（类库），方便使用时随时调用。

二， jQuery为什么要学习？

jQuery简化了 JavaScript 编程，代码编写更加简单。

 三，什么时候用？

是一些前端框架的基础，比如EasyUI，Bootstrap

 四，怎么使用jQuery？

利用工具：HBuilderX

1.下载jQuery库
http://官方地址：http://jquery.com/

2.引入：将js文件复制到项目中

 3.需要引入jQuery

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

   五，jQuery选择器

1. ID选择器：#ID  ——单个元素

   <script>
           $(function(){
   				// id选择器
   				$("#id").css({"background":"blue","color":"orange"})
           })
   </script>

2. 类选择器：.class  ——元素集合

   <script>
           $(function(){
   				// 类选择器
   				$(".name").css({"background":"blue","color":"orange"})
           })
   </script>

3. 元素选择器：element  ——元素集合

   <script>
           $(function(){
   				// 元素选择器
   				$("div").css({"background":"blue","color":"orange"})
           })
   </script>

4. 通配符选择器：*  ——元素集合

   <script>
           $(function(){
   				// 通配符选择器
   				$("*").css({"background":"blue","color":"orange"})
           })
   </script>

5. 组合选择器

   <script>
           $(function(){
   				// 组合选择器
   				$("#li，p").css({"background":"blue","color":"orange"})
           })
   </script>

6. 子代选择器

   <script>
           $(function(){
   				// 获取ul下所有的li
   				$("#ul>li").css({"background":"blue","color":"orange"})
           })
   </script>

7. 后代选择器

   <script>
           $(function(){
   				// 获取li下所有的内容
   				$("#ul li").css({"background":"blue","color":"orange"})
           })
   </script>

8. 获取第一个元素

   <script>
           $(function(){
   				// 获取ul下面第一个li
   				$("#ul>li:first").css({"background":"blue","color":"orange"})
           })
   </script>

9. 获取最后一个元素

   <script>
           $(function(){
   				// 获取ul下面最后一个li
   				$("#ul>li:last").css({"background":"blue","color":"orange"})
           })
   </script>

10. 获取偶数下标

    <script>
            $(function(){
    				// 设置li所有偶数样式
    				$("#ul>li:odd").css({"background":"blue","color":"orange"})
            })
    </script>

11. 获取奇数下标

    <script>
            $(function(){
    				// 设置li所有奇数样式
    				$("#ul>li:even").css({"background":"blue","color":"orange"})
            })
    </script>

12. 获取大于某个下标元素

    <script>
            $(function(){
    				// 设置li所有下标大于1的样式
    				$("#ul>li:gt(1)").css({"background":"blue","color":"orange"})
            })
    </script>

13. 获取小于某个下标元素

    <script>
            $(function(){
    				// 设置li所有下标小于1的样式
    				$("#ul>li:lt(1)").css({"background":"blue","color":"orange"})
            })
    </script>

---

总结

以上就是今天要介绍的内容，本文仅仅简单介绍了jQuery基本的使用，后续还会更新发布。