01 jQuery初使用

jQuery是一个曾经火遍大江南北的一个Javascript的第三方库. jQuery的理念: write less do more. 其含义就是让前端程序员从繁琐的js代码中解脱出来. 我们来看看是否真的能解脱出来.

关于jQuery的版本: 这里有必要说一下, jQuery一共提出过3个大版本. 分别是1.x, 2.x和3.x. 这里注意, 虽然目前最新的是3.x. 但各个公司都不约而同的选择了1.x. 说明jQuery1.x在编程界的地位是非常非常高的. 而且从其执行效率, 代码兼容性以及代码可靠性上讲. 1.x确实做到了极致. 所以, 我们学习的版本自然也是1.x了. 我们选择和腾讯课堂同一个版本. 1.9.1

jQuery的下载, 推荐直接去cdn下载即可. 他本质就是一个js文件. 去哪儿都一样.
字节cdn: https://cdn.bytedance.com/
jquery: https://cdn.bytedance.com/?query=jquery&version=1.9.1

只需要把上面这个jquery下载的网址复制到浏览器上, 然后保存(ctrl+s)成js文件就可以了.

我们用jQuery来完成一个按钮的基本点击效果. 当然, 得和传统的js对比一下。
我们先准备好html页面结构：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div-out{
            width: 400px;
            height: content-box;
            margin: 0 auto;
            padding: 0;
 
        }
        .mydiv{
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background: pink;
            margin:0;
            padding: 0;
            font-size: 18px;
        }
        .btn{
            width: 400px;
            height: 50px;
            padding: 0;
            border: none;
            margin: 0;
            box-sizing: content-box;
            font-size: 18px;
            color: #000;
 
            background: #999999;
        }
        .btn:hover{
            cursor: pointer;
            color: pink;
        }
        .btn:active{
            color: #666;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="div-out">
        <input type="button" class="btn" value="我是按钮. 你怕不怕">
        <div class="mydiv">我怕死了...</div>
    </div>
</body>
</html>

需求: 点击按钮. 更改mydiv中的内容.
传统js：

 // 版本1
window.addEventListener('load', function(){
    document.getElementsByClassName("btn")[0].addEventListener('click', function(){
        document.getElementsByClassName('mydiv')[0].innerText = "真的不怕啊";
    });
})
 
// 版本2
window.onload = function(){
    document.querySelector(".btn").onclick = function(){
        document.querySelector('.mydiv').innerText = "我好啪啪啊";
    };
}

 // jQuery
$(function(){  // $(document).ready(function(){
    $(".btn").click(function(){
        $(".mydiv").text('我要上天');
    })
})

除了$外, 其他东西貌似都挺容易理解的. 而且代码简洁. 异常舒爽.
$是什么鬼, 在jQuery中, $可以认为是jQuery最明显的一个标志了. $()可以把一个普通的js对象转化成jQuery对象. 并且在jquery中 $的含义就是jQuery.

posted @ 2023-08-28 17:02 生而自由爱而无畏阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 02 jQuery选择器

· 1 JavaScript的引入方式

· jQuery学习-01jQuery下载安装

· 1_1jQuery简介

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

公告

昵称：生而自由爱而无畏
园龄： 3年4个月
粉丝： 8
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

python爬虫成神之路进行时

01 jQuery初使用

01 jQuery初使用

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	.div-out{
	width: 400px;
	height: content-box;
	margin: 0 auto;
	padding: 0;

	}
	.mydiv{
	width: 400px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	background: pink;
	margin:0;
	padding: 0;
	font-size: 18px;
	}
	.btn{
	width: 400px;
	height: 50px;
	padding: 0;
	border: none;
	margin: 0;
	box-sizing: content-box;
	font-size: 18px;
	color: #000;

	background: #999999;
	}
	.btn:hover{
	cursor: pointer;
	color: pink;
	}
	.btn:active{
	color: #666;
	background-color: #eee;
	}
	</style>
	</head>
	<body>
	<div class="div-out">
	<input type="button" class="btn" value="我是按钮. 你怕不怕">
	<div class="mydiv">我怕死了...</div>
	</div>
	</body>
	</html>

	// 版本1
	window.addEventListener('load', function(){
	document.getElementsByClassName("btn")[0].addEventListener('click', function(){
	document.getElementsByClassName('mydiv')[0].innerText = "真的不怕啊";
	});
	})

	// 版本2
	window.onload = function(){
	document.querySelector(".btn").onclick = function(){
	document.querySelector('.mydiv').innerText = "我好啪啪啊";
	};
	}

	// jQuery
	$(function(){ // $(document).ready(function(){
	$(".btn").click(function(){
	$(".mydiv").text('我要上天');
	})
	})