jquery基础

最新推荐文章于 2025-07-15 10:27:02 发布
最新推荐文章于 2025-07-15 10:27:02 发布
阅读量57 收藏
点赞数
文章标签： javascript xhtml ViewUI

1、



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p{

display:none;

}


</style>
<script language="javascript" type="text/javascript" src="../js/jquery.js">
</script>
<script language="javascript" type="text/javascript" src="window-center.js">
</script>
<script language="javascript" type="text/javascript" src="window-left.js">
</script>
<script language="javascript" type="text/javascript" src="window-right.js">
</script>
<script language="javascript" type="text/javascript" src="window-left-top.js">
</script>
<script language="javascript" type="text/javascript" src="window-right-top.js">
</script>

<link type="text/css" rel="stylesheet" href="window-center.css">
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var windowHeight=$(window).height();
var windowWidth=$(window).width();
var documentHeight=$(document).height();
var documentWidth=$(document).width();

//利用toggle方法显示和隐藏

$("#btn_center").click(function(){

if(windowHeight<documentHeight){
$(window).scroll(function(){
popCenterWindow();
});
}else{
popCenterWindow();
}

});
$("#btn_left").click(function (){
initLeft();
popCenterWindowLeft();

});
$("#btn_right").click(function (){
initRight();
popCenterWindowRight();

});
$("#btn_left-top").click(function (){
initLefttop();
popCenterWindowLefttop();

});
$("#btn_right-top").click(function (){
initRighttop();
popCenterWindowRighttop();

});
});

</script>


</head>

<body><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<input type="button" id="btn_center" value="弹出居中窗口">
<input type="button" id="btn_left" value="弹出居左下角窗口">
<input type="button" id="btn_right" value="弹出居右下角窗口">
<input type="button" id="btn_left-top" value="弹出居左上角窗口">
<input type="button" id="btn_right-top" value="弹出居右上角窗口">
<div class="window" id="center">

<div class="title"><img src="1.gif">优快云欢迎你-居中窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="right">

<div class="title"><img src="1.gif">优快云欢迎你-居左窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="left">

<div class="title"><img src="1.gif">优快云欢迎你-居右窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="right-top">

<div class="title"><img src="1.gif">优快云欢迎你-居右上窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="left-top">

<div class="title"><img src="1.gif">优快云欢迎你-居左上窗口</div>
<div class="content">3gput.com你好</div>

</div>
</body>
</html>

2、window-center.js

//定义一些量变


//获得窗口的高度
var windowHeight;
//获得窗口的宽度
var windowWidth;

//获得弹窗的高度
var popHeight;
//获得弹窗的宽度
var popWidth;

//获取滚动条滚动的宽度
var scrollTop;
//获取滚动条滚动的宽度
var scrollLeft;

//延迟时间
var time;

function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();

popHeight=$(".window").height();
popWidth=$(".window").width();

scrollTop=$(window).scrollTop();
scrollLeft=$(window).scrollLeft();
}

//关闭窗口


function closeWindow(){
//找到X的图片，家单击事件，并且关闭窗口
$(".title img").click(function(){

$(this).parent().parent().hide("slow");
});
}


//定义弹出注重窗口的方法

function popCenterWindow(){
clearTimeout(time);
time=setTimeout(function(){
init();
//计算弹出窗口的左上角Y的偏移量
var popY=(windowHeight-popHeight)/2+scrollTop;
var popX=(windowWidth-popWidth)/2+scrollLeft;

//关闭窗口
closeWindow();

//设定窗口的位置
//$("#center").css("top",popY).css("left",popX).show("slow");

$("#center").animate({top:popY,left:popX},500).show();

},80);
}




