jquery入门
时间:2022-06-19
本文章向大家介绍jquery入门，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
运用jQuery时，需要在页面中引入jQuery文件
- jQuery的hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>helloworld</title>
<!-- 1. 在页面中引入jQuery支持 -->
<script src="js/jquery-1.12.4.js"></script>
<style>
#box{width: 200px;height: 200px;background: red;}
</style>
</head>
<body>
<button id="btn">点击我试试</button>
<div id="box"></div>
<script>
// jQuery代码，写在一对script标签中
// 可以使用最简洁的代码，完成JS中复杂的功能！
// $是jQuery的一个函数，表示 : jQuery() == $()
// $("")是jQuery选择器，参考了CSS选择器 #btn->id选择器
// $("#btn").click(fn)表示添加一个单击事件处理函数
$("#btn").click(function() {
// toggle()/slideToggle() jQuery内置动画效果
$("#box").slideToggle();
})
</script>
</body>
</html>- jquery 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
HTML中的代码是同步执行的：按照从上到下的顺序解释执行的
为了保证页面中的标签加载完成之后执行JQuery代码
使用$(function() { ...代码：就是页面标签加载完成执行的代码.. })
*/
$(function() {
// 这里写的代码，就是当页面中的标签全部加载完成执行的代码；类似于window.onload
// 标签选择器:$("标签名称")
$("#btn_tag_selector").click(function() {
// 标签选择器：选择所有的div标签，添加边框
$("div").css({
"border":"solid 1px orange"
})
});
$("#btn_id_selector").click(function() {
// ID选择器：语法$("#id值")
$("#box").css({
"border":"solid 1px red"
})
});
$("#btn_class_selector").click(function() {
// class选择器：语法：$(".class名称")
$(".item").css({
"border":"solid 1px blue",
"background":"#ccc"
})
});
$("#btn_child_selector").click(function() {
// 层级选择器，可以类似css语法一样，使用样式嵌套
// 子元素选择器
$("#container > li").css({
"border":"solid 2px pink",
"background":"#dfdfdf"
})
});
$("#btn_contain_selector").click(function() {
// 层级选择器：包含选择器
$("#container li").css({
"border":"solid 2px pink",
"background":"#006699",
"color":"#fff"
})
});
$("#test").click(function() {
$("#container a").css({
"color":"red",
"text-decoration":"none"
})
});
$("#btn_odd_selector").click(function() {
$("li:odd").css({
"background":"orange"
})
})
})
</script>
</head>
<body>
<button id="btn_tag_selector">标签选择器</button>
<button id="btn_id_selector">id选择器</button>
<button id="btn_class_selector">class选择器</button>
<button id="btn_child_selector">层级选择器：子元素选择器</button>
<button id="btn_contain_selector">层级选择器：包含选择器</button>
<button id="test">测试获取标签中包含的一个深层标签超链接</button>
<button id="btn_odd_selector">:odd</button>
<hr>
<div>这是一个单纯的div标签，没有id和class属性</div>
<div id="box">这是一个div标签，id属性值为box</div>
<div class="item">这是一个div标签1，class属性值为item</div>
<div class="item">这是一个div标签2，class属性值为item</div>
<ul id="container">
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<ul>
<li>这是ul中的ul里面的li标签</li>
<li>这是ul中的ul里面的li标签</li>
<li>这是ul中的ul里面的li标签<span>这是span标签</span></li>
<li>这是ul中的ul里面的li标签<a href="#">超链接</a></li>
</ul>
</ul>
</body>
</html>- 动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#box{width: 200px;height: 200px;background: orange;position:absolute;top:50px;left:0px;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
$("#btn_show").click(function() {
$("#box").show(1000);
})
$("#btn_hide").click(function() {
$("#box").hide(1000);
})
$("#btn_toggle").click(function() {
$("#box").toggle(1000);
})
$("#btn_slideDown").click(function() {
$("#box").slideDown(1000);
})
$("#btn_slideUp").click(function() {
$("#box").slideUp(1000);
})
$("#btn_slideToggle").click(function() {
$("#box").slideToggle(1000);
})
$("#btn_fadeIn").click(function() {
$("#box").fadeIn(1000);
})
$("#btn_fadeOut").click(function() {
$("#box").fadeOut(1000);
})
$("#btn_fadeToggle").click(function() {
$("#box").fadeToggle(1000);
})
$("#btn_fadeTo").click(function() {
$("#box").fadeTo(1000, 0.5);
});
$("#btn_animate").click(function() {
$("#box").animate({left:"500px",top:"100px",width:"100px", height:"50px"},1000)
.animate({top:"400px",left:"300px"}, 500)
.animate({top:"200px", left:"100px"}, 1000)
.animate({width:"200px",height:"100px"}, 400)
.animate({width:"50px",height:"10px"}, 200)
.animate({width:"300px",height:"200px"}, 500);
})
})
</script>
</head>
<body>
<button id="btn_show">显示</button>
<button id="btn_hide">隐藏</button>
<button id="btn_toggle">显示/隐藏 状态切换</button>
<button id="btn_slideDown">卷帘显示</button>
<button id="btn_slideUp">卷帘隐藏</button>
<button id="btn_slideToggle">卷帘显示/隐藏 状态切换</button>
<button id="btn_fadeIn">透明度显示</button>
<button id="btn_fadeOut">透明度隐藏</button>
<button id="btn_fadeToggle">透明度显示/隐藏 状态切换</button>
<button id="btn_fadeTo">切换到指定的透明度</button>
<button id="btn_animate">自定义动画</button>
<div id="box"></div>
</body>
</html>- 轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0px;padding:0px;}
#bannel_box{margin:10px auto;padding:5px;border:solid 1px #8f8f8f;border-radius:8px;position:relative;width:800px;height:450px;}
#bannel_box img{position:absolute;width:800px;vertical-align: bottom;border:none;border-radius:8px;display:none;}
#bannel_box img:nth-child(1){display:block;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
var $index = 0;// 当前正在展示的图片的下标
// 计时函数， 3S更换一次图片
setInterval(function() {
var $next = $index + 1;// 下一张要展示的图片的下标
if($next >= 5) {
$next = 0;
}
$("img").eq($index).fadeOut(1000);//隐藏当前图片
$("img").eq($next).fadeIn(1000);// 显示下一张图片
$index ++;
if($index >= 5) {
$index = 0;
}
}, 3000);
})
</script>
</head>
<body>
<div id="bannel_box">
</div>
</body>
</html>- 导航条菜单下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.nav{list-style:none;height:50px;background-color:#069;}
.nav > li{float:left;height:50px;font-size:20px;color:#fff;width:100px;text-align:center;line-height:50px;}
.nav > li > ul{list-style:none;width:120px;background:pink;display:none;}
.nav > li > ul >li{height:50px;line-height:50px;color:#333;font-size:18px;width:120px;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 这里面的代码，是当页面中的标签加载完成后执行的
$("li").mouseenter(function() {
// 在事件操作中，可以通过this来标签当前事件触发的元素
// console.log($(this).children());
// console.log($(this).children().last());
$(this).children().last().stop(true).slideDown("slow");
});
$("li").mouseleave(function() {
$(this).children().last().stop(true).slideUp("slow");
})
})
</script>
</head>
<body>
<ul class="nav">
<li><span>首页</span>
<ul>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
<li>首页二级菜单</li>
</ul>
</li>
<li><span>新闻</span>
<ul>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
<li>新闻二级菜单</li>
</ul>
</li>
<li><span>影视</span>
<ul>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
<li>影视二级菜单</li>
</ul>
</li>
<li><span>音乐</span>
<ul>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
<li>音乐二级菜单</li>
</ul>
</li>
<li><span>体育</span>
<ul></ul>
</li>
<li><span>财经</span>
<ul></ul>
</li>
<li><span>八卦</span>
<ul></ul>
</li>
<li><span>美食</span>
<ul></ul>
</li>
</ul>
</body>
</html>- 图片翻转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
#box{margin:50px auto;width:400px;height: 226px;padding:5px;border:solid 1px #cdcdcd;position:relative;}
#box img{width: 400px;border-radius:8px;position:absolute;}
#box img:nth-child(2){height:0;}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 当页面中所有标签全部加载完成的时候，执行的代码
$("#box").mouseenter(function() {
var $that = $(this);
// 隐藏第一张图片
$that.children().first().animate({top:"113px", height:"0px"}, 1000, function() {
// 显示第二章图片
$that.children().last().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
});
});
$("#box").mouseleave(function() {
var $that = $(this);
// 隐藏第二张图片
$that.children().last().animate({top:"113px", height:"0px"}, 1000, function() {
// 显示第一章图片
$that.children().first().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000);
});
});
})
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>- jquery的DOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DOM操作</title>
<!--
使用JQuery改造瀑布流！
-->
</head>
<body>
<p>
JQuery 的DOM操作
<ul>
<li>1. DOM操作选择标签</li>
<li>2. DOM操作处理标签数据</li>
</ul>
</p>
<p>
JavaScript对象：就是标签本身，也称为DOM对象<br />
var _box = document.getElementById("box")
_box >>>> <div id="box"></div>
jQuery对象：是DOM对象的数组
var $box = $("#box")
$box >>>> [<div id="box"></div>]
</p>
<p>
JQuery DOM操作选择标签
通过函数操作，替代了选择器操作来选中标签
> 选择器：括号中是字符串
> 函数：括号中可以有变量
<ul>
<li>选择器.eq(num)：用于选中指定下标的jQuery对象</li>
<li>选择器.gt(num)：用于选中下标大于指定下标的所有jQuery对象</li>
<li>选择器.lt(num)：用于选中下标小于指定下标的所有jQuery对象</li>
<li>选择所有的子元素: 选择器.children()</li>
<li>选择所有的指定的子元素: 选择器.children("ul")</li>
<li>选择第一个子元素：选择器.first()</li>
<li>选择最后一个子元素：选择器.last()</li>
<li>判断标签是否包含某个class名称：选择器.hasClass("box")</li>
<li>二次筛选：选择器.filter(选择器)；从第一个选择器选中的标签中继续选择满足第二个选择器的标签</li>
<li>二次筛选：选择器.has(子标签选择器)，选择所有包含指定子元素的父标签</li>
<li>二次筛选：父选择器.find(子选择器)，从父选择器选中的标签中的子元素里面，查询符合子选择器的标签元素</li>
<li>next:选择下一个同级元素</li>
<li>prev:选择上一个同级元素</li>
<li>sibings:选择所有的同级元素</li>
</ul>
</p>
<p>
jQuery DOM操作，操作标签数据
内容
属性
样式
标签
</p>
<p>
内容
常规开始标签和结束标签中间的内容操作
var $boxValue = $("#box").text();
$("#box").text("添加的内容")
表单元素的数据
var $name = $("#username").val();
</p>
<p>
属性操作：
var $id = $("#box").attr("id")
$("#box").attr("id", "container")
</p>
<p>
样式操作：
简洁操作
$("#box").css("border", "solid 1px red");
标准操作
$("#box").css({
"border":"solid 1px red",
"background":"#efefef"
})
注意：样式尽量写在css中，通过标签的class属性来控制使用不同的样式
如果是动态递增变化的样式，可以通过JS代码进行处理。
</p>
<p>
标签的操作：
代码中创建一个标签
var $div = $("<div>");
常见操作函数：
append();
appendTo();
prepend();
prependTo();
</p>
<div id="box"></div>
<input type="text" id="username">
</body>
</html>
- 苹果后端的Oracle数据库
- C#基础知识回顾--C#遍历enum类型、获取enum项个数
- 用香蕉也能玩电脑游戏—Tensorflow对象检测接口的简单应用
- 通过图片定位给一张图片添加多个链接
- Struts Interceptor Example
- 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化
- WPF备忘录（3）如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter
- WPF备忘录（2）WPF获取和设置鼠标位置与progressbar的使用方法
- WPF文字修饰——上、中、下划线与基线
- 微信公众平台数据接口正式对所有认证公众号开放
- 参考基因组没有，经费也没那么多，怎么办？
- .Net下SQLite的DBHelp
- 数据库进程间通信解决方案之MQ
- 【学术】算法交易的神经网络:强化经典策略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言T检验的简单小例子
- ggplot2 修改图例的一些操作
- 实践：SpringBoot实现定时任务的动态增删启停
- Asp.Net Core API 需要认证时发生重定向的解决方法
- 在 Windows 系统上启用远程应用
- ArcGIS Enterprise 配置 nginx 反向代理
- 在安卓手机上通过 Termux 运行编译/运行 .NET 应用
- 在 ASP.NET Core 中修改配置文件后自动加载新的配置
- 使用 frp 安全的暴露内网服务
- 在 .NET Core 应用中使用 NHibernate
- 使用 DataX 增量同步数据
- 在虚拟目录中部署 ASP.NET Core 应用
- Docker 容器的健康检查
- 使用 mono 编译 .NET Standard 应用
- 指定 ASP.NET Core 应用监听的端口