jQuery

最新推荐文章于 2024-08-19 10:59:54 发布

._相依ゎ

最新推荐文章于 2024-08-19 10:59:54 发布

阅读量587

点赞数

分类专栏： JavaScript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_45596062/article/details/122686138

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery

JavaScript

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

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
<!--    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
    
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

<!--
公式： $(selector).action()
-->
<a href="" id="test-jquery">点我</a>

<script>
    // document.getElementById('id');

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QrgxYVO-1643095507783)(C:\Users\22724\AppData\Roaming\Typora\typora-user-images\image-20220110014123065.png)]

$(选择器).一个事件

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

事件

鼠标事件：

mousedown()  (jQuery) 按下
mouseenter() (jQuery)  
mouseleave() (jQuery)  离开
mousemove()  (jQuery)  移动
mouseover()  (jQuery)  点击结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.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>
    //当网页元素加载完毕之后，响应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)

        })
    });
</script>
</body>
</html>

键盘事件，其他事件

操作Dom

节点文本操作

 $('#test-ul li[name="python"]').text(); //获得值
 $('#test-ul li[name="python"]').text('lina'); //设置值
 $('#test-ul').html(); //获得值
 $('#test-ul').html('<strong>123</strong>'); //设置值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.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').html();
</script>
</body>
</html>

css操作

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

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

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


<script>
    //document.getElementById('')

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

</script>
</body>
</html>

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

 $('#test-ul li[name="python"]').show(); //显示
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
 $('#test-ul li[name="python"]').hide(); //隐藏
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]

娱乐测试

$(window).width()
344
$(window).height()
727
$(document).width()
344
$(window).height()
727

未来ajax ( ) ;

$('#from').ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

._相依ゎ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQueryJavaScriptjQuery 库，里面存在大量的 Javascript 函数获取jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- <script src="http://code.jquery.c
复制链接

扫一扫

专栏目录