JQuery入门到精通教程（）-阿里云开发者社区

JQuery入门到精通教程（）

2023-10-30 35

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JQuery入门到精通教程（）

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

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

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

利用工具：HBuilderX

1.下载jQuery库

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

3.需要引入jQuery

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

五，jQuery选择器

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

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

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

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

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

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

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

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

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

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

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

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

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

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