潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</body>
<body>
<script src="jq.js"></script>
</htm 类似 css 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p class="text">我p标签</p>
</div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script src="jq.js"></script>-->
<script>
// 获取对象元素
// $('div>.text')
c = $('div>p').text();
console.log(c) </script>
</html>
筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*color: yellow;*/
}
</style>
</head>
<body>
<div>元素1</div>
<div>元素2</div>
<div>元素3</div> <div class="box">
<p>无类名</p>
<p class="test">有类名</p>
<span>无类名</span>
<span class="test">有类名</span>
<div>无类名</div>
<div class="test">有类名</div>
</div> <div class="div1">div1
<div class="div2">div2
<div class="div3">div3
<div class="div4">div4 </div>
</div>
</div>
</div> <div>1</div>
<div class="box2">2</div>
<div>3</div>
<div>4</div>
<div>5</div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
// 选择第一个
// $('div').first().css('font-size','60px');
// //选择最后一个
// $('div').last().css('color','yellow')
// //指定选择
// $('div').eq(1).css('color','yellow') // children 类似 后代选择器
// $('.box').children('.test').css('color','yellow')
// $('.box').children().css('color','yellow') //如果不传参，就选择到后边所有子元素 //find 必须传参，除此外与 children 一个样
// $('.box').find('.test').css('color','yellow') // parent 他的上一层，和他的全部下层，
// $('.div3').parent().css('color','yellow') // parents 他的所有上层，和他的所有下层，
// $('.div3').parents().css('color','yellow') //parentsUntil 除了 div2 选中他的全后代，
// $('.div4').parentsUntil('.div2').css('color','yellow') // siblings 除了自己之外，选中同级的所有， 如轮播图
$('.box2').siblings().css('color','yellow')
</script>
</body>
</html>
属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{
height: 30px;
width: 200px;
background: #131313;
color: yellow;
}
</style>
</head>
<body>
<div>1</div>
<div><p>2</p></div>
<input typeof="text" name="user">
<button class="btn">获取value</button> <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> <div class="box">我就是我</div>
<button>添加样式</button><br>
<button>删除样式</button><br>
<button>取反</button><br> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script> // 属性操作 text html val()
console.log($('div').eq(0).text());
console.log($('div').eq(1).html()); $('.btn').click(function () {
console.log($('input').val());
}) // 属性操作
//增加属性
$('li').eq(0).attr('test','aaaa') ; // 增加个 test 为 aaaa 的属性 // 查
console.log($('li').eq(0).attr('test')); // 删除
$('li').eq(0).removeAttr('test'); //添加样式
$('button').eq(1).click(function () {
$('.box').addClass('con');
}) // 删除样式
$('button').eq(2).click(function () {
$('.box').removeClass('con');
}) // 反相，有的没有，没有的有
$('button').eq(3).click(function () {
$('.box').toggleClass('con');
}) </script>
</body>
</html>
样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div{*/
/*height: 20px;*/
/*width: 100px;*/
/*background: #131313;*/
/*color: yellow;*/
/*}*/
</style>
</head>
<body>
<div>我就是我</div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$('div').css({
'height':'100px',
'width':'150px',
'background':'131313',
'color':'yellow'
})
</script> </body>
</html>
位置操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.out{
height: 200px;
width: 200px;
background: #525d68;
position: relative;
top: 30px;
left: 30px;
}
.inn{
height: 100px;
width: 100px;
background: yellow;
position: absolute;
top: 20px;
left: 20px;
} .test{
margin-top: 100px;
border: 1px solid blue;
height: 100px;
width: 100px;
overflow: auto; /*滚动条*/
}
</style> </head>
<body>
<div class="out">
<div class="inn">我就是我</div>
</div> <div class="test">如果博文质量不符合首页要求，会被工作如果博文质量不符合首页要求，会被工作如果博文质量不符合首页要求，会被工作如果博文质量不符合首页要求，会被工作</div>
<button>获取滚动条</button>
<button>设置滚动条</button> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script>
// 离窗口的距离
var $box1 = $('.inn').offset();
console.log($box1);
console.log($('.inn').position()) // 离父级边框的值 ， // 获取当前的位置
$('button').first().click(function () {
console.log($('.test').scrollTop()+'px'); //获取滚动条 scrollTo
console.log($('.test').height() +'px'); //获取元素div的高度 height()
console.log($('.test').width() +'px'); //获取元素div的宽度 width()
});
$('button').last().click(function () {
console.log($('.test').scrollTop(100)); //设置滚动条 scrollTo
console.log($('.test').height(50) ); //设置元素div的高度 height()
console.log($('.test').width(50) ); //设置元素div的宽度 width()
})
</script>
</body>
</html>
标签操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script>
// 标签的内容 插入
$('.div3').append('<p>append</p>'); // 该标签的内容后边
$('<p>appendTO</p>').appendTo('.div3'); // 该标签的内容后边 $('.div3').prepend('<p>prepend</p>'); // 该标签的内容前边
$('<p>prependTo</p>').prependTo('.div3'); // 该标签的内容前边 // 外部插入
$('.div3').after('<p>after</p>'); // 在该元素的后边插入
$('<p>insertAfter</p>').insertAfter('.div3'); // 在该元素的后边插入 $('.div3').before('<p>before</p>'); // 在该元素的前边插入
$('<p>insertBefore</p>').insertBefore('.div3'); // 在该元素的前边插入 //替换
$('.div3').replaceWith('<p>replaceWith</p>\'') // 删除
$('.div3').remove(); //清空
$('div').empty(); // 标签还在，但没内容 //复制
$('.div3').clone().appendTo('.div1') // 复制到指定标签下， </script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
background: ;
}
</style>
</head>
<body>
<button>点击事件</button>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$('button').click(function () {
console.log('点击事件');
}) $('button').mouseenter(function () {
console.log('鼠标 划入');
$(this).css('background','blueviolet'); //this, 在函数中是自己，
}) // 键盘事件，
$(document).keydown(function (event) {
console.log(event.keyCode); //打印键盘按键值
})
</script>
</body>
</html>
动画：隐藏 显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background: #131313;
}
</style>
</head>
<body>
<div></div>
<p><button>隐藏</button></p>
<p><button>显示</button></p>
<p><button>切换</button></p> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var $btn = $('button'); // 隐藏 显示
// 隐藏
$btn.first().click(function () {
$('div').hide(3000);
})
// 显示
$btn.eq(1).click(function () {
$('div').show(3000);
})
// 切换
$btn.last().click(function () {
$('div').toggle(3000);
}) // 淡入 淡出，
</script>
</body>
</html>
动画：淡出淡入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background: #131313;
}
</style>
</head>
<body>
<div></div> <p><button>淡出</button></p>
<p><button>淡入</button></p>
<p><button>切换</button></p> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var $btn = $('button'); // 淡出 淡入
// 淡出
$btn.first().click(function () {
$('div').fadeOut(3000);
});
// 淡入
$btn.eq(1).click(function () {
$('div').fadeIn(3000);
});
// 切换
$btn.last().click(function () {
$('div').fadeToggle(3000);
}); // 淡入 淡出，
</script>
</body>
</html>
淡出 淡入2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background: red;
top: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div> <p><button>fadeto</button></p> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var $btn = $('button'); //fadeTo(时间，透明度);
$btn.first().click(function () {
$('div').first().fadeTo(3000,0.2);
$('div').eq(1).fadeTo(3000,0.5);
$('div').last().fadeTo(3000,0.75);
}); </script>
</body>
</html>
动画：滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background: yellow; }
</style>
</head>
<body>
<div>
<h3>标题</h3>
<p>123</p>
<p>456</p>
<p>789</p>
<p>789</p>
</div>
<p><button>slideDown</button></p>
<p><button>slideUp</button></p>
<p><button>切换</button></p> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var $btn = $('button'); $btn.first().click(function () {
$('div').slideDown(3000);
}); $btn.eq(1).click(function () {
$('div').slideUp(3000);
}); $btn.last().click(function () {
$('div').slideToggle(3000);
});
</script>
</body>
</html>
潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式 在 HTML 中写入 写在 的标签里 <script> </script>推荐 放在 </body> 结束之前 <!DOCTYPE html& ...
- 潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- 梯度优化算法总结以及solver及train.prototxt中相关参数解释
参考链接:http://sebastianruder.com/optimizing-gradient-descent/ 如果熟悉英文的话,强烈推荐阅读原文,毕竟翻译过程中因为个人理解有限,可能会有谬误 ...
- UML和模式应用5：细化阶段（2）--细化阶段制品之领域模型
1.前言 领域模型是OO分析中最重要和经典的模型.它阐述了领域中的重要概念: 领域模型作为设计某些软件对象的重要来源,也作为案例研究中探讨的几个制品的输入: 领域模型的范围限定于当前迭代开发的用例场景 ...
- Caching漫谈--关于Cache的几个理论
如今缓存是随处可见了,如果你的程序还没有使用到缓存,那可能是你的程序并发量很低,或对实时性要求很低.我们公司的ERP在显示某些报表时,每次打开都需要花上几分钟的时间,假如搜索引擎也是这么慢,我想这家搜 ...
- springboot系列七：springboot 集成 MyBatis、事物配置及使用、druid 数据源、druid 监控使用
一.MyBatis和druid简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.M ...
- CentOS 6.5环境使用ansible剧本自动化部署Corosync + pacemaker环境及corosync常用配置详解
环境说明: 192.168.8.39 node2.chinasoft.com 192.168.8.42 node4.chinasoft.com 192.168.8.40 ansible管理服务器 19 ...
- python 全栈开发，Day97(Token 认证的来龙去脉,DRF认证,DRF权限,DRF节流)
昨日内容回顾 1. 五个葫芦娃和三行代码 APIView(views.View) 1. 封装了Django的request - request.query_params --> 取URL中的参数 ...
- 步步为营-30-AES加密与解密
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 如何学习 JavaScript？
转自:https://www.zhihu.com/question/21064817 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要 ...
- .NetCore源码阅读笔记系列之Security （四） Authentication & AddJwtBearer
接下来我们在来看下AddJwtBearer,这个与AddOpenIdConnect不太一样,后者是远程发起身份认证请求是一种主动发起式的,多用于web等客户端,验证发生在身份认证服务端,而前者是一种被 ...
- python_cookbook之路：数据结构-解压可迭代对象赋值给多个变量以及扩展的迭代解压语法（*）
1.一一对应: >>> data = [ 'ACME', 50, 91.1, (2012, 12, 21) ] >>> name, shares, price, d ...