jquery进阶

Posted 2020-10-14 Sober--

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery进阶相关的知识，希望对你有一定的参考价值。

今天我们接着来学习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>

View Code

执行的操作：

$(‘#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(3000, 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进阶的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

Atom编辑器入门到精通 Atom使用进阶

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）