前端之JQuery：JQuery文档操作-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

前端之JQuery：JQuery文档操作

阅读量：4691 次

发布时间：2019-06-09

本文共 6138 字，大约阅读时间需要 20 分钟。

一、相关知识点总结 1、CSS     .css()       - .css("color")  -> 获取color css值       - .css("color", "#ff0000") -> 设置值       - .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值       - .css(["color", "border"])  -> 获取多个值    .offset        - 获取相对位置        - 比较的对象是html (窗口)    .position         - 获取相对已经定位的父标签的位置         - 比较的是最近的那个做过定位的祖先标签    .scrollTop([val])       - 返回顶部的例子    .scrollLeft([val])    尺寸：     height([val|fn])       - 元素的高度    width([val|fn])        - 元素的宽度    innerHeight()       - 带padding的高度    innerWidth()        - 带padding的宽度    outerHeight([soptions])       - 在innerHeight的基础上再加border的高度    outerWidth([options])        - 在innerHeight的基础上再加border的高度 2、文档操作 内部插入     A.append(B)       吧B添加到A的后面     A.appendTo(B)     吧A添加到B的后面     A.prepend(B)      吧B添加到A的前面     A.prependTo(B)    吧A添加到B的前面 外部插入     A.after(B)        吧B添加到A的后面     A.insertAfter(B)  吧A添加到B的后面     A.before(B)       吧B添加到A的前面     A.insertBefore(B) 吧A添加到B的前面     包裹     wrap(html|ele|fn)       A.wrap(B)  --> B包A    unwrap()   不抱       - 不要加参数    wrapAll(html|ele)  都包(作为整体包)，只包你选中的那个    wrapInner(html|ele|fn)  里面包     替换     replaceWith(content|fn)       A.replaceWith(B)  --> B替换A    replaceAll(selector)       A.replaceAll(B)   --> A替换B     删除     empty()       - 清空 内部清空    remove([expr])       - 删除 整体都删除    detach([expr])       - 剪切  多保存在变量中，方便再次使用     克隆/复制     clone([Even[,deepEven]]) 3、动画 基本    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属性值都可以设置     - 图片变小（漏气） 4. 事件处理    之前绑定事件的方式：       1. οnclick=clickMe();  function clickMe() {}       2. ele.onclick = function(){}       3. ele.addEventListener("click", function(){})  js事件委派    jQuery绑定事件的方式：       1. $(ele).on("click", function(){})       2. $("tbody").delegate(".btn-warning", "click", function(){})  这个3.几的版本没有这个方法了，这是3.几以前版本有的方法       3. $("tbody").on("click",".btn-warning",function(){})  jQuery的事件委派 二、图片详述 （1）offset 和 postion

（2）innerwrap 和 wrap 和 warpAll

（3）克隆

（4）empty 和 remove

（5）牛逼的操作

（6）取消Bootstrap默认提示

三、具体代码实现

1、返回首页

1   2   3   4     
         5     返回首页  6   7  21  22  23 
       
        1
       
 24 
       
        2
       
 25 
       
        3
       
 26 
       
        4
       
 27 
       
        5
       
 28 
       
        6
       
 29 
       
        7
       
 30 
       
        8
       
 31 
       
        9
       
 32 
       
        10
       
 33 
       
        11
       
 34 
       
        12
       
 35 
       
        13
       
 36 
       
        14
       
 37 
       
        15
       
 38 
       
        16
       
 39 
       
        17
       
 40 
       
        18
       
 41 
       
        19
       
 42 
       
        20
       
 43 
       
        21
       
 44 
       
        22
       
 45 
       
        23
       
 46 
       
        24
       
 47 
       
        25
       
 48 
       
        26
       
 49 
       
        27
       
 50 
       
        28
       
 51 
       
        29
       
 52 
       
        30
       
 53 
       
        31
       
 54 
       
        32
       
 55 
       
        33
       
 56 
       
        34
       
 57 
       
        35
       
 58 
       
        36
       
 59 
       
        37
       
 60 
       
        38
       
 61 
       
        39
       
 62 
       
        40
       
 63 
       
        41
       
 64 
       
        42
       
 65 
       
        43
       
 66 
       
        44
       
 67 
       
        45
       
 68 
       
        46
       
 69 
       
        47
       
 70 
       
        48
       
 71 
       
        49
       
 72 
       
        50
       
 73 
       
        51
       
 74 
       
        52
       
 75 
       
        53
       
 76 
       
        54
       
 77 
       
        55
       
 78 
       
        56
       
 79 
       
        57
       
 80 
       
        58
       
 81 
       
        59
       
 82 
       
        60
       
 83 
       
        61
       
 84 
       
        62
       
 85 
       
        63
       
 86 
       
        64
       
 87 
       
        65
       
 88 
       
        66
       
 89 
       
        67
       
 90 
       
        68
       
 91 
       
        69
       
 92 
       
        70
       
 93 
       
        71
       
 94 
       
        72
       
 95 
       
        73
       
 96 
       
        74
       
 97 
       
        75
       
 98 
       
        76
       
 99 
       
        77
       
100 
       
        78
       
101 
       
        79
       
102 
       
        80
       
103 
       
        81
       
104 
       
        82
       
105 
       
        83
       
106 
       
        84
       
107 
       
        85
       
108 
       
        86
       
109 
       
        87
       
110 
       
        88
       
111 
       
        89
       
112 
       
        90
       
113 
       
        91
       
114 
       
        92
       
115 
       
        93
       
116 
       
        94
       
117 
       
        95
       
118 
       
        96
       
119 
       
        97
       
120 
       
        98
       
121 
       
        99
       
122 
       
        100
       
123 124 125 126 142 143

返回首页示例

2、查看尺寸

1  2  3  4     
        5     尺寸 6     13 14 15 
       
16 17 42 43

尺寸测试

3、CSS示例

1  2  3  4     
        5     css示例 6  7 26 27 
       
        你好那？
       
28 
       
        哎呦歪
       
29 
       
        30     
        
31 
       
32 33 34 49 50 51 52 CSS相关操作

CSS相关操作

4、文档操作

1 2 3 4

5 文档操作 6 7

111

222

333

444

13

苍茫的大海是我的哎

14

第一章

第二章

第三章

第四章

20 21 22 83 84

View Code

5、克隆（复制）

1  2  3  4     
        5     克隆 6  7  8  9 10 15 16

克隆（clone）

6、动画效果

1  2  3  4     
        5     动画 6     11 12 13 14 15 16 17 18 19 20 21 65 66

动画效果

转载于:https://www.cnblogs.com/Ebola-/p/8569884.html

你可能感兴趣的文章

[CF]Equalize Them All

React Ant design table表单与pagination分页配置

重大发现： windows下C++ UI库 UI神器-SOUI(转载)

linux 压缩文件的命令总结

linux tail 命令详解

BZOJ-3207 花神的嘲讽计划Ⅰ

BZOJ-1069 [SCOI2007]最大土地面积

进程与线程的一个简单解释【摘】

COJ976 WZJ的数据结构（负二十四）

slid.es – 创建在线幻灯片和演示文稿的最佳途径

2016年6月份那些最实用的 jQuery 插件专辑

如何在数据库中使用索引

windows虚拟机下安装docker 踩过的坑

使用 CXF 做 webservice 简单例子

2017-2018-1 20155339 《信息安全系统设计基础》第8周学习总结

socket.io 消息发送

C# 两个datatable中的数据快速比较返回交集或差集

关于oracle样例数据库emp、dept、salgrade的mysql脚本复杂查询分析

一些有趣的代码

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-10-23 03:27:38 当前IP: 3.144.16.71 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我