web前端【第十二篇】jQuery文档相关操作

一、相关知识点总结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. onclick=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、返回首页

返回首页示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回首页</title>
</head>
<style>
    .c1{
        height: 100px;
    }
    button{
        position: fixed;
        right: 15px;
        bottom: 15px;
        background-color: #336699;
    }
    .hide{
        display: none;
    }
</style>

<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
<button class="hide">返回顶部</button>
<button class="cc hide">返回底部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(":button").on("click",function () {
        $(window).scrollTop(0);// 给一个滚动条位置
//        $(window).scrollTop(500)
    });
    $(window).scroll(function () {
        //滚动的时候做的操作
        if ($(window).scrollTop()>100){
            $(":button").removeClass("hide")
        }
        else{
            $(":button").addClass("hide")
        }
    });

</script>
</body>
</html>

2、查看尺寸

尺寸测试

<!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 class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
//  没设置前
    console.log($(".c1").height);
    console.log($(".c1").width);
    console.log($(".c1").innerHeight()); //100
//  设置后   innerHeight()
    $(".c1").css("padding","20px");
    console.log($(".c1").innerHeight()); //140(自己的高度+padding(内边距)
    console.log($(".c1").innerWidth()); //120(自己的高度+padding(内边距)

//  测试margin
     $(".c1").css("margin","20px"); //和外边距没有关系，高度还是140
     console.log($(".c1").innerHeight());

//  outerHeight()
    console.log($(".c1").outerHeight()); //140(自己的高度+padding(内边距)
    $(".c1").css("border","10px solid yellow")//120(自己的高度+padding(内边距)
    console.log($(".c1").outerHeight()); //160(自己的高度+padding(内边距)+border的宽度

//  测试margin
     $(".c1").css("margin","30px"); //和外边距没有关系，高度还是160
     console.log($(".c1").outerHeight());

</script>
</body>
</html>

3、CSS示例

CSS相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css示例</title>
</head>
<style>
    .c2{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        top: 50px;
        left: 50px;
    }
    .c3{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        position: absolute;
        left: 100px;
        top: 100px;

    }
</style>
<body>
<div class="c1">你好那？</div>
<div class="c4">哎呦歪</div>
<div class="c2">
    <div class="c3"></div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
//  1、  .css()
    $(".c1").css("color","#336699");//找到标签，设置单个样式
    console.log($(".c1").css("color"));//获取color css值
    $(".c4").css({"color":"red","border":"1px solid green","font-size":"20px"});//设置多个样式
    console.log($(".c4").css(["color","border","font-size"]))
//    2、offset
    console.log($(".c2").offset());
    console.log($(".c2").offset().left);
    console.log($(".c2").offset().top);

    console.log($(".c3").offset()); //{top: 107, left: 58}
    console.log($(".c3").position());//{top: 100, left: 100}

</script>
</body>
</html>

4、文档操作

文档操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
</head>
<ul id="u1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<p>苍茫的大海是我的哎</p>
<ul id="u2">
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ul>
<body>
<script src="jquery-3.2.1.min.js"></script>
<script>
//    在内部插入
//      append：往后添加
    $("#u1").append("<li>456</li>");
    var li =document.createElement("li");
    $(li).text(666);
    $(li).appendTo($("#u1"));
    $("#u1>li:first").appendTo($("#u1")); //吧第一个添加到这个列表中。注意是挪动，不是复制
    $("#u1>li:last").appendTo($("#u1"));
//      prepend ：往前添加
    $("#u2").prepend("<li>啦啦啦</li>");  //吧啦啦啦添加到列表的前面

    var tem = document.createElement("li");
    tem.innerText = "哗啦啦。呼啦啦";
    $(tem).prependTo($("#u2")) ;//吧啦啦啦添加到列表里（先创建）

//    在外部插入
//    after
    $("#u2").after("<div>哈啊好好</div>");  //在列表的后面插入

    var tem = document.createElement("div");
    $(tem).text("哎哎呀");
    $(tem).css("color","red");
    $(tem).insertAfter($("#u2"));  //插入到列表的后面
//    before
    $("#u2").before("<div>111</div>");  //在列表的前面插入

    var tem = document.createElement("div");
    $(tem).text("six");
    $(tem).css("color","blue");
    $(tem).insertBefore($("#u2"))  //插入到列表的后面

//    包裹
// wrap和unwrap
    var tem = document.createElement("div");
    $(tem).css("border","1px solid #ff0000");
    $("#u1").wrap($(tem));  //让tem吧列表包起来
    $("#u1").unwrap() ;//不包，不需要加参数
//    wrapAll和wrap和wrapInner
    var tem = document.createElement("div");
    $(tem).css("border","1px solid yellow");
    $("ul").wrapAll($(tem)); //都包
    $("ul").wrap($(tem)); //单个包
    $("ul").wrapInner($(tem));//里面包

//    替换
//    replaceWith和replaceAll
    $("ul").replaceWith("<p>你愁啥？<p>") ;//吧所有的列表替换成你愁啥？

    var ele = document.createElement("p");
    $(ele).text("你愁啥？");
    $(ele).replaceAll($("ul"));

//    删除
    $("ul:first").empty() ;//吧第一个ul清空
    $("ul>li:first").empty() ;//只是清空内容
    $("ul>li:last").remove();//都清空

      var a = $("#u1>li:first").detach();  //删除以后还保留着，可以再次使用
      a.appendTo($("#u1"))
</script>
</body>
</html>

5、克隆（复制）

