Day048--jQuery自定义动画和DOM操作
内容回顾
BOM
- location.reload() 全局刷新页面
- location.href
- location.hash
- location.pathname
- location.hostname
- location.origin 源(同源策源(查阅资料))始地址
client,offset,scroll
- document.documentElement.clientWidth 屏幕可视宽度
- offsetTop 到页面顶部的距离
- scrollTop 页面卷起的高度
jQuery核心的思想
write less, do more 写的少 做的多
jQuery的入口函数
//它们 是没有事件覆盖现象
$(document).ready(fn);
$(fn);
//窗口加载
$(window).ready(fn)
为什么要学习jQuery
js的先天性不足
- window.onload()的事件覆盖现象
- 代码容错量大
- 兼容性不好
- 动画效果难以实现
- 代码比较乱
jQuery的98%的都是方法
jQuery的选择器(选中DOM)*
$('')
基本选择器
- id选择器
- 类选择器
- 标签选择器
- 子代
- 后代
- 组合
- 交集
- 通配符
- 兄弟 + ~
基本过滤选择器 + 属性选择器
- $('li:eq(index)')
- :gt(index)
- :lt(index)
- :odd
- :even
- :first
- :last
- input[type='text']
筛选的方法***
- $('li').eq(index)
- find(selector) 后代
- children() 亲儿子
- parent() 亲爹
- siblings() 选取兄弟(除了它自己 )
jQuery和js对象相互转换**
//js==>jquery
$(js对象)
jquery对象 => js对象
$('li')[index];
$('li').get(index);
jQuery的动画
显示隐藏动画
show();
hide(3000,fn);
toggle(3000,fn)
卷帘门效果
slideDown(); //显示
slideUp();//隐藏
slideToggle() //开关式的显示隐藏
淡入淡出效果
fadeIn();//显示
fadeOut();//隐藏
fadeToggle()//开关式的显示隐藏
额外内容
click
css(); //样式属性操作 oDiv.style.xxx
text(); //innerText
html(); //innerHtml
val(); //value
addClass();
removeClass()
今日内容
jQuery的自定义动画
$(selector).animate({css的属性},speed,fn)
要想修改背景颜色,那么要借助与jquery的插件 https://github.com/jquery/jquery-color/blob/master/jquery.color.js
使用动画的时候一定要先stop() 再开启动画,使用定时器的时候 要先清定时器,再开定时器
jQuery的DOM操作
标签属性操作
attr() //getAttrbute() setAttrbute() 路径的相对地址
removeAttr() //removeAttibute()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="./xiaohua.jpg" alt="" >
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
//attr
//获取值
console.log($('img').attr('src')); //./xiaohua.jpg
//设置值
$('img').attr('alt','美女'); //./xiaohua.jpg
//设置多个标签属性值
$('img').attr({
'aaa':'美女',
'bbbb':'个哈哈哈'
});
//移除 removeAttr()
setTimeout(()=>{
//移除单个属性
// $('img').removeAttr('alt');
//移除多个属性
$('img').removeAttr('alt aaa bbbb');
},3000)
})
</script>
</body>
</html>
注意: 不要使用attr()或者prop()来设置类名
对象属性操作
prop() //oDiv.id
removeProp() //oDiv.id = ''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<img src="./xiaohua.jpg" alt="" class="box">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
//获取值
console.log($('img').prop('src'));
$('img').prop('aaaa','美女');
$('img').prop({
'bbb':'哈哈',
'aa':'嘿嘿'
});
//移除 removeProp() 删除一个属性
$('img').removeProp('aa');
$('img').removeProp('bbb');
console.log($('img'));
setTimeout(()=>{
},3000)
})
</script>
</body>
</html>
类的操作
addClass() //添加类
removeClass() //移除
toggleClass() //添加|移除
值的操作
//如果不传参数 表示获取值
//如果传参数,表示设置值
text();// innerText 设置文本的内容
html(); //innerHTML 即设置文本又设置标签
val(); //value
样式属性操作
//如果有一个参数,参数是字符串表示获取值,参数是对象,表示设置多个值
//如果有两个参数,表示设置值
$(selector).css();
操作input中value的值
下拉列表
<select name="timespan" id="timespan" class="Wdate" multiple="multiple" >
<option value ='1' selected>alex</option>
<option value = '2' selected="">wusir</option>
<option value = '3'>wulaoban</option>
</select>
总结:
1.如果option中的属性有value,优先使用value设置
$('#timespan').val(['1','3']);//选中1 和3选项
2.如果没有value,那么使用标签的文本内容设置
$('#timespan').val(['alex','wulaobnan']) //选中1 和 3 选项Day048--jQuery自定义动画和DOM操作的更多相关文章
- Jquery 自定义动画同步进行如何实现？
需求描述:我需要对不懂的两个HTML对象进行操作,同时开始动画,同时结束动画. 遇到问题:如果先后对连个对象进行 animate动画,那么第一个会先运行,等第一个运行完了运行第二个,这样就不同步了. ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- jQuery基础知识点（DOM操作）
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- 深入学习jQuery自定义动画
× 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...
- jQuery 自定义动画效果
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- jquery学习：选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jQuery（3）——DOM操作
---恢复内容开始--- jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
随机推荐
- PSP总结报告
此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2556] 回顾0 alpha阶段前 团队名称:可以低头,但没必要 团队项 ...
- 搭建MHA时 yum 安装perl模块提示 baseurl 错误
今天在搭建MySQL MHA 安装MHA node所需的perl模块(DBD:mysql)时遇到了一个小的错误,如果思路不对的话,还是产生不少麻烦. 现梳理记录下来. 问题现象 执行的命令 yum ...
- MVC文件的上传、删除
public ActionResult FileUpload() { Users users = new Users(); users = ( ...
- sqlserver数据库触发器调用外部exe
sqlserver数据库触发器调用外部exe,同事可以选择参入参数! sqlserver使用 master..xp_cmdshell 进行外部exe的执行. 使用master..xp_cmdshell ...
- 启动期间的内存管理之build_zonelists初始化备用内存域列表zonelists--Linux内存管理(十三)
1. 今日内容(第二阶段(二)–初始化备用内存域列表zonelists) 我们之前讲了在memblock完成之后, 内存初始化开始进入第二阶段, 第二阶段是一个漫长的过程, 它执行了一系列复杂的操作, ...
- Nginx反向代理实现IP访问分流
通过Nginx做反向代理来实现分流,以减轻服务器的负载和压力是比较常见的一种服务器部署架构.本文将分享一个如何根据来路IP来进行分流的方法. 根据特定IP来实现分流 将IP地址的最后一段最后一位为0或 ...
- LeetCode算法题-Set Mismatch（Java实现）
这是悦乐书的第279次更新,第295篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第147题(顺位题号是645).集合S最初包含从1到n的数字. 但不幸的是,由于数据错误 ...
- LeetCode算法题-Minimum Absolute Difference in BST（Java实现）
这是悦乐书的第253次更新,第266篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第120题(顺位题号是530).给定具有非负值的二叉搜索树,找到任意两个节点的值之间的最 ...
- LeetCode算法题-Poor Pigs（Java实现）
这是悦乐书的第235次更新,第248篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第102题(顺位题号是455).有1000个水桶,其中只有一个水桶含有毒药,其余的都没毒 ...
- kernel笔记——网络收发包流程
本文将介绍网络连接建立的过程.收发包流程,以及其中应用层.tcp层.ip层.设备层和驱动层各层发挥的作用. 应用层 对于使用socket进行网络连接的服务器端程序,我们会先调用socket函数创建一个 ...