JQuery学习
JQuery其实就是对象,JQuery本质就是js库
特点: write less, do more.
开发:jQuery-x-x-x.js 方便看原码
发布:jQuery-min.js
01我的第一个jQuery–对象互换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01我的第一个jQuery</title>
<!-- 1.引包 -->
<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 一个div对象 -->
<div id="app">DIV</div>
<script type="text/javascript">
// A.js获取对象
var obj = document.getElementById("app");
console.log("div对象")
console.log(obj);
console.log("jQuery是什么")
console.log(jQuery);
console.log("js对象->jQuery对象")
console.log(jQuery(obj));
console.log("jQuery对象->js对象")
console.log(jQuery("#app")[0]);
// 所有jQuery对象是将对象以数组方式存储的!!!!!!!!!!!!
console.log("")
console.log("$符号等同于jQuery()")
console.log("js对象->jQuery对象")
console.log($(obj));
console.log("jQuery对象->js对象")
console.log($("#app")[0]);
// 所以jQuery()等同于$()
</script>
</body>
</html>
结果:
jQuery对象是将对象以数组方式存储的
**html由上而下执行 **
02入口函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>02入口函数</title>
<!-- 1.导包 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
//入口函数:
//js入口函数
// window.οnlοad=function(){
// alert(1);
// }
// window.οnlοad=function(){
// alert(2);
// }
// 所以window.onload会覆盖前面的window.onload
//并且window.onload内的内容在html内的所有加载完才执行
// jQuery入口函数
// 简写方式
$(function() {
alert(1);
})
$(function() {
alert(2);
})
//等同于
//$(document).ready(function(){
//})
</script>
</body>
</html>
03解决库的冲突问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03多个库的之间的冲突问题解决</title>
</head>
<body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
//内容
})(jQuery); //参数
</script>
</body>
</html>
04选择器
选择器分类
05过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤选择器</title>
</head>
<body>
<!-- 页面显示内容 -->
<div class="box">
<p class="p1">p1</p>
<p class="p2">p2</p>
<ul>
<li class="item1">张三</li>
<li class="item2">李四</li>
<li class="item3" id=item3>王五</li>
</ul>
<div>
<input type="text" class="user" placeholder="用户">
</div>
<div>
<input type="password" class="pwd" placeholder="密码">
</div>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 过滤选择器
console.log($('li:first'));
console.log($("li:last"));
console.log($('li:odd')); //奇
console.log($('li:even')); //偶(from 0)
console.log("not");
console.log($("li:not(.item3)"));
console.log($("li:not(#item3)"));
console.log("eq");
console.log($("li:eq(0)"));
console.log($("li:eq(2)"));
console.log($("li:eq(-1)"));
console.log("内容")
console.log($("li:first").text());
console.log($("li:not(#item3)").text()); //内部全部内容都会输出
console.log($("li:eq(-1)").text());
console.log($("li").text()); //输出全部内容
console.log("gt 大于 / lt 小于")
console.log($("li:gt(0)").text());
console.log($("li:lt(3)").text());
</script>
</body>
</html>
06内容选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容选择器</title>
</head>
<style type="text/css">
.p1{
display:none;
}
</style>
<body>
<!-- 页面显示内容 -->
<div class="box">
<p class="p1">p1</p>
<p class="p2">p2</p>
<ul>
<li class="item1">张三</li>
<li class="item2">李四</li>
<li class="item3" id=item3>王五</li>
<li id="empty">
<h4>
Hello World!!!
</h4>
</li>
</ul>
<div>
<input type="text" class="user" placeholder="用户">
</div>
<div>
<input type="password" class="pwd" placeholder="密码">
</div>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 内容选择器
console.log($("ul li:contains(张三)"));
console.log($("ul li:empty"));
//有h4的标签
console.log($("ul li:has(h4)"));
console.log("获取可见元素");
console.log($(".box p:visible"))
console.log("获取不可见元素");
console.log($(".box p:hidden"))
});
</script>
</body>
</html>
07属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性过滤选择器</title>
</head>
<style type="text/css">
.p1{
display:none;
}
</style>
<body>
<!-- 页面显示内容 -->
<div class="box">
<p class="p1">p1</p>
<p class="p2">p2</p>
<ul>
<li class="item1">张三</li>
<li class="item2">李四</li>
<li class="item3" id=item3>王五</li>
<li id="empty">
<h4>
Hello World!!!
</h4>
</li>
</ul>
<div>
<input type="text" class="user" placeholder="用户">
</div>
<div>
<input type="password" class="pwd" placeholder="密码">
</div>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 属性过滤选择器
//=
console.log("=")
console.log($("input[type='text']"));
console.log($("input[type='password']"));
//!=
console.log("!=")
console.log($("input[type!='password']"));
//^= 以某些值开头的元素
console.log("^=")
console.log($("input[type^='t']"));
console.log($("input[type^='p']"));
});
</script>
</body>
</html>
08选择器处理完善机制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$()完善机制</title>
</head>
<body>
<div class="box">
<p class="p1">p1</p>
<p class="p2">p2</p>
<ul>
<li class="item1">张三</li>
<li class="item2">李四</li>
<li class="item3" id=item3>王五</li>
<li id="empty">
<h4>
Hello World!!!
</h4>
</li>
</ul>
<div>
<input type="text" class="user" placeholder="用户">
</div>
<div>
<input type="password" class="pwd" placeholder="密码">
</div>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function() {
if($('.box').length>0){
console.log('.box获取成功')
}else{
throw new Error('.box获取失败')
}
//抛出error
if($('#box').length>0){
console.log('#box获取成功')
}else{
throw new Error('#box获取失败')
}
})
</script>
</body>
</html>
DOM操作–html DOM操作
1.插入结点(移动结点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加结点</title>
</head>
<body>
<div class="mushroom">小蘑菇</div>
<div class="box">
<h3>h3</h3>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//入口函数
//添加结点
$(function() {
//append
//1.向内添加
var htmlStr = '<h3>hello world</h3>';
//获取对象,然后向对象 内 添加
$('.box').append(htmlStr);
//2. 移动位置
var h3Tag = document.createElement('h3');
h3Tag.innerText = 'h2Tag';
$('.box').append($('div')[0]);
// console.log($('div')[0])
//1.向内添加在最前面prependTo
$('.box').prepend('<a href="https://www.baidu.com/">百度一下</a>');
$('a').css("color",'red');
//appendTo
//加入到哪里
$("<h1>h1</h1>").appendTo($('div.box')).css('color','red').click(function(){
// alert("i am the red h1.")
// alert(this)
// 所有this是html
// console.log(this);
alert($(this).text());
})
//所有有 对象.功能1.功能2
})
</script>
</body>
</html>
雪花效果
setInterval和animate
2. 删除节点(或结点内的内容)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom操作-删除节点</title>
</head>
<body>
<div class="wrap">
<p>This is wrap. </p>
<button type="button">按钮</button>
</div>
<div>
<p>------------------------------------------</p>
</div>
<div class="box">
<p>This is box. </p>
</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//入口函数
$(function() {
//1. 删除节点也删除节点上绑定事件
// $("button").click(function(){
// var t = $(this).remove(); //返回删除的结点
// $('.box').append(t);
// alert(1);
// })
//2. 仅仅是删除了节点,事件保留
// $("button").click(function(){
// var t = $(this).detach(); //返回删除的结点
// $('.box').append(t);
// alert(1);
// })
$("button").click(function() {
//3. 清空
$('.box').empty();
//等价于
// $('.box').html('');
})
})
</script>
</body>
</html>
3.克隆clone
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>克隆结点</title>
</head>
<body>
<div class="clone">
<ul>
<li>小马哥</li>
</ul>
</div>
<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//只克隆元素
// $('.clone ul li').click(function(){
// $(this).clone().appendTo($('.clone ul'));
// })
//克隆(元素和绑定事件)
$('.clone ul li').click(function(){
$(this).clone(true).appendTo($('.clone ul'));
})
})
</script>
</body>
</html>
04替换或包裹元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>09替换和包裹结点</title>
</head>
<body>
<div class="replace">
<p>hello</p>
<p>world</p>
</div>
<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 替换
// 如果用的是已有对象的话,会变成移动到目标位置来替换，而不是复制一份来替换。
// $('.replace p').replaceWith('<a href="https://www.baidu.com/">百度一下</a>')
// $('.replace p').replaceWith('<div class="wrap"><p>This is a wrap. </p></div>')
// 将每一个元素包裹起来 或 把所有的段落用一个新创建的div包裹起来
// $('.replace p').wrap('<div class="wrap"></div>');
// $('.replace p').wrap("<div class='wrap'></div>");
// $('.replace p').wrap('<div class="wrap"></div>');
// $('.replace').wrap('<div class="wrap"></div>');
//这个方法将移除元素的父元素
// $('').unwrap();
// 将匹配元素的字内容用html标签包裹起来 (将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来)
// $('.replace p').wrapInner("<b></b>");
})
</script>
</body>
</html>
05属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>属性操作</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 动态添加
$(function(){
//设置单个
$('div').attr('id','box');
//设置多个
// $('div').attr({id:'box',title:"盒子"});
// console.log($('div'))
//定时
setTimeout(function () {
$('img').attr({src:"https://img0.baidu.com/it/u=299880961,2606592342&fm=26&fmt=auto",alt:'美人'})
},2000)
})
</script>
<style>
#box{
width:100px;
height:100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div></div>
<img src="" alt="">
</body>
</html>
06类操作
切换类
Object.toggleClass(‘className’); 有删无加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>类操作</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//red blue颜色互换
//方法1
// var isRed = true;
// $('.box').click(function() {
// if (isRed) {
// $(this).addClass('active');
// isRed = false;
// } else {
// $(this).removeClass('active');
// isRed = true;
// }
// })
//方法2
// $('.box').click(function() {
// if ($('.box').hasClass('active')) {
// //有
// $(this).removeClass('active a b');//可以修改多个
// } else {
// $(this).addClass('active a b');
// }
// })
//方法3
$('.box').click(function () {
$(this).toggleClass('active');
})
})
</script>
<style>
.box {
width: 400px;
height: 400px;
background-color: red;
}
.active {
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
07值操作
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>值操作</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//1.1获取HTML内容(标签+文本)
// let t1=$('.content ul li').html();
// console.log(t1);
//1.2设定HTML内容的值
// let t2="<h3>设定HTML内容的值</h3>"
// $('.content ul li').html(t2);
// 2.文本
// t1=$('.content ul li').text();
// console.log(t1);
//不可行
// t1=$('.content ul img').text();
// console.log(t1);
// t2="设定text内容的值"
// $('.content ul li p').text("重新设置的p");
//3.val
// t1=$('.content input[type=text]').val();
// console.log(t1);
$('.content input[type=text]').val("路欧利卡");
//3.1单选框
//默认选项改为yellow
$('#single').val('yellow');
//3.2复选框 val内可以放数组
$('#multiple').val(['red', 'yellow']);
// $('#multiple').val(['red','yellow','苹果']);
($('#sex input')).val(['1', 'A']); //数组对数组
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="content">
<ul>
<li>
<img src="img/1.png" alt="">
<p>p</p>
</li>
</ul>
<input type="text" name="" id="" value="皮卡丘" />
<select id="single">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="pink">pink</option>
<option value="blue">blue</option>
</select>
<select id="multiple" multiple="multiple">
<option value="red" selected="selected">red</option>//设置为选中状态
<option value="yellow" selected=" selected">yellow</option>
<option value="pink">pink</option>
<option value="blue">blue</option>
</select>
<div id="sex">
<input type="checkbox" value="1">男
<input type="checkbox" value="0">女
<input type="checkbox" value="A">A
<input type="checkbox" value="B">B
</div>
</div>
</body>
</html>
08筛选方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>筛选方法</title>
</head>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//1. children获取匹配元素的所有亲儿子
//获取所有子元素
console.log($('.box').children());
//获取class为aP的子元素
console.log($('.box').children('.aP'));
//2. next()只返回下一个紧邻的同辈元素
console.log($('.box').next());
//3. next()只返回上一个紧邻的同辈元素
console.log($('.box').prev());
//4. parent()获取一个包含着所有匹配元素的唯一父元素的元素**集合**
console.log($('ul li').parent());
console.log($('ul li').parent().length);
//parents()返回匹配元素的爸爸以及爸爸的爸爸...
//返回匹配元素的所有的祖先元素的元素集合
console.log($('.box0').parents());
//5. eq()获取当前链式操作中第N个jQuery对象,0是第一个
console.log($('ul'));
console.log($('ul').eq(0).html());
console.log($('ul').eq(1).html());
})
</script>
<body>
<div class="box0"><p>This is the box0. </p></div>
<div class="box">
<p class="aP">This is p. </p>
<h3>This is h3. </h3>
<ul>
<li> This is li of ul. </li>
</ul>
<ul>
<li> This is the first li of ul. </li>
<li> This is the second li of ul. </li>
<li> This is the third li of ul. </li>
</ul>
</div>
<input type="text" name="" id="" value="input" />
<div id='nextDiv'><p>I am the second div.</p> </div>
</body>
</html>
09siblings方法–找兄弟姐妹
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>siblings</title>
<!-- sibling兄弟姐妹 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
// 情况一
//$(this)表示点击的那个按钮
//后面siblings()选中了同辈中除了点击的按钮以外的按钮
// $(this).css('backgroundColor', 'yellow').siblings().css('background-color','white');
//siblings('button')表示选中了同辈中除了点击的按钮以外的按钮(防止同辈中的其他元素干扰筛选)
// $(this).css('backgroundColor', 'yellow').siblings('button').css('background-color','white');
//情况二
$(this).css('backgroundColor', 'yellow').parent().siblings('li').children('button').css('background-color','white');
})
})
</script>
</head>
<body>
<!-- 情况一 -->
<!-- <button type="button">按钮一</button>
<button type="button">按钮二</button>
<button type="button">按钮三</button>
<button type="button">按钮四</button>
<button type="button">按钮五</button>
<button type="button">按钮六</button>
<button type="button">按钮七</button> -->
<!-- 情况二 -->
<ul>
<li>
<button type="button">按钮一</button>
</li>
<li>
<button type="button">按钮二</button>
</li>
<li>
<button type="button">按钮三</button>
</li>
<li>
<button type="button">按钮四</button>
</li>
<li>
<button type="button">按钮五</button>
</li>
</ul>
</body>
</html>
/*
1.
fixed:固定定位
absolute:绝对定位
区别：
1)没有滚动条的情况下没有差异
2)在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
2.
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效(例如 position:absolute;)
*/
10.css的dom方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>css的dom方法</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
width: 150px;
height: 200px;
background-color: yellow;
left: 100px;
top: 1000px;
position: absolute; //生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
}
.navbar {
/* fixed:固定定位
absolute:绝对定位
区别很简单：
1、没有滚动条的情况下没有差异
2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效(例如 position:absolute;)
相当于z轴,垂直与屏幕
*/
/* 不显示 */
/* display:none; */
width: 100% position: fixed;
background: red;
z-index: 1000;
}
</style>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//1. 获取css中的color属性
// $('.box').text($('.box').css('color'));
//设置
// $('.box').css('color','red');
//2. offset()方法获取匹配元素在当前视口的相对偏移。 left top 单位:px
// console.log($('.box').offset().left);
// console.log($('.box').offset().top);
// $('.navbar').scrollTop();
let offset = $('p').offset();
// console.log(offset.left + offset.top)
// console.log("left:" + offset.left + ' top:' + offset.top)
$(window).scroll(function() {
let scrollTop = $(this).scrollTop();
if (scrollTop > offset.top) {
$('.navbar').hidden(); //隐藏
} else {
$('.navbar').show();//显示
}
//淡入淡出
// if (scrollTop > offset.top) {
// $('.navbar').fadeOut();
// } else {
// $('.navbar').fadeIn();
// }
//滑入滑出
// if (scrollTop > offset.top) {
// $('.navbar').slideUp();
// } else {
// $('.navbar').slideDown();
// }
})
})
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
123
</a>
<a class="navbar-brand" href="#">
456
</a>
<a class="navbar-brand" href="#">
789
</a>
</div>
</div>
</nav>
<div class="box">
<p>css的dom方法</p>
</div>
</body>
</html>
//jQuery(window)指的是当前可见区域，也就是你浏览器所能看到的页面。
//jQuery(document)指的是整个文档。
11.盒子的内外宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>盒子的内外宽高</title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//设置.box属性
$('.box').css({
width:"200px",
height:"200px",
background:"yellow",
border:"2px solid #000",
padding:"50px"
})
$('#btn01').click(function () {
let w=$('.box').width();
let iW=$('.box').innerWidth();
let oW=$('.box').outerWidth();
let h=$('.box').height();
let iH=$('.box').innerHeight();
let oH=$('.box').outerHeight();
alert('<包含width>width = ' + w + ' height = '+h +'\n<包含width+padding>innerWidth = '+ iW
+ ' innerHeight = '+ iH +'\n<包含width+padding+border>outerWidth = '+ oW + ' outerHeight = '+oH)
})
})
</script>
</head>
<body>
<div class="box">
<p>This is .box p</p>
<button id="btn01" type="button">获取div的信息</button>
</div>
</body>
</html>
12 鼠标的点击和键盘按键事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鼠标的点击事件</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//设置.box属性
$('.box').css({
width: "200px",
height: "200px",
background: "yellow",
})
$('#box').css({
position: "relative",
width: "100px",
height: "40px",
background: "red",
})
$('#box #content').css({
position: "absolute",
width: "200px",
height: "200px",
background: "yellow",
top: "25px",
display:'none'
})
//click dblc1ick（不常用）
//hide show
// $('.box').click(function() {
// //1
// $(this).hide(1000, function() {
// $(this).show(1000);
// })
//2
// $(this).hide(1000).delay(1000).show(1000);
// })
// $('.box').dblclick(function() {
// alert('dblclick事件')
// })
// jquery单击事件和双击事件冲突解决方案
var timer = null;
$('.box').click(function() {
clearTimeout(timer);
timer = setTimeout(function() {
$('.box').hide(1000).delay(1000).show(1000);
}, 300);
})
$('.box').on('dblclick', function() {
clearTimeout(timer);
alert('dblclick事件')
})
//mousedown/mouseup mousemove移动事件（ 不常用）
$('.box').mousedown(function() {
console.log('鼠标按下')
})
$('.box').mouseup(function() {
console.log('鼠标松开')
})
$('.box').mousemove(function() {
console.log('鼠标移动了')
})
// mouseenter()/mouseleave()代替mouseover()/mouseout()
$("#box").mouseenter(function() {
$('#content').stop().show(100);
})
$("#box").mouseleave(function() {
$('#content').stop().hide(100);
})
})
$(function () {
// focus() blur()
// $('input[type=text]').focus();
// console.log('获取焦点');
// $('input[type=text]').blur();
// console.log('失去焦点');
// keydown() keyup()
//获取焦点时失去焦点,导致该input不可用
$('input[type=text]').focus(function () {
$(this).blur();
});
$(window).keydown(function (event) {
// console.log(event.keyCode);
switch (event.keyCode){
case 32:
//按下了空格键
console.log('按下了空格键')
break;
default:
break;
}
})
})
</script>
</head>
<body>
<div class="box">
<p>This is .box p</p>
</div>
<div id="box">
<p id="content">This is #box p</p>
</div>
<input type="text"/>
</body>
</html>
使用动画时,先停止动画在执行命令
13表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单事件</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// change 适用于input textarea select
// select
// submit
$(function() {
$('input[type=text]').change(function() {
console.log("input[type=text]的值发生了变化")
let t = $(this).val();
if (/^\d{4}$/.test(t)) { //四位数字
console.log('输入的数是' + t);
$(this).css('borderColor', '#88fc3f');
} else { //非四位数字
console.log('格式错误');
$(this).css('borderColor', 'red');
}
});
$('#select').change(function() {
console.log("select的值发生了变化")
let t = $(this).val();
console.log(t)
});
$('form').submit(function (event) {
//关闭了默认功能
event.preventDefault();
// 自定义功能
// 获取界面得到的信息
let inputVal = $('input[type=text]').val();
let selectVal = $('#select').val();
console.log(inputVal,selectVal);
})
})
</script>
<style type="text/css">
</style>
</head>
<body>
<form action="">
<input type="text" />
<select name="" id="select">
<option value="a">a</option>
<option value="b">b</option>
</select>
<input type="submit" value="提交 " />
</form>
</body>
</html>
<!--
val()取值
html()取html内容
text()取文本
jquery中封装了ajax(与后端发生交互)
-->
14事件对象
###阻止冒泡
// 阻止冒泡
para.stopPropagation();
//阻止默认行为
param.preventDefault();
//或
return false;//也可以阻止冒泡 还可以阻止默认跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡的用例</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style>
.box{
width:300px;
height: 300px;
border:1px solid black;
}
h3{
background-color: rgb(100,400,100);
}
</style>
<script type="text/javascript">
$(function () {
$('.box').click(function () {
alert('父元素')
return false;//也可以阻止冒泡
})
$('h3').click(function (para) {
//阻止冒泡
// para.stopPropagation();
alert('子元素')
return false;//也可以阻止冒泡
})
$(document).click(function () {
alert('document文档元素')
})
})
</script>
</head>
<body>
<div class="box">
<h3>冒泡</h3>
</div>
</body>
</html>
导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡应用</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.boxNav {
width: 100%;
height: 18.75rem;
background-color: rgb(100, 200, 100);
position: fixed;
top: 0;
left: 0;
display: none;
}
.boxNav ul li{
display: inline-block;
width: 6.25rem;
height: 2.5rem;
background-color: black;
line-height: 2.5rem;
text-align: center;
color: #fff;
}
.boxNav ul li a{
display: block;
/* width: 6.25rem; */
widows: 6.25rem;
height: 2.5rem;
color: #fff;
}
</style>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('.menuView').click(function(param) {
// 一
// param.preventDefault();
// param.stopPropagation();
$('.boxNav').stop().slideDown(1000);//写动画的时候先停止动画
$('.boxNav ul li a').click(function (param) {
// param.preventDefault();
// param.stopPropagation();
$(this).css('color','red').parent().siblings('li').children().css('color','#fff')
return false
})
// 二
return false
})
$('.boxNav,ul').click(function (param) {
return false
})
$(document).click(function (param) {
$('.boxNav').stop().slideUp(1000);
})
})
</script>
</head>
<body>
<a href="" class="menuView">菜单</a>
<div class="boxNav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">论坛</a></li>
<li><a href="">个人中心</a></li>
</ul>
</div>
</body>
</html>
15事件代理
// 利用冒泡原理,把事件加到父级元素上 触发执行效果
on(events,[selector],[data],fn)
在选择元素上绑定**一个或多个事件**的事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件代理</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$('#box ul').on('click','li',function () {
alert($(this).text());
})
let timer=null;
let t=1;
timer = setInterval(function () {
let content= "<li>事件"+t +'</li>';
$(content).appendTo('#box ul');
t++;
if(t==10){
clearInterval(timer)
}
},3000)
})
</script>
</head>
<body>
<div id="box">
<ul>
<li>事件</li>
</ul>
</div>
</body>
</html>
16jQuery的两个合成事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>合成事件</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
let isShow = true;
$('#btn').click(function() {
// if(isShow){
// $(this).text('显示')
// $('.box').stop().hide(1000);
// isShow=false;
// }else{
// $(this).text('隐藏')
// $('.box').stop().show(1000);
// isShow=true;
// }
//用合成动画
$('.box').toggle('slow', function() {
if (isShow) {
$('#btn').text('显示');
isShow = false;
} else {
$('#btn').text('隐藏')
isShow = true
}
});
})
// $('.box').mouseenter(function() {
// $(this).css("backgroundColor", 'rgb(116, 234, 116)')
// })
// $('.box').mouseleave(function() {
// $(this).css("backgroundColor", 'rgb(234, 19, 40)')
// })
// 合成动画
$('.box').hover(function () {
$(this).css("backgroundColor", 'rgb(116, 234, 116)')
},function () {
$(this).css("backgroundColor", 'rgb(234, 19, 40)')
})
})
</script>
</head>
<body>
<button type="button" id="btn">隐藏</button>
<div class="box" style="width: 12.5rem; height: 12.5rem; background-color: red;"></div>
</body>
</html>
17动画效果
// 使用动画时先stop(),在使用动画
hide show toggle()
slideUp slideDown slideToggle
fadeIn fadeOut fadeToggle
fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度
// 自定义动画
animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数。
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 改颜色需要的jQuery插件 -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#btn').click(function() {
$(".box").animate({
width: "100px",
height: "100px",
// 颜色另需jQuery插件
backgroundColor: 'green'
}, 1000);
})
})
</script>
</head>
<body>
<button type="button" id="btn">隐藏</button>
<div class="box" style="width: 12.5rem; height: 12.5rem; background-color: red;"></div>
</body>
</html>
18Ajax的使用
Ajax在不重载页面的情况下,对页面进行局部更新
<script type="text/javascript">
//get伪代码
$.ajax({//$ 相当于 jQuery
url:'....',//接口地址
method:'get',//请求
success:function (res) { //res存放请求的的结果
console.log(res)
}
})
//post伪代码
// $.ajax({
// url:'',
// method:'post',
// data:{
// username:'',
// password:$('input[type=password]').val()
// },
// success:function (res) {
// }
// })
</script>
19Ajax实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax的使用</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.ajax({
url: 'https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的key',
method: 'get',
success: function(res) { //res存放请求的的结果,是个json数据
if (res.code = 200) {
console.log("收到返回数据");
console.log(res.now.text);
console.log(res.now.windDir);
// 修改网页显示
let windDir = res.now.windDir;
let text = res.now.text;
$('.weather #windDir').html(windDir)
$('.weather #nowText').html(text)
}
}
})
</script>
</head>
<body>
<div class="weather">
<p id="windDir"></p>
<p id="nowText"></p>
</div>
</body>
</html>
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
