潭州课堂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 ...
随机推荐
- SCons: 替代 make 和 makefile 及 javac 的极好用的c、c++、java 构建工具
http://scons.org/ https://www.ibm.com/developerworks/cn/linux/l-cn-scons/index.html 后附:另外,WAF是一个基于sc ...
- 【转】深入浅出JMS（三）--ActiveMQ简单的HelloWorld实例
这篇博文,我们使用ActiveMQ为大家实现一种点对点的消息模型.如果你对点对点模型的认识较浅,可以看一下第一篇博文的介绍. JMS其实并没有想象的那么高大上,看完这篇博文之后,你就知道什么叫简单,下 ...
- maven项目提示web.xml is missing或红色感叹号
1.web.xml is missing and <failOnMissingWebXml> is set to true 提示信息应该能看懂.也就是缺少了web.xml文件,<fa ...
- nginx报错：403 Forbidden 并且访问首页index.php是下载文件的状态
nginx报错:403 Forbidden 并且访问首页index.php是下载文件的状态,不能正常解析php 系统有其他两个站访问是正常的 看日志没有看到明显的错误 搜索了下: 答案如下: php的 ...
- 转载：磁盘目录（1.3.3）《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19614.html 要使用Nginx,还需要在Linux文件系统上准备以下目录. (1)Nginx源代码存放目录 该目录用于放置从官网 ...
- expdp和impdp快速导出导入，不用创建虚拟目录
expdp 和impdp不用创建虚拟目录:在cmd直接 expdp 用户名/密码 回车 就导出了,(如果提示输入用户名和密码就输入).再将导出的文件放在oracle默认的dpdump文件夹里面,然 ...
- 恋爱Linux(Fedora20)1——安装开启ssh服务
1) 安装openssh-server # yum install openssh-server 2) 查看是否已成功安装openssh-server # rpm -qa | grep openssh ...
- 服务端工程师入门与进阶 Java 版
前言 欢迎加入我们.这是一份针对实习生/毕业生的服务端开发入门与进阶指南.遇到问题及时问你的 mentor 或者直接问我. 建议: 尽量用google查找技术资料. 有问题在stackoverflow ...
- django----对model查询扩展
基于对象关联查询 一对多查询(Book--Publish): 正向查询,按字段: (从关联的表中查询) book_obj.publish : 与这本书关联的出版社对象 book_obj.publish ...
- POJ 2377 Bad Cowtractors (Kruskal)
题意:给出一个图,求出其中的最大生成树= =如果无法产生树,输出-1. 思路:将边权降序再Kruskal,再检查一下是否只有一棵树即可,即根节点只有一个 #include <cstdio> ...