jQuery简介、使用jquery

最新推荐文章于 2024-04-27 18:00:34 发布

仙鹤__

最新推荐文章于 2024-04-27 18:00:34 发布

阅读量2.1w

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130666100

版权

1.1 jQuery简介

jQuery 是一个 JavaScript 库。(库里封装了很多方法，我们可以直接调用执行)

write less, do more 写的更少，做的更多！

jquery是什么？是javascript框架（库）。集成了大量的方法，属性。

jQuery 极大地简化了 JavaScript 编程

jQuery 很容易学习

jquery英文官网https://jquery.com

jquery中文官网

jQuery API 中文文档 | jQuery中文网

jquery中文官网菜鸟教程

jQuery 教程 | 菜鸟教程

1.2 使用jquery

下载jquery-3.5.1下载，放置到你当前的项目中

在页面上如何引入jquery？

<script src="js/jquery-3.5.1.min.js"></script>

jquery在哪里？

$就是jQuery的别称

$是jquery中最强大最重要的一个函数名。主要有以下几个功能,也是jquery的核心功能。

$就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素

1 选择器。例如 $("p")，$("#test")，$(".test")，$("button")

2 特效。例如 $("p").hide()，$("p").show()3 ajax 。例如 $.get("ajax.php")

  // $(document).ready(function(){
        //     console.log('ok');
        // })
        $(function(){
            console.log('ok!!');
            console.log("%c hello","color:blue;");
        })

预览：

div动态展示与设置内容

 <style>
        div{
            width: 300px;
            height: 200px;
            background-color: #ccc;
            display: none;
        }
        </style>
    </head>
    <body>
        <button id="btn1">展开</button>
        <button id="btn2">设置内容</button>
        <div></div>
        <div></div>
        <div></div>
        <script>
            var btn1 = document.querySelector('#btn1');
            var btn2 = document.querySelector('#btn2');
            var divs = document.querySelectorAll('div');
            // 伪数组
            console.log(divs);
            btn1.onclick = function(){
                for(var i=0; i<=divs.length-1; i++){
                    divs[i].style.display = 'block';
                }
            }
            btn2.onclick = function(){
                for(var i=0; i<=divs.length-1; i++){
                    divs[i].innerHTML = '我是div';
                }
            }
        </script>

预览：

JQuery初体验

<style>
        div{
            width: 300px;
            height: 200px;
            background-color: #ccc;
            display: none;
        }
        </style>
    </head>
    <body>
        <button id="btn1">展开</button>
        <button id="btn2">设置内容</button>
        <div></div>
        <div></div>
        <div></div>
        <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js">
       
        </script>
        <script>
            $(function(){
                console.log(1);
                $('#btn1').click(function(){
                    $('div').show();
                })
                $('#btn2').click(()=>{
                $('div').html('我是div标签')
                })
            })
        </script>

预览：

JQuery入口函数和js入口函数区别

1.js的入口函数"要等"到页面中所有的资源(图片，文件的加载)加载完之后才执行（onload函数）

2.JQuery入口函数“只会等待文档树”加载完成后开始执行，并不会等待图片，文件的加载

<script src="js/jquery-3.5.1.min.js"></script>
    <script>
// JQuery入口函数和js入口函数的对比:
// 1.js的入口函数"要等"到页面中所有的资源(图片，文件的加载)加载完之后才执行（onload函数）
// 2.JQuery入口函数“只会等待文档树”加载完成后开始执行，并不会等待图片，文件的加载

    // js入口函数
    window.onload = function(){
        console.log('我是js入口函数')
    }

    // JQuery入口函数
    $(document).ready(function(){
        console.log('我是JQuery入口函数 第一种写法')
    })

    $(function(){
        console.log('我是JQuery入口函数 第二种写法')
    })
    </script>

2、jQuery选择器

JQuery选择器的种类：基本选择器、层级选择器、过滤选择器、筛选选择器

2.2 jquery中的选择器分类

2.2.1 基本选择器

ID选择器 $("#id");
类选择器 $(".class");
标签选择器 $("标签");
并集选择器 $("div,p,li");
交集选择器 $("div.redClass"); 获取class为redClass的div元素

1 $("#tit1") id选择器

// 1.$("#tit1")  id选择器 
// html() 取得匹配元素的html内容
var tit1 = $("#tit1").html();
console.log(tit1);

// html() 设置匹配元素的html内容
$("#tit1").html('小余你好');
var tit2 = $("#tit1").html();
console.log(tit2);

