JQuery入门

程序小旭

于 2021-07-21 19:39:29 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/weixin_46167190/article/details/118974561

版权

JQuery库

什么是JQuery

定义：Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

什么是CDN

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。 [1]

JQuery的引入方式

通过cdn的方式引入

通过一些网站查询中文的链接，将其引入https://www.bootcdn.cn/jquery/

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

通过官网下载文件的方式引入

Jquery的公式

公式：(语法格式)

$(selector).action()

$() ：jquery的选择器就是css的选择器

Jquery入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
       
        <button type="button" id="first">测试</button>

        <script>
            $('#first').click(function(){
                alert('hello Jqury')
            })
        </script>
	</body>
</html>

Jquery选择器

与原生的js选择器相比jquery的选择器更为简便且支持css的选择器

标签选择器

id选择器

类选择器

$('#first')
$('.first')
$('p')

更多的选择器参考文档

Jquery事件

鼠标事件键盘事件其他事件

鼠标事件

获取鼠标的位置信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <style>
            #divmove{
                width: 500px;
                height: 500px;
                border: 1px solid red;
            }
        </style>
	</head>
	<body>
       <!-- 获取鼠标当前的坐标-->
        mouse:<span id="move"></span>
        <div id="divmove"></div>

        <script>
            //当网页元素加载完毕之后相应事件
            $(function(){
                $('#divmove').mousemove(function(e){
                    $('#move').text('x:'+e.pageX+'y'+e.pageY)
                })
            });
        </script>
	</body>
</html>

JQuery操作DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
       
	</head>
	<body>
        <!-- 节点文本操作 -->
       <ul id="test-ul">
           <li class="js">js</li>
           <li name="python">python</li>
           
       </ul>

       <script>
           $('#test-ul li[name=python]').text('java');
           var x = $('test-ul').html();
           console.log(x)
       </script>
	</body>

</html>

Css的相关的操作

 $('#test-ul li[name=python]').css({"color":"red"})

通过键值对的形式进行设置

元素的显示和隐藏

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

常用框架

layui (拓展组件 layee)弹窗组件

Element-ui:组件

Ant Design

程序小旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery入门

JQuery库什么是JQuery定义：Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML
复制链接

扫一扫