day56 Pyhton 前端Jquery08
前端
内容回顾:
-BOM
-jquery介绍
-jquery下载和引入方式
npm install jquery
-jquery的选择器
-基本选择器
-通配符选择器
- id选择器
- 类选择器
- 标签选择器
- 高级选择器
- 后代 空格表示
-子代 >
- 毗邻兄弟 +
- 兄弟 ~
- 组合选择器 div,p,a
- 交集选择器 div,active
- 属性选择器 $('input[type="text"]')
- jquery的动画效果
- 普通动画
先要停掉动画 stop()
- show(3000,fn)
- hide()
- toggle(3000,fn)
- 卷帘门效果
- slideDown()
- slideUp()
- slideToggle()
- 淡入淡出
- fadeIn()
- fadeOut()
- fadeToggle()
- jquery和js对象转换
js===>jquery
$(jsDOM对象)
jquery==>jsDOM对象
$('div')[0]
$('div').get(0)
今日内容:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style> li:nth-child(3){
background: deeppink;
}
</style> </head>
<body> <ul>
<li class="item1">alex</li>
<li class="item1">得劲</li>
<li class="item1">裤架为</li>
<li class="item1">王家辉</li>
</ul>
<input type="text">
<input type="radio" checked name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<select name="" id="">
<option value="smoke" >抽烟</option>
<option value="drink">喝酒</option>
<option value="tangtou" selected>烫头</option>
<option value="koufoot">抠脚</option>
</select> <button>提交</button> <script> //ajax
//筛选选择器
$('ul li:eq(3)').css('color','yellow');//eq从0开始选择
$('ul li:first').css('color','red');
$('ul li:last').css('color','red');
$('ul li:nth-child(4)').css('background','yellow');//从1开始选择 // console.log($('input[type=radio]:checked'));
// console.log($('select option:selected').text()); $('button').click(function () {
console.log($('input[type=radio]:checked'));
})
</script>
</body>
-补充选择器(筛选选择器,筛选的方法)
-筛选选择器
-eq() 获取匹配的元素 索引从0开始
-first()
-last()
-属性选择器$('ul li:nth-child(4)')
-$('input [type=radio]:checked') 获取选中的单选的元素
-$('select option:selected').text() 获取下拉框被选中的元素
<body>
<ul>
<li class="item1">
<a href="javascript:void(0);">alex</a>
<ol>
<li>小茹</li>
</ol>
</li>
<li class="item2">
<p class="active">得劲</p>
</li>
<li class="item3">裤架为</li>
<li class="item4">王家辉</li>
</ul>
<script>
//find(selector)
console.log($('ul').find('li.item1 a').css('color','red'))
//链式编程
$('ul').find('li.item1 a').css('color','red').click(function () {
//html() 如果没有参数，表示获取值，如果有一个参数，表示设置值
alert($(this).html());
console.log($(this).html('黄文泰'));
$(this).html('黄文泰').css({'color':'yellow'})
});
console.log($('ul').find('*'));
//获取的是亲儿子们
console.log($('ul').children());
// $('ul li:eq(3)')
console.log($('ul li').eq(3))
//获取的是亲爹爹
console.log( $('p.active').parent())
console.log( $('.item1').siblings('.item2'));
</script>
- 筛选的方法
- $('ul').find('li.active') 查找后代（儿子和孙子。。。。）元素
- children() 查找亲儿子
- eq() 获取指定的元素 索引从0 开始
- parent() 获取亲爹
- siblings() 选取兄弟（除它本身之外）
<script src="jquery.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
} div.box{
width: 600px;
height: 600px; }
ul{
overflow: hidden;
}
ul li {
float: left;
width: 194px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: red;
border: 1px solid darkgoldenrod;
font-size: 18px;
color: #fff;
font-weight: 700;
}
ul li a{
display: block;
width: 194px;
height: 80px;
text-decoration: none;
color: #fff; }
ul li a.active{
background-color: green;
} div.box p{
width: 594px;
height: 300px;
line-height: 300px;
text-align: center;
color: #fff;
font-weight: bolder;
background-color: darkred;
display: none;
}
div.box p.active{
display: block;
} </style> </head>
<body>
<div class="box">
<ul>
<li>
<a href="javascript:void(0)">新闻</a>
</li>
<li>
<a href="javascript:void(0);">音乐</a>
</li>
<li>
<a href="javascript:void(0);">体育</a>
</li>
</ul>
<p>新闻</p>
<p>音乐</p>
<p>体育</p>
</div> <script>
$('ul li a').click(function () {
$(this).addClass('active').parent().siblings('li').find('a').removeClass('active');
let index = $(this).parent().index();
console.log(index);
$('.box p').eq(index).addClass('active').siblings('p').removeClass('active');
})
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
} div.box{
width: 600px;
height: 600px; }
ul{
overflow: hidden;
}
ul li {
float: left;
width: 194px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: red;
border: 1px solid darkgoldenrod;
font-size: 18px;
color: #fff;
font-weight: 700;
}
/*ul li {*/
/*display: block;*/
/*width: 194px;*/
/*height: 80px;*/
/*text-decoration: none;*/
/*color: #fff;*/ /*}*/
ul li.active{
background-color: green;
} div.box p{
width: 594px;
height: 300px;
line-height: 300px;
text-align: center;
color: #fff;
font-weight: bolder;
background-color: darkred;
display: none;
}
div.box p.active{
display: block;
} </style> </head>
<body>
<div class="box">
<ul>
<li>新闻</li>
<li>音乐</li>
<li>体育</li>
</ul>
<p>新闻</p>
<p>音乐</p>
<p>体育</p>
</div> <script> $('ul li').click(function () {
console.log($(this).addClass('active')); $(this).addClass('active').siblings('li').removeClass('active'); let index = $(this).index();
$('.box p').eq(index).addClass('active').siblings('p').removeClass('active');
}) </script> </body>
</html>
- jquery自定义动画
- animate({动画队列属性},时间,fn)
.box{
width: 200px;
height: 200px;
background-color:red;
color: #fff;
position: absolute;
top: 30px;
left: 0;
line-height:200px;
text-align: center;
}
</style>
</head>
<body>
<button>动画</button>
<div class="box">得劲</div>
<script>
//动画 在3秒时间 宽高 400px 变成圆，color:green
$('button').click(function () {
let animate1 = {
"width":'400',
"height":"400",
"border-radius":'200',
"top":"400",
"left":"600",
}
// animate() 自定义动画
$('.box').animate(animate1,3000,function () {
$(this).hide();
})
})
</script>
音频
<audio src="./Beyond%20-%20情人.mp3" controls></audio>
- jquery的DOM操作
- 样式操作
- .css()
- 对象属性操作
# 如果有一个参数，表示获取值，两个参数，设置值
prop()
# 移除单个值或者多个值，多个值用空格隔开
removeProp()
- 标签属性操作
# 如果有一个参数，表示获取值，两个参数，设置值
attr()
# 移除单个值或者多个值，多个值用空格隔开
removeAttr()
- 类操作
- addClass('active xxx bbb ccc')
- removeClass('active xxx')
- toggleClass()
- 值的操作
# 如果没有参数，表示获取值，如果有一个参数，表示设置值
- text()
- html()
- val()
<style>
.box{
width: 200px;
height: 200px;
background-color:red;
color: #fff;
position: absolute;
top: 30px;
left: 0;
line-height:200px;
text-align: center; }
div.hide{
display: none;
} </style> </head>
<body>
<button>隐藏</button>
<div class="box hide">得劲</div>
<script> $('button').click(function () { $('.box').addClass('hide');
// $('.box').removeClass('aa bb cc');
// $('.box').toggleClass('hide');
})
</script>
</body> <body> <div class="box"> </div>
<input type="text" value="家辉">
<script> // console.log($('.box').text());
// $('.box').text('得劲'); console.log($('.box').html());
$('.box').html('<h2>得劲</h2>'); console.log($('input[type=text]').val());
$('input[type=text]').val('哈哈哈') </script>
</body>
<body>
<audio src="Beyond%20-%20情人.mp3" controls id="21" class="" title=""></audio> <input type="radio" checked>男 <a href="">百度一下</a> <script>
console.log($('audio'));
console.log($('audio').prop('src'));
console.log($('audio').prop('id','mp3')); console.log($('input').prop('checked'));
console.log($('input').attr('checked'));
$('a').attr('href','http://www.baidu.com');
$('a').prop('href','http://www.baiduxxx.com');
$('a').attr('title','http://www.baidu.com'); $('a').removeAttr('href title'); console.log($('a')) </script>
day56 Pyhton 前端Jquery08的更多相关文章
- day50 Pyhton 前端01
文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅 ...
- day57 Pyhton 前端Jquery09
内容回顾: - 筛选选择器 $('li:eq(1)') 查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find() 查找后代的元素 - ...
- day55 Pyhton 前端Jquery07
昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...
- day54 Pyhton 前端JS06
内容回顾 - ECMAScript5.0 基础语法 - var 声明变量 - 五种基本数据类型 - string - number NaN number 1 number - boolean - un ...
- day54 Pyhton 前端JS05
今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...
- day53 Pyhton 前端04
内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...
- day52 Pyhton 前端03
内容回顾 块级标签: div p h 列表:ol;ul;dl 表格:table 行内标签: span a i/em b/strong u/del 行内块: input textarea img 其他: ...
- day51 Pyhton 前端02
内容回顾: 1.h1~h6:加粗,数字越大级别越小,自动换行 2.br:换行;hr:分割线; (特殊符号,空格) 3.p:与前边和后边内容之间有间距 4.a标签的href:本地文件连接;网络连接;锚链 ...
- 最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...
随机推荐
- 提高SSH服务安全，ssh黑白名单
1.调整sshd服务配置,并重载服务 # vim /etc/ssh/sshd_config PermitRootLogin no #禁止root用户登录 Use ...
- 为什么互联网巨头们纷纷使用Git而放弃SVN？（内含Git核心命令与原理总结）
写在前面 最近发现很多小伙伴对于工作中的一些基本工具的使用还不是很了解,比如:Git这个分布式的代码管理仓库,很多小伙伴就不是很了解,或者说不是很熟悉.甚至有些小伙伴都没听说过Git,就只会用个SVN ...
- VSM
好吧,在被这个算法折腾了许多天之后,我终于对它竖起了中指.这几天的经历让我明白了一个道理:对于数学基础不好的人来说,对待图形学最好远观不可亵玩焉:如果坚持硬闯却又碰巧E文不咋地,那受罪程度真叫人生不如 ...
- [程序员代码面试指南]递归和动态规划-机器人达到指定位置方法数(一维DP待做)（DP）
题目描述 一行N个位置1到N,机器人初始位置M,机器人可以往左/右走(只能在位置范围内),规定机器人必须走K步,最终到位置P.输入这四个参数,输出机器人可以走的方法数. 解题思路 DP 方法一:时间复 ...
- express 4.0 connect-mongo 运行时报错的解决方法
如果使用的是express 4.0,且入口文件app.js的模板引入和中间件配置如下 如果你的package.json文件中有以下版本信息 报出的错误如下所示 或者 那么只需修改app.js中 ...
- EAM在不同行业的应用
EAM在不同行业的应用 EAM从出现至今,已让很多资产密集型企业受益,甚至在一些行业领域里已经是公认的.不可或缺的管理方案,比如电力行业.轨道交通行业等.但由于不同行业或者企业业务类型不同,导致了资产 ...
- 20行代码实现，使用Tarjan算法求解强连通分量
今天是算法数据结构专题的第36篇文章,我们一起来继续聊聊强连通分量分解的算法. 在上一篇文章当中我们分享了强连通分量分解的一个经典算法Kosaraju算法,它的核心原理是通过将图翻转,以及两次递归来实 ...
- Linux系统编程—信号量
大家知道,互斥锁可以用于线程间同步,但是,每次只能有一个线程抢到互斥锁,这样限制了程序的并发行.如果我们希望允许多个线程同时访问同一个资源,那么使用互斥锁是没有办法实现的,只能互斥锁会将整个共享资源锁 ...
- Java Web学习（八）RESTful设计
一.RESTful设计风格 REST :指的是一组架构约束条件和原则. RESTful :满足这些约束条件和原则的应用程序或设计就是 . REST 原则 客户端和服务器之间的交互在请求之间是无状态的. ...
- 虚拟机系列 | JVM运行时数据区
本文源码:GitHub·点这里 || GitEE·点这里 一.内存与线程 1.内存结构 内存是计算机的重要部件之一,它是外存与CPU进行沟通的桥梁,计算机中所有程序的运行都在内存中进行,内存性能的强弱 ...