jQuery

原创已于 2023-03-11 20:14:36 修改 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

于 2023-03-11 20:08:46 首次发布

jQuery

js和jQuery关系：
jQuery库中有大量的js函数

一、获取jQuery

文档：https://jquery.cuishifeng.cn/
官网：https://jquery.com/
在官网直接点击doneload可以下载，下载好后放到lib文件夹，在head下导入
下载任意

   <!-- 文件导入 -->
   <script src="lib/jquery导入的文件名"></script>
    <!-- cdn引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

或者搜索CDN jQuery：https://www.jq22.com/cdn/
百度CDN：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

jQuery公式：$(selector).action()

选择器加事件
selector:css选择器

例子：
点击点我链接弹出alert

<body>
    <a href="" id="test-jquery">点我</a>
</body>

<script>
    $('#test-jquery').click(function(){
        alert('hello');
    })
 </script>

二、jQuery选择器

原生js选择器少

    document.getElementById()//id选择器
    document.getElementsByClassName()//类选择器
    document.getElementsByTagName()//标签选择器

jQuery选择器

    $('p').click()//标签选择器
    $('#id1').click()//id选择器
    $('.class1').click()//类选择器

在cuishifeng文档中可以查到所有选择器

三、jQuery事件

鼠标事件、键盘事件

①鼠标事件（从上到下：按下、鼠标指针穿过元素、鼠标指针离开元素、鼠标指针在指定的元素中移动、鼠标指针从元素上移开、鼠标指针位于元素上方、元素上放松鼠标按钮）

mouse事件
②网页加载完后开始响应事件

    // 网页加载完毕后响应事件
    $(document).ready(function()){}
    // 简写为
    $(function(){
        $('')
    })

例子：获取元素上移动鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

    <!-- cdn引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            background-color: blueviolet;
        }
    </style>

</head>
<body>
    <!-- 获取鼠标当前坐标显示在span标签下 -->
    mouse : <span id="mouseMove"></span>
    <div id="divMove">
        movehere
    </div>


</body>

<script>

    // 简写为
    $(function(){
        $('#divMove').mousemove(function(e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })



 </script>
</html>

四、操作DOM元素

<body>
   
    <ul id="test-ul">
        <li class="js">js  </li>
        <li class="ee">ee</li>
    </ul>

</body>

<script>
    // js innertext
    $('#test-ul li[class=js]').text();
    // js innerhtml
    $('#test-ul').html();


 </script>

获得值及动态更改值
在这里插入图片描述

$('#test-ul li[class=js]').text('1234') //设置值
$('#test-ul li[class=js]').text() //获得值
$('#test-ul').html() //获得值
$('#test-ul').html('<strong>123</strong>') //设置值

css的操作

$('#test-ul li[class=js]').css("color","#ff0011")

在这里插入图片描述 元素的隐藏和消失

$('#test-ul li[class=js]').hide()
$('#test-ul li[class=js]').show()

等价于display=none