前端-jQuery

前端-jQuery

一、jQuery的定义

可以看做是一个库，也可以把jQuery看作是一个快速、简洁的JavaScript框架。

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

获取jQuery

方式一：

https://jquery.com/

方式二：

百度搜索cdn jquery，如

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

 

1.1 绑定方法比较：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
<!--    cdn引入-->
<!--    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
    <!--引入本地库-->
    <script src="../resouces/js/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式： $(selector)
而selector就是css选择器
-->
​
<a href="" id="test" onclick="return testjs()">不分离</a>
<a href="" id="test-document">原生document对象</a>
<a href="" id="test-jquery">jquery</a>
​
​
<!--不分离方法-->
<script>
    function testjs(){
        alert("test ");
        return true;
    }
</script>
​
<!--原生JavaScript-->
<script>
    let test=document.getElementById("test-document");
    //onclick其实为test节点或者对象的一个属性
    test.onclick=function (){
        alert("test-document-method");
    }
</script>
<!--jQuery实现-->
<script>
    $('#test-jquery').click(function () {
        alert("test-jquery-method");
    });
</script>
</body>
</html>

1.2 选择器比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="../resouces/js/jquery-3.6.0.js"></script>
</head>
<body>
<p>p标签</p>
<p id="pid">pid</p>
<p class="pclass">pclass</p>
​
<script>
    // 原生方法
    document.getElementsByClassName("p");
    document.getElementById("pid");
    document.getElementsByClassName("pclass");
​
    // Jquery,  css的选择器都能用
    let p1=$('p');
    let p2=$('#pid');
    let p3=$('.pclass');
</script>
​
</body>
</html>

1.3 文档工具网站

https://jquery.cuishifeng.cn/

二、事件

鼠标事件、键盘事件

2.1 当网页元素加载完毕之后，响应事件

网页确定所有网页元素加载完毕之后，才执行脚本：

// 当网页元素加载完毕之后，响应事件
$(document).ready(function () {
    
})
// 简写
$(function () {
​
})

2.2 jquery绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove {
            width: 300px;
            height: 100px;
            border: 2px solid yellowgreen;
        }
    </style>
    <script src="../resouces/js/jquery-3.6.0.js"></script>
</head>
​
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse：<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
​
<script>
    // 当网页元素加载完毕之后，响应事件
    // $(document).ready(function () {
    //
    // })
​
    $(function () {
        // alert("1");
        //里面是加载完毕，需要执行的动作
        $("#divMove").mousemove(function (e){
            // alert("1");
            $("#mouseMove").text("x:"+e.pageX+" y:"+e.pageY);
        })
    })
</script>
</body>
</html>

2.3 jquery操作dom

2.3.1 节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作dom</title>
  <script src="../resouces/js/jquery-3.6.0.js"></script>
</head>
<body>
​
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>
<script>
    $(function(){
        // 属性选择器
        // $("#test-ul li[class=js]").text("happy java");
        // 获取值
        $("#test-ul li[class=js]").html();
        $("#test-ul li[class=js]").html("<h1>happy java</h1>");
    })
​
</script>
​
</body>
</html>

2.3.2 css操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作dom</title>
  <script src="../resouces/js/jquery-3.6.0.js"></script>
</head>
<body>
​
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>
<script>
    $(function(){
        // 属性选择器
        // $("#test-ul li[class=js]").text("happy java");
        // 获取值
        $("#test-ul li[class=js]").html();
        $("#test-ul li[class=js]").html("<h1>happy java</h1>");
        // 设置css
        $("#test-ul li[class=js]").css("color","red");
        $("#test-ul li[class=js]").css({"color":"red","font-size":"23px"});
    })
​
</script>
​
</body>
</html>

2.3.3 元素的显示和隐藏

本质上是css的display：none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作dom</title>
  <script src="../resouces/js/jquery-3.6.0.js"></script>
</head>
<body>
​
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>
<script>
    $(function(){
        // 属性选择器
        // $("#test-ul li[class=js]").text("happy java");
        // 获取值
        $("#test-ul li[class=js]").html();
        $("#test-ul li[class=js]").html("<h1>happy java</h1>");
        // 设置css
        $("#test-ul li[class=js]").css("color","red");
        $("#test-ul li[class=js]").css({"color":"red","font-size":"23px"});
​
        // 隐藏和显示
        // 相当于
        // $("#test-ul li[class=js]").css("display","none");
        $("#test-ul li[class=js]").hide();
        $("#test-ul li[class=js]").show();
    })
​
</script>
​
</body>
</html>

2.3.4 其他测试

$(window).width();
$(window).height();
$("#test-ul li[class=js]").toggle();

 

2.4 ajax

未来ajax提交也用这个

$("#form").ajax()

三、前端小技巧

 

3.1.巩固js

看框架源码，主要是jquery，看游戏源码

3.2 巩固HTML和CSS

扒网页下来，全部down下来

 

3.3 其他前端框架介绍

elementUI

Ant Design

posted @ 2022-04-10 09:16  高兴518  阅读(34)  评论(0)    收藏  举报