jquery进阶(1)
今天我们接着来学习jQuery中的内容，包括css的操作、尺寸的操作、文档的操作、动画（有待补充），事件处理操作。
一、CSS
在css中可以设置css的基本属性
- .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
- .css(["color", "border"]) -> 获取多个值
offset([coordinates])
概述：
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
参数：
规定以像素计的 top 和 left 坐标。
- 值对，比如 {top:100,left:0}
- 带有 top 和 left 属性的对象
无参数描述:
获取第二段的偏移
html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果：
<p>Hello</p><p>left: 0, top: 35</p>
有参数描述:
获取第二段的偏移
html代码：
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });
position()
概述：
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
注：
- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签
scrollTop([val])
- 返回顶部
scrollLeft([val])
其中val设置的是水平滚动条的值
二、尺寸
height([val|fn])
- 元素的高度
width([val|fn])
innerHeight()
- 带padding的高度
innerWidth()
outerHeight([soptions])
- 在innerHeight的基础上再加border的高度
outerWidth([options])
jQuery代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尺寸</title>
<style>
.c1 {
height: 100px;
width: 80px;
background-color: red;
}
</style>
</head>
<body> <div id="d1" class="c1"></div> <script src="jquery-3.2.1.js"></script>
</body>
</html>
执行的操作：
$('#d1').height()
$('#d1').width()
$('#d1').innerHeight()
$('#d1').css('padding',20px)
$('#d1').css('boder','2px solid #336699')
$('#d1').outerHeight()
三、文档的操作
1.内部插入
在内部插入包括append和prevend
append（content|fn）
appendTo(content) A.append(B)
---把B添加到A的后面
A.appendTo(B)
---把A添加到B的后面 prevend(content|fn)
prevend(contend) A.prevend(B)
---把B添加到A的前面
A.prevendTo(B)
---把A添加到B的前面
2.外部插入
在外部插入包括after和before
after(content|fn) --> 往后加
insertAfter(content) A.after(B)
---把B添加到A的后面
A.insertAfter(B)
---把A添加到B的后面 before(content|fn) --> 往前加
insertBefore(content) A.before(B)
---把B添加到A的前面
A.insertBefore(B)
---把A添加到B的前面
3.包裹
包裹(把所有匹配的元素用其他元素的结构化标记包裹起来。)
wrap(html|ele|fn)
A.wrap(B) --> B包A
unwrap()
- 不要加参数 wrapAll(html|ele)
--将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele|fn)
--将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
4.替换
replaceWith(content|fn)
A.replaceWith(B) --> B替换A replaceAll(selector)
A.replaceAll(B) --> A替换B
5.删除
empty()
- 清空 内部清空
remove([expr])
- 删除 整体都删除
detach([expr])
- 剪切 多保存在变量中，方便再次使用
6.复制
clone([Even[,deepEven]]) 例：
创建一个按钮，他可以复制自己，并且他的副本也有同样功能。 html代码：
<button>Clone Me!</button> jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
四、 动画
基本
show([s,[e],[fn]]) 图片的显示
hide([s,[e],[fn]]) 图片的隐藏
toggle([s],[e],[fn]) 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn]) 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(, function () {
alert("真没用3");
}); 自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
五、事件处理
之前绑定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){}) jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){})
3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
jquery进阶(1)的更多相关文章
- jquery 进阶
1.0 jquery的ajax同步和异步区别 2.0 cdnjquery加载失败加载本地 <script type="text/javascript" src="/ ...
- python 学习笔记十三 JQuery(进阶篇)
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 安装jQuery 有两个版本的 jQuery 可供下载: Production versio ...
- Web开发——jQuery进阶
参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...
- jquery 进阶 bootstrap
. 样式操作 . 操作class . 操作CSS属性的 .css("color") .css("color", "green") .css( ...
- jQuery进阶第三天（2019 10.12）
一.原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位) clientWidth/clientHeight =====> 获得元素content+padding的宽/高: offse ...
- jQuery进阶
复习: jq无论如何都是一个集合 jq是一个包装集 var arr=$("div").get( )会将所有的DOM对象转换成真正的数组, get( )里边没传参数 兄弟元素: 只要 ...
- jQuery进阶第四天（2019 10.13）
1 初识面向对象(面向对象是一种思维方式) 以前写的代码 var name = '莉莉'; var sex = '女'; var age = 18; var name1 = '小明'; var sex ...
- jQuery进阶第二天（2019 10.10）
一.事件流程 1.事件的三要素: 事件源:发生事件的对象 事件类型:类型比如单击.双击.鼠标的移入.移除 事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...
- Jquery基础知识
//使用$操作得到的对象,都是Jquery对象 如何把Jquery对象转换成dom对象?$abc 方法1:var div = $div.get(0) 方法2:var div = $div[0] 如何把 ...
随机推荐
- 写一个c程序辨别系统是16位or32位
方法: 32位处理器就是一次只能处理32位,也就是4个字节的数据,虚拟地址空间的最大大小是4G,而64位处理一次就能处理64位,即8个字节的数据,最大虚拟地址空间的最大大小是16T.最明显的是指针大小 ...
- 选择炸了（JIRA）的88个
作者:Martin Seibert SEIBERT MEDIA 首席执行官. 原文地址:http://seibert.biz/jirareasons 作者Martin Seibert 是德国互联网代理 ...
- 【总结整理】JQuery基础学习---DOM篇
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...
- 利用Admin-LTE项目搭建自己前端的开发框架模板
1 完整版本 1.1 下载admin-lte项目源代码 github下载地址:点击前往 三少云盘地址:点击前往 1.2 查看admin-lte精简主页源代码 页面地址:点击前往 注意:由源代码可以知道 ...
- error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法
error C2872: "flann": 不明确的符号 - PCL 与OpenCV2命名空间冲突问题的解决方法 error C2872: "flann" 如果 ...
- 9、par画图参数
转载:http://blog.sina.com.cn/s/blog_8f5b2a2e0102v0tf.html 1. 函数par()的使用格式如下: par(..., no.readonly = FA ...
- Mathematics Base - 期望、方差、协方差、相关系数总结
参考:<深度学习500问> 期望 在概率论和统计学中,数学期望(或均值,亦简称期望)是试验中每次可能结果的概率乘以其结果的总和.它反映随机变量平均取值的大小. 线性运算: \(E(ax+ ...
- CodeForces 114B 【STL应用】
思路: 原来string类能sort 和 swap....太强了.... 注意:字典序最小输出,因为某个地方写挫了,sort了n发,代码挫. #include <bits/stdc++.h> ...
- AOP常用注解
1.@Aspect 配置切面Bean,和<bean.../>元素进行配置无区别,一样支持依赖注入来配置属性值: 如果启动了Spring的"零配置"特性,一样可以让Spr ...
- JNI/NDK开发
公司的新需求终于解决完了,离测试和发布还有段时间,第一次体验了下没需求没bug的感觉,真是舒爽~然后翻了翻有什么可以学的.无意翻到了Android后期发展的五大趋势.一.性能优化.二.高级UI.三.J ...