jQuery

jQuery

1. JavaScript和jQuery的关系

jQuery是一个库，里面存在大量的JavaScript函数

2. 获取jQuery

搜索cdn jQuery，复制过来即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

</body>
</html>

3. jQuery基本公式介绍

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!--lib导入-->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>

<!--
公式：$(selector).action()
-->

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

<script>
    //选择器就是CSS的选择器
    $('#test-jquery').click(function () {
        alert('Hello jQuery!')
    })
</script>

</body>
</html>

4. 选择器

//原生的JS，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器它全部都能用
$('p').click();         //标签选择器
$('#id1').click();      //id选择器
$('.class1').click();   //类选择器

文档工具站：https://css.cuishifeng.cn/index.html

3. 事件

鼠标事件，键盘事件，其他事件

mousedown() 鼠标按下

mousemove() 鼠标移动

mouseover() 点击结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
点这里移动
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    //这个是全称 $(document).ready(function (){}) 我们一般用下面的简写
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
        });
    });
</script>

</body>
</html>

4. 操作DOM

1. 节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //纯文本
    //获得值
    $('#test-ul li[name=python]').text();
    //设置值
    $('#test-ul li[name=python]').text('some values');

    //HTML
    //获得值
    $('#test-ul').html();
    //设置值
    $('#test-ul').html('<strong> 123 </strong>');
</script>

</body>
</html>

2. CSS的操作

$('#test-ul li[name=python]').css({'color': 'red','background': 'blue','width': '60px'});

3. 元素的显示和隐藏

本质：display : none;(CSS)

$('#test-ul[name=python]').show();
$('#test-ul[name=python]').hide();

4. 娱乐（测试用）

$(window).width();
$(window).height()

更多函数见上面提到的文档

jQuery

jQuery

1. JavaScript和jQuery的关系

2. 获取jQuery

3. jQuery基本公式介绍

4. 选择器

3. 事件

4. 操作DOM

1. 节点文本操作

2. CSS的操作

3. 元素的显示和隐藏

4. 娱乐（测试用）

相关文章