克隆（clone）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆</title>
</head>
<body>
<button class="c1">点我点我</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(".c1").on("click",function () {
        $(this).clone(true).insertAfter($(this))
    })
</script>
</body>
</html>

6、动画效果

动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<img src="z.png" >
<script src="jquery-3.2.1.min.js"></script>
<button class="c1">召唤</button>
<button class="c2">淡出</button>
<button class="c3">淡入</button>
<button class="c4">淡出到0.66透明度</button>
<button class="c5">淡入淡出</button>
<button class="c6">动画:图片变小</button>
<script>
    $(".c1").on("click",function () {
//        $("img").hide();
//        $("img").show();
        $("img").toggle();
    });

//    淡出
    $(".c2").on("click",function () {
        $("img").fadeOut();
        $("img").fadeOut("fast"); //快速的淡出
    });
//    淡入
    $(".c3").on("click",function () {
//        增加淡入的时间
        $("img").fadeIn(3000,function () {
//            alert(123)
        });
    });
//    淡出到0.66透明度
    $(".c4").on("click",function () {
        $("img").fadeTo(3000,0.66,function () {
//            alert(123)
        })
    });
//    淡入淡出
    $(".c5").on("click",function () {
        $("img").fadeToggle(3000,function () {
//            alert(123)
        })
    })
//    动画-图片变小
    $(".c6").on("click",function () {
        $("img").animate(
            {
                width:"80px",
                height:"80px"
            },3000,function () {
                //这是一个回调函数
                alert(123)
            }
        )
    })
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/xiaohema/p/8455520.html

时间： 2024-10-10 04:02:33

web前端【第十二篇】jQuery文档相关操作的相关文章

转---秒杀多线程第十二篇多线程同步内功心法——PV操作上

阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇一个经典的多线程同步问题> <秒杀多线程第五篇经典线程同步关键段CS> <秒杀多线程第六篇经典线程同步事件Event> <秒杀多线程第七篇经典线程同步互斥量Mutex> <秒杀多线程第八篇经典线程同步信号量Semaphore> <秒杀多线程第九篇经典线程同步总结关键段事件互斥量信号量> <秒杀多线程第十篇生产者消费者问题> <秒杀多线程第十一篇读者写者问题>

秒杀多线程第十二篇多线程同步内功心法——PV操作上

C++ PDF文档相关操作

人生总是在赶着一个又一个的期限,直到最后的大限. 近来基本没更新过博客,实在是准备雅思看英语加上调节老看英语后的烦躁心情闹的.本来以为考完研就与大考再也不见了,这种想法实在是 Too young,Too naive.之前做过一个项目,是关于在Windows平台下用C++实现PDF文档制作的相关操作的,今天有点心情拿来总结下. 关于PDF的库其实有不少,本人因为一开始用神器搜到的是PDFlib,就用这个库做了.这就是所谓的缘分吧. PDFlib并非是开源库,要使用需要付费,否则会有一个让人不要不要

第七十二篇 jquery基础

目录一.jQuery引入 1.jq API 2.jq初识二.jq选择器三.jq事件四.jq内容操作五.jq样式操作一.jQuery引入 # 导读 JQuery jq就是js工具库,即一系列功能的集合体 jq内部语法采用的就是原生js jq环境如何搭建:在需要使用jq的html中引入JQuery.js文件即可本地导入(导入下好的文件) <script src="js/jquery-3.4.1.min.js"></script> cdn导入(链接外部资

第十二次课：前台相关操作

一.前台实现按商品分类显示商品二.点击前台商品图片或名称,显示商品详细信息三.前台实现分页显示四.前台用户注册功能完善五.前台用户登录完善六.用户个人中心设计

Python开发【第二十二篇】：Web框架之Django【进阶】

Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园首页新随笔联系订阅管理随笔-124 文章-127 评论-205 Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段使用 MySQLdb 来连接数据库,并编写数据访问层代码业务逻

SaltStack 学习笔记 - 第十二篇： SaltStack Web 界面

SaltStack 有自身的用python开发的web界面halite,好处是基于python,可以跟salt的api无缝配合,确定就比较明显,需要个性化对web界面进行定制的会比较麻烦,如果喜欢体验该界面的可以参考下面的文章 http://rfyiamcool.blog.51cto.com/1030776/1275443/ 我是运用另一个python+php来进行web开发,具体需要的工具有在我的另一篇文章里面介绍过,这里再重新进行整个开发介绍首先介绍php 跟python通信的工具 pp

手把手教你搭建LyncServer2013之发布Office Web App服务器(十二)

上一篇中,我们已经完成了Office Web App服务器的部署,在组织内部已经实现了PPT和OneNote的共享,但是我们仍然与外部用户无法实现PPT的共享,只能实现简单的IM和会议,那么要实现在外部共享PPT和OneNote,我们需要把我们的Office Web App服务器发布到公网,但是由于我现在只有一个公网IP地址,因我们发布反向代理服务器的时候已经占用了公网的IP地址的443端口,而我们的Office Web App服务器也需要用到公网的443端口,所以我们今天再次用到微软的TMG

解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持（译）

解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发工作中,我终于将OrcaMDF 压缩功能分支合并到主分支这意味着OrcaMDF 现在正式支持数据行压缩功能支持的数据类型实现行压缩需要我修改几乎所有已实现的数据类型以将他们作为压缩存储.integer类型被压缩了,decimal类型变成可变长度,而可变长度类型基本上都被截断了进而用0来填补.所有先