潭州课堂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 ...
随机推荐
- 编码器AE & VAE
学习总结于国立台湾大学 :李宏毅老师 自编码器 AE (Auto-encoder) & 变分自动编码器VAE(Variational Auto-encoder) ...
- ARMV8 datasheet学习笔记3：AArch64应用级体系结构之Memory order
1.前言 2.基本概念 Observer 可以发起对memory read/write访问的都是observer; Observability 是一种观察能力,通过read可以感知到别的observe ...
- How to Repair GRUB2 When Ubuntu Won’t Boot
Ubuntu and many other Linux distributions use the GRUB2 boot loader. If GRUB2 breaks—for example, if ...
- MySQL5.7更改用户名密码
更改用户名密码,官方推荐使用alter ALTER USER test@'%' IDENTIFIED BY '; 还有一种 update mysql.user set authentication_s ...
- client模式下对应接口加入桥接出错
client模式下,响应的接口wlan0 加入桥接时出现如下错误: root@root:~# brctl addif br-lan wlan0brctl: bridge br-lan: Operati ...
- 使用FreeSWITCH做电话自动回访设置
一.背景介绍: 目前公司在处理客户回访方面,需要人工进行电话回访,尤其是逢年过节的时候,电话问候更能体现服务的品质: 在某些公司,电话销售员需要给大批量的陌生用户打电话,如果能过滤掉不关心的用户,销售 ...
- discuz3.4：在Centos6.5中安装过程
参考文章:https://www.cnblogs.com/hehongbin/articles/5741270.html https://www.cnblogs.com/mitang/p/552454 ...
- python flask安装
windows环境上,打开命令行,输入pip list 检查列表中是否安装过flask 安装flask命令:pip install flask 出现Successfully installed等提 ...
- PHP共享内存详解
前言 在PHP中有这么一族函数,他们是对UNIX的V IPC函数族的包装. 它们很少被人们用到,但是它们却很强大.巧妙的运用它们,可以让你事倍功半. 它们包括: 信号量(Semaphores) 共享内 ...
- 用Kotlin破解Android版微信小游戏-跳一跳
前言 微信又更新了,从更新日志上来看,似乎只是一次不痛不痒的小更新.不过,很快就有人发现,原来微信这次搞了个大动作——在小程序里加入了小游戏.今天也是朋友圈被刷爆的缘故. 看到网上 有人弄了一个破解版 ...