jQuery

jQuery

JavaScript

jQuery库，里面存在大量的Javascript函数

获取jQuery

  1. 去jQuery官网下载

    下载复制到lib目录下

  2. CDN复制链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn 引入 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!--官网下载js导入 -->
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
    
<!--
    公式：$(selector).action()
-->
​
<a href="" id="test-jquery">点我</a>
​
<script>
    /*document.getElementById('test-jquery');*/
​
    //选择器就是css的选择器
    $('#test-jquery').click(function (){
        alert("hello,jQuery");
    })
    
</script>
</body>
</html>

 

选择器

网址：

https://jquery.cuishifeng.cn/

可以点进去学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
​
<script>
    //原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();
​
    //jQuery css中的选择器都可以用
    $('p').click() //标签选择器
    $('#id1').click() //id选择器
    $('.class1').click() //类选择器
​
​
​
</script>
​
</body>
</html>

 

事件

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid greenyellow;
        }
    </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>

键盘事件

 

操作DOM

 

节点文本操作：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
​
<script>
    //document.getElementById('')
    $('#test-ul li[name=python]').text(); //没有参数是取值
    $('#test-ul li[name=python]').text('123456'); //有参数是设置值
    $('#test-ul').html(); //获取值
    $('#test-ul').html('<strong>123</strong>'); //设置值
</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();

 

小技巧

  1. 如果巩固JS（看jQuery源码，看游戏源码！）

  2. 巩固HTML，CSS （扒网站：全部down下，然后对应修改，或者直接在网站上简化成一个原始，简介静态的页面）

posted @ 2022-01-17 17:19  Sr淑女  阅读(119)  评论(0)    收藏  举报