潭州课堂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 ...
随机推荐
- classfication中使用图像金字塔和sliding windows提高准确率
之前对imagenet的预训模型进行finetune,找出了很多样本选择时的注意事项,当时在测试如下这张照片时,效果不好,我认为是物体过小造成的,因此尝试使用图像金字塔的方法: 当时结果如下: 一开始 ...
- lxde 的安装和卸载以及注意事项，lubuntu
安装: $ sudo apt install lxde $ sudo apt install lxde-common 安装完毕后,可能没法关机及logout,可以使用如下安装: $ sudo apt ...
- mysql安装与卸载（非绿色版）
一.安装和卸载 Mysql安装路径: C:\Program Files\MySQL\MySQL Server 5.5\ Mysql数据文件存放的路径: C:\Documents and Setting ...
- Vue.js——component(组件)
概念: 组件(Component)是自定义元素. 作用: 可以扩展HTML元素,封装可重用的代码. <div id="myView"> <!-- 把学生的数据循环 ...
- centos6.7环境下kvm虚拟机之virt-install和virsh及virt-manager工具的使用
virt-install工具的使用: virt-install是一个命令行工具,它能够为KVM.Xen或其它支持libvrit API的hypervisor创建虚拟机并完成GuestOS安装:此外,它 ...
- OneNET麒麟座应用开发之一：初识OneNET麒麟座
今天收到了OneNET麒麟座开发板.能得到使用的机会只能说是幸运的.首先上一张靓照: 板子使用的MCU是STM32F103RET6,带有GSM摸块和Wifi摸块可以联网.带有显示屏接口和I2C接口以及 ...
- js数值进制互转
十进制转换为二进制: var num = 100; console.log(num.toString(2)); toString()方法可把一个 Number 对象转换为一个字符串,并返回结果. 语法 ...
- 【linux】16进制格式查看命令hexdump
test.txt内容 asdfsg ewtwfsdf1Hello World! hexdump -Cv test.txt 输出 |asdfsg ewtwfsdf1| 6c 6c 6f 6f 6c ...
- poj1015 01二维背包
/* 给定辩控双方给每个人的打分p[i],d[i], dp[j][k]表示前i个人有j个被选定,选定的人的辩控双方打分差之和是k,此状态下的最大辩控双方和 按01背包做,体积一维是1,体积二维是辩控双 ...
- Slave SQL_THREAD如何重放Relay log
复制的介绍: 根据日志定义的模式不一样,可以分为:Statement(SBR)模式,Row(RBR)格式或者是MIXED格式,记录最小的单位是一个Event,binlog日志前4个字节是一个magic ...