jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

xxmuq

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量97

点赞数

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

本文链接：https://blog.csdn.net/xxmuq/article/details/113693981

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用jQuery进行事件监听和DOM操作。包括点击、双击、失去焦点、改变值等事件的绑定及触发，以及获取和设置元素内容、样式、CSS属性等方法。此外，还展示了鼠标位置跟踪、元素聚焦与失焦、窗口大小调整等场景的应用，为前端开发者提供了实用的示例。

摘要由CSDN通过智能技术生成

jQuery

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

引入jQuery

<script  src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
//或者去官网下载

公式

$('选择器').事件
选择器参考css选择器，
事件一般是click(function () {})。

<body>
    <a href="" id="a">这是一个链接</a>
    <script>
        $('#a').click(function () {
            alert('1');
        })
    </script>
</body>

事件

//文档加载完后进行事件
$(document).ready(function () {
    alert('1ssdf');
})
//简化
$(function () {
    alert('1ssdf');
})

查看鼠标位置

<head>
    <script  src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        #divMove{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    mouse：<span id="mouseMove"></span>
    <div id="divMove">
        在这里移动鼠标
    </div>
    <script>
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x：'+e.pageX+'y：'+e.pageY);
        })
    </script>
</body>

元素失去焦点时触发 blur 事件。

<body>
    <input type="text">
    <script>
        $("input").blur(function () {
            alert("Hello World!");
        });
    </script>
</body>
//点击输入框内部再点击输入框外部将触发事件

元素的值发生改变发生 change 事件。

<body>
    <input type="text">
    <script>
        $("input[type='text']").change( function() {
            alert('adav');
        });
    </script>
</body>
//当改变输入框内的值然后点回车，会触发事件

单击触发click事件

<body>
    <input type="button" value="这是一个按钮">
    <script>
        $("input").click( function() {
            alert('adav');
        });
    </script>
</body>
//单击按钮触发事件

双击触发dblclick事件

<body>
    <input type="button" value="这是一个按钮">
    <script>
        $("input").dblclick( function() {
            alert('adav');
        });
    </script>
</body>
//双击按钮触发事件

元素获得焦点触发 focus 事件。

<body>
<input type="text">
<script>
    $("input[type=text]").focus(function(){
        alert('a');
        //this.blur();
    });
</script>
</body>
//点击输入框触发事件。
//this.blur();可以使输入框看得见但无法使用

当键盘或按钮被按下时，发生 keydown 事件。

<body>
    <script>
        $(window).keydown(function(event){
            alert('afada')
        });
    </script>
</body>

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

<head>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        $('p').mousedown(function(event){
            alert('afada')
        });
    </script>
</body>

当鼠标指针离开元素时，会发生 mouseleave 事件。

<head>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        $("p").mouseleave(function(){
            $("p").css("background-color","#FF0000");
        });
    </script>
</body>

当鼠标指针经过元素时，会发生 mouseenter 事件。

<head>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <style>
        p{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        $("p").mouseenter(function(){
            $("p").css("background-color","#FF0000");
        });
    </script>
</body>
//一般会与鼠标离开事件联用

当调整浏览器窗口的大小时，发生 resize 事件。

<body>
    <script>
        $(window).resize(function(){
            alert("Stop it!");
        });
    </script>
</body>

操作DOM

<body>
    <div id="d1">
        <p name = "p1">dnafndnan</p>
    </div>
    <script>
        /*可以用标签[属性="值"]来定位元素*/
        $('#d1 p[name="p1"]').text();	//获得值
        $('p').text('snjanskjcn');		//设置值
        $('p').html();					//获得html
        $('p').html('<p>p</p>');		//添加html
        $('p').css('color','red');		//设置css样式
        $('p').show();					//显示元素
        $('p').hide();					//隐藏元素
        $("p").hide("slow");			//缓慢隐藏
    </script>
</body>