JavaScript语言5（框架库 - jQuery（概述、引入、选择器、事件（获取移动鼠标的坐标）））

最新推荐文章于 2022-04-12 17:30:59 发布

Tigirs

最新推荐文章于 2022-04-12 17:30:59 发布

阅读量306

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45677119/article/details/104235751

版权

JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

JavaScript语言

JavaScript语言

一、jQuery

1. 概述

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架），里面存在大量的Javascript函数。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2. 引入jQuery

jQuery官网:https://jquery.com/ 下载，或者自己百度CDN jQuery。

<!--引入在线的cdn-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<!--官网下载的引入-->action
<script src="lib/jquery-3.4.1.js"></script>

3. jQuery公式

$(selector).action(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

4. 选择器（selector）

css 中的选择器它全部都能用

$('p').click();      //标签选择器
$('#id1').click();   //id选择器
$('.class1').click() //class选择器

这里可以查询：jQuery API 3.3.1 速查表

二、事件（action）

1. 鼠标事件

mousedown()	  //当鼠标指针移动到元素上方，并按下鼠标左键时
mouseenter()  //当鼠标指针穿过（进入）被选元素时
mouseleave()  //当鼠标指针离开被选元素时
mousemove()	  //当鼠标指针在指定的元素中移动时
mouseout()	  //当鼠标指针离开被选元素时
mouseover()	  //当鼠标指针位于元素上方时
mouseup()     //当鼠标指针移动到元素上方，并松开鼠标左键时

获取移动的鼠标当前的坐标

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

结果：
在这里插入图片描述

2. 其他事件

blur()	    //添加/触发失去焦点事件
change()	//当元素的值改变时
click()	    //当单击元素时
dblclick()	//当双击元素时
delegate()	//向匹配元素的当前或未来的子元素添加处理程序
focus()	    //当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时）
keydown()	//当键盘键被按下时
keypress()	//当键盘键被按下时
keyup()	    //当键盘键松开时
...
...

三、操作DOM

1. 节点文本操作

<!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="aaa">
    <li class="js">JavaScript</li>
    <li name="ja">Java</li>
</ul>
<script>
    $('#aaa li[name=ja]').text();           // 获得值
    $('#aaa li[name=ja]').text('设置值');    // 设置值
    $('#aaa').html();                       // 获得值
    $('#aaa').html('<strong>123</strong>'); // 设置值
</script>
</body>
</html>

2. 操作CSS

$('#aaa li[name=js]').css({"color","red"})

3. 元素的显示和隐藏

$('#aaa li[name=js]').show()
$('#aaa li[name=js]').hide()

本质 display ：none；

4. 其他获得

$(window).width()
$(window).height()

//下篇再见…谢谢

Tigirs

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语言5（框架库 - jQuery（概述、引入、选择器、事件（获取移动鼠标的坐标）））

JavaScript语言jQuery概述：jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架），里面存在大量的Javascript函数。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，...
复制链接

扫一扫

专栏目录