JavaScript学习(五)

jQuery

jQuery可以看做一个库，里面存在大量的JavaScript函数

公式：$(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--这两种引入方式-->
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

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

<script>
    //选择器就是css的选择器
    $('#test-jQuery').click(function () {
        alert('hello,jQuery');
    })
</script>


</body>
</html>

选择器器

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

文档工具站：http://jquery.cuishifeng.cn/

事件

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

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

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

<script>

    //当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })
    });

</script>


</body>
</html>

鼠标移动就会产生相应的坐标

操作DOM

节点文本操作

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



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

<script>
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text("设置值");//设置值
    $('#test-ul').html();//获得值
    $('#test-ul').html('<h1>标题一</h1>');//设置值
</script>

</body>
</html>

css的操作键值对的形式

 $('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质 display ： none；

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