iteye_5282
关注
jQuery 基础语法
一个专注于机器学习基础与实战的技术博客，内容涵盖算法推导、模型实现、数学原理与代码实践。用通俗的语言解析复杂概念，记录学习过程中的思考与总结，适合机器学习爱好者和从业者参考。
02-27 2956
文章目录jQuery 基础语法一、 jQuery 概述1、 JS 库2、 jQuery 概念3、 jQuery 优点二、 jQuery 基本使用1、 jQuery 使用步骤2、 jQuery 入口函数3、 jQuery 顶级对象4、 jQuery 对象和 DOM 对象三、 jQuery 常用 API1、 jQuery 选择器2、 隐式迭代3、 jQuery 筛选选择器4、 jQuery 筛选方法5、 jQuery 里面的排他思想6、 链式编程四、 jQuery 样式操作1、 操作 CSS 方法2、 设置类样
Jquery基础
m0_60165694的博客
10-15 841
1.什么是 jQuery ？ jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件] 1.jQuery 是一个 JavaScript 函数库。[.js] 2.jQuery 极大地简化了 JavaScript 编程。 3.jQuery 很容易学习。 jQuery库包含以下功能： 1.HTML元素选取 2.HTML元素操作 3.CSS 操作 4.HTML 事件函数 5.JavaScript 特效和动画[元素的隐藏和显示] 6.HTML DOM 遍历和修改
jQuery基础
m0_70693510的博客
04-08 1427
1、jQuery是一个JavaScript函数库。2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。3、jQuery库包含以下功能：HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和HTMLDOM遍历和修改。
JQuery基础
xlb0408的博客
04-20 1599
/添加类样式1 $(document).ready()=jQuery(document).ready() $(function(){...})=jQuery (function(){...}) $("h2").css("background-color","#CCFFFF").next().css("display","block");其它： 操作表单元素文本：利用的val方法 $("input").val() $("input").val("我修改了表单元素文本");//alert($);
jQuery基础知识
qq_51781439的博客
09-11 1441
一、jQuery简介 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示： 除此之外，jQuery 还提供了大量的插件。 二、jQuery的语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法：...
JQuery基础语法
weixin_54597170的博客
10-27 2073
目录JQuery基础概述JQuery对象和JS对象区别与转换基础操作选择器基本选择器层级选择器属性选择器过滤选择器表单过滤选择器DOM操作内容操作属性操作CRUD操作 JQuery基础 概述 一个JavaScript框架， 简化JS开发， 本质上就是一些js文件，封装了js的原生代码而已。 JQuery对象和JS对象区别与转换 1.操作 JQuery对象在操作时，更加方便。 2.通用性 JQuery对象和js对象方法不通用的. 3.转化 1. jq – > js : jq对
轻松掌握 jQuery 基础
不迁怒，不贰过。小知识，大智慧。
11-15 1247
jQuery是一个优秀的JavaScript框架，它能帮助用户更方便的处理HTML文件、事件、动画效果、AJAX交互等。它的出现极大程度地改变了开发者使用JavaScript的习惯。
JQuery基础事件
FirMoveBrick的博客
08-04 4444
简介 但是毕竟08年的还是php页面的时候，前端的点击事件，基本都是后端在写的，所以13年的时候就用到了以前最火的 jquery ，我为了融入他们的氛围，我不得不用 jquery 写点击事件. 下面，让我们直接进入主题吧！ 简单的点击事件 jq
语法篇JQuery基础
qq_62377885的博客
06-11 1384
jQuery是一个快速、简洁的JavaScript框架，它是John Resig在2006年创建的一个开源项目。它封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。它的设计宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery基础知识汇总
z2431435的博客
08-25 2182
jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery基础教程中文版2015
06-26
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
jQuery基础教程jQuery选择器教程pdf版最新版本
11-24
这本“jQuery基础教程及jQuery选择器教程pdf版最新版本”不仅能够帮助新手理解jQuery的基本概念和框架结构，而且能够深入探讨选择器的使用方法和技巧。通过阅读这份教程，新手可以快速掌握如何利用jQuery选择器进行...
Vue 3 动态ref问题
m0_72167535的博客
07-13 424
Vue 3 动态ref问题
Redis突发写入阻断？解析“MISCONF Redis is configured to save RDB…“故障处理
一起coding，一起嗨。
07-15 292
Redis突发写入阻断？解析"MISCONF Redis is configured to save RDB…"故障处理
React强大且灵活hooks库——ahooks入门实践之生命周期类hook（lifecycle）详解
前端开发-前端技术分享
07-13 270
ahooks是一个实用的React Hooks库，其中生命周期类hooks是其核心功能之一。主要包括：useMount(组件挂载时执行操作)、useUnmount(组件卸载时清理资源)和useUnmountedRef(检测组件是否卸载)。这些hooks简化了组件生命周期管理，可有效处理数据加载、事件监听、异步操作等场景。通过示例代码展示了如何在实际开发中应用这些hooks，并提供了使用场景说明和速查表。ahooks的生命周期hooks能帮助开发者更高效地构建React应用，避免常见的内存泄漏和状态更新问题。
Java EE进阶2：前端 HTML+CSS+JavaScript
最新发布
2301_81743879的博客
07-15 427
t=P4F5t=P4F5t=P4F5t=P4F5t=P4F5HTML特殊字符转义对照表 - 在线工具栏提供HTML特殊字符转义对照表，HTML特殊字符转义参考，欢迎大家使用。CSS：层叠样式表 | MDN层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
React 及其生态新闻 — 2025年6月
粉丝们务必加入微信粉丝群
07-14 255
从前沿测试工具到更快的打包器，再到 React Native 的令人兴奋的新功能，以下是为您精选的最新动态汇总。React Native 0.80 发布 版本带来了重要架构改进，提升性能和 TypeScript 支持，并进行了废弃优化，简化开发体验。额外功能：安装包减小48%，自动生成故事，标签分类管理，提升对 Svelte、Next.js 和 React Native 支持。React Cosmos 7.0 — 支持 React 19 和 Next.js 15，适合孤立组件开发。
jQuery基础指南
"这是一本关于jQuery的袖珍参考手册，由David Flanagan编写，旨在帮助读者快速理解和掌握jQuery基础。该书由O'Reilly Media出版，适合教育、商业或促销用途。" jQuery是一种广泛使用的JavaScript库，它简化了网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值