2 $("ul") 元素选择器 $("ul li") 抓取的是一个集合

css() 访问匹配元素的样式属性注意：样式属性当前这个元素身上有两个样式属性 color: orange; font-size:20px;

   <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li id="t1">我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 id="tit">我是标题</h1>
    <script>
        $(function(){
            $('ul li').css('color','blue')
           
        })
    </script>

预览：

3 $('.msg') 类选择器

  <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li id="t1">我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 id="tit">我是标题</h1>
    <script>
        $(function(){
           $('.msg').css('color','blue');
           
        })
    </script>

预览：

4 $("#tit1, .msg, ul") 群组选择器

<script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li id="t1">我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 id="tit">我是标题</h1>
    <script>
        $(function(){
            $('.msg, #tit').css('color','blue');//群组选择器
           
        })
    </script>

预览：

5 :first获取第一个元素; :not() 筛选元素--去除所有与给定选择器匹配的元素

<script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li id="t1">我是列表项</li>
        <li>我是列表项</li>
    </ul>
    <div class="msg">我是消息</div>
    <h1 id="tit">我是标题</h1>
    <script>
        $(function(){
            $('.msg, #tit').css('color','blue');//群组选择器
           
        })
    </script>

预览：

2.2.2 层级选择器

1.子代选择器 $("#parent>p");

 <div id="parent">
        <div>我是儿子1</div>
        <p>我是儿子2</p>
        <p>我是儿子3</p>
        <div>
            <p>我是孙子</p>
        <p>我是孙子</p>
        <p>我是孙子</p>
    </div>
    </div>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        //子代选择器
       
        $(function(){
            $('#parent>p').css('color','red')
        })

预览：

2.后代选择器 $("#parent div p");用法:跟css选择器一样

<div id="parent">
        <div>我是儿子1</div>
        <p>我是儿子2</p>
        <p>我是儿子3</p>
        <div>
            <p>我是孙子</p>
        <p>我是孙子</p>
        <p>我是孙子</p>
    </div>
    </div>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        //子代选择器
       
       $(function(){
            $('#parent div p').css('color','green')
        })

预览：

2.2.3 过滤选择器

:eq(index) $("li:eq(2)").css("color","red");获取到li元素中索引号为2的元素，下标从0开始

:odd $("li:odd").css("color","red");获取到的li元素中，索引号为奇数的元素

:even $("li:even").css("color","red");获取到的li元素中，索引号为偶数的元素

 <ul id="list">
        <li>我是1个li标签</li>
        <li>我是2个li标签</li>
        <li>我是3个li标签</li>
        <li>我是4个li标签</li>
        <li>我是5个li标签</li>
        <li>我是6个li标签</li>
    </ul>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        //按索引值去找
        $(function(){
        //  $('#list li:eq(1)').css('color',"red")
        //用方法去找元素
        // $('#list li').eq(1).css('color','red')
        $('#list li:even').css('color','blue')
        $('#list li:odd').css('color','red')

           
        })
    </script>

预览：

隔行换色

 <ul id="list">
        <li>我是1个li标签</li>
        <li>我是2个li标签</li>
        <li>我是3个li标签</li>
        <li>我是4个li标签</li>
        <li>我是5个li标签</li>
        <li>我是6个li标签</li>
    </ul>
    <script src="../js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        //按索引值去找
        $(function(){
   
        $('#list li:even').css('backgroundColor','skyblue')
        $('#list li:odd').css('backgroundColor','lightgreen')
        var backgroundColor=null;
        //移入

        $('#list li').mouseover(function(){
            //   console.log('yes');
            bgColor=$(this).css('backgroundColor')
            $(this).css('backgroundColor','green')
             
        })
     
       
        //移出
        $('#list li').mouseout(function(){
            $(this).css('backgroundColor',bgColor)
            console.log(bgColor);
           
        })
    })
    </script>

预览：

仙鹤__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简介、使用jquery

jQuery 是一个 JavaScript库。(库里封装了很多方法，我们可以直接调用执行)write less, do more 写的更少，做的更多！jquery是什么？是javascript框架（库）。集成了大量的方法，属性。jQuery 极大地简化了 JavaScript 编程jQuery 很容易学习jquery英文官网jquery中文官网jQuery API 中文文档 | jQuery中文网jquery中文官网菜鸟教程jQuery 教程 | 菜鸟教程。
复制链接

扫一扫