潭州课堂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 ...
随机推荐
- k64 datasheet学习笔记4---Memory Map
1.前言 本文主要介绍K64地址空间的映射 2. System Memory Map 3. K64地址映射 4. Armv7m地址映射 4.1 Armv7M.System地址段(0XE0000000~ ...
- C++：UNREFERENCED_PARAMETER用法
原文地址:http://www.cnblogs.com/kex1n/archive/2010/08/05/2286486.html 作用:告诉编译器,已经使用了该变量,不必检测警告! 在VC编译器下, ...
- js使用中的小问题----textarea是否有value属性
使用jquery的选择器时想给textarea设置一个默认值时,采取了下面的方法: 不过失败了,但是看教程上确实成功的,那么肯定是有问题的. 经过上网查找以及自己验证发现: 1.textarea标签确 ...
- 50个常用的sql语句
50个常用的sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,T ...
- 虚拟机Ubuntu 18.04安装RabbitMQ 3.7.9
Windows 10家庭中文版,VirtualBox,Ubuntu 18.04,Rabbitmq 3.7.9,Erlang/OTP 20 [erts-9.2], 在虚拟机上装好了Ubuntu,写了一个 ...
- Python 定值类
1.__str__和__repr__ 如果要把一个类的实例变成 str,就需要实现特殊方法__str__(): class Person(object): def __init__(self, nam ...
- 性能测试二十：环境部署之Tomcat多实例部署+日志监控
一个tomcat性能有限,所以需要部署等多个tomcat 单实例部署与windows下类似,项目包放到webapp目录下,启动bin目录下的startup.sh即可启动命令:./startup.sh启 ...
- 微信公众号开发JS-SDK（1.2）
概述 微信js-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微 ...
- Windows C#入门环境搭建
Windows C#入门环境搭建 1. 安装Microsoft .NET Framework目录: C:\Windows\Microsoft.NET\Framework,查看已经安装的版本. 如果未安 ...
- ERP退货系统管理（四十五）
添加的存储过程:(添加退货申请信息的存储过程) CREATE PROCEDURE [dbo].[BioBackSendGoods_ADD] @SendBackID INT OUTPUT, ), @Ap ...