Jquery----对文档操作

jquery对css操作：

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的高度

jquery对文档操作：

内部插入
    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的事件委派

案例：

<!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: #;

    }

    .hide{

        display: none;

    }

</style>

<body>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<div class="c1"></div>

<button class="cc hide">返回顶部</button>

<script src="jquery.min.js"></script>

<script>

    $(":button").on("click",function () {

        $(window).scrollTop();// 给一个滚动条位置

//        $(window).scrollTop(500)

    });

    $(window).scroll(function () {

        //滚动的时候做的操作

        if ($(window).scrollTop()>){

            $(":button").removeClass("hide")

        }

        else{

            $(":button").addClass("hide")

        }

    });

</script>

</body>

</html>

返回顶部

<!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.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>

尺寸测试

<!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.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().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>

css中位置示例

append prepend after before wrap replacewith empty remove等示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文档操作</title>

</head>

<ul id="u1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

<p>苍茫的大海是我的哎</p>

<ul id="u2">

    <li>第一章</li>

    <li>第二章</li>

    <li>第三章</li>

    <li>第四章</li>

</ul>

<body>

<script src="jquery.min.js"></script>

<script>

//    在内部插入

//      append：往后添加（内部）

    $("#u1").append("<li>456</li>");

    var li =document.createElement("li");

    $(li).text();

    $(li).appendTo($("#u1"));

    $("#u1>li:first").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)单个包

    // $("ul").wrapInner($(tem));//里面包

//

// //    替换

// //    replaceWith和replaceAll  效果一样，方向相反

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

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

//

//     var ele = document.createElement("p");

//     $(ele).text("你愁啥？");

    // $(ele).replaceAll($("ul"));

//

// //    删除

//         $("ul:first").empty() ;//吧第一个ul清空  和$("ul:first").remove()效果一样

//     $("ul>li:first").empty() ;//只是清空内容(位置占用)

    $("ul>li:last").remove();//清空最后一个li 位置和内容都清空

     // console.log($("ul>li"))   //只可以找到一个，会找到所有的li变成一个伪列表

     // console.log(typeof $("ul>li"))   //object

//

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

//       a.appendTo($("#u1"))

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>克隆</title>

</head>

<body>

<button class="c1">点我点我</button>

<script src="jquery.min.js"></script>

<script>

    $(".c1").on("click",function () {

        // $(this).after($(this).clone(true))  //应该是将属性也一起克隆了

        // $(this).after($(this).clone())

        // $(this).after($(this))               //如果没有克隆只是单纯的将this 放在                                                      this后面，没有任何效果

    })

</script>

</body>

</html>

克隆

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <style>

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<img src="timg.jpg" alt="">

<script src="jquery.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(,function () {

//            alert(123)

        });

    });

//    淡出到0.66透明度

    $(".c4").on("click",function () {

        $("img").fadeTo(,0.66,function () {

//            alert(123)

        })

    });

//    淡入淡出

    $(".c5").on("click",function () {

        $("img").fadeToggle(,function () {

//            alert(123)

        })

    })

//    动画-图片变小

    $(".c6").on("click",function () {

        $("img").animate(

            {

                width:"80px",

                height:"80px"

            },,function () {

                //这是一个回调函数

                alert()

            }

        )

    })

</script>

</body>

</html>

动画效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <script src="jquery.min.js"></script>

</head>

<body>

<div style="width: 200px;height: 200px;overflow: hidden">

    <img src="timg.jpg"  style="width: 200px;height: 200px" alt="">

</div>

<script>

    $("img").on("mouseover",function () {

        $("img").animate(

            {

                width:"210px",

                height:"210px"

            },)

    });

    $("img").on("mouseout",function () {

        $("img").stop(true,true);

        $("img").animate(

            {

                width:"200px",

                height:"200px"

            },)

    })

</script>

</body>

</html>

动画效果之鼠标移入，图片变大

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<script src="jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#start").click(function(){

    $("div").animate({left:'100px'},);

    $("div").animate({fontSize:'3em'},);

  });

  $("#stop").click(function(){

    $("div").stop();

  });

  $("#stop2").click(function(){

    $("div").stop(true);

  });

  $("#stop3").click(function(){

    $("div").stop(true,true);

  });

});

</script>

</head>

<body>

<button id="start">开始</button>

<button id="stop">停止</button>

<button id="stop2">停止所有</button>

<button id="stop3">停止但要完成</button>

<p><b>"开始"</b> 按钮会启动动画。</p>

<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>

<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>

<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

动画的开始与结束

Jquery----对文档操作的更多相关文章

python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架在前端中,一个js文件就是一个模块一.用法: 1.引入包 2.入 ...
python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax
一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...
jQuery 的文档操作
在 js 中也有DOM操作,也可以进行增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...
（20）jQuery的文档操作（创建，添加、设置样式和删除等）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
前端jQuery之文档操作
1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...
jQuery的文档操作
1.插入操作一.父元素.append(子元素) 追加某元素父元素中添加新的元素 var oli = document.createElement('li'); oli.innerHTML = '哈 ...
jquery之文档操作
append(content|fn) 向每个匹配的元素内部添加内容(元素内部) appendTo(content) 把所有匹配的元素追加到另一个指定的元素中(元素内部) prepend(content ...
jQuery系列（六）：jQuery的文档操作
1.插入操作 (1) 语法: 父元素.append(子元素) 解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng | element(js对象) | jquery元素 let ol ...
【JQuery】文档操作
一.前言接着上一章的内容,接着JQuery的学习二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...
jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作是对htm ...

随机推荐

InfluxDB、grafana、collect部署监控（centos6.8）
collect部署 1.安装 yum install collectd -y 2.配置/etc/collectd.conf LoadPlugin network <Plugin network& ...
GO语言的进阶之路-爬虫进阶之路
GO语言的进阶之路-爬虫进阶之路作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 网络爬虫是一种自动获取网页内容的程序,是搜索引擎的重要组成部分.我们今天要介绍的就是一个简单的网络爬 ...
记录一次iptables端口转发的配置
需求是公网访问2.2.2.22的80端口,直接转发到内网的192.100.100.178的80端口上. 代理服务器的,两个不同的网卡 eth0 2.2.2.22 eth1 192.100.100.10 ...
多目标遗传算法 ------ NSGA-II （部分源码解析）辅助变量双链表操作 list.c
/* A custom doubly linked list implemenation */ # include <stdio.h> # include <stdlib.h> ...
Centos7更改yum镜像源
1. 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak 2.获取阿里yum源配置文 ...
linux4.10.8 内核移植（三）---裁剪内核
一.裁剪内核 1.1 第一次修改现在的内核大小为2.8M左右,要裁剪到2.0M以下,毕竟给内核分区就只有2.0M. 这两个设备我们没有,裁剪掉. 进入make menuconfig中,搜索mouse ...
打包pyinstaller
安装:pip3 install pyinstaller 了解几个常用命令参数用处 -F 将程序打包成一个文件 -w 去除黑框 -i 添加程序图标我们将需要打包的test.py文件放到桌面上,之后 ...
Linux之Ubuntu安装搜狗输入法
1.下载搜狗输入法安装包搜狗官网:https://pinyin.sogou.com/linux/ 2.更新ubuntu内置的包管理器apt-get的软件源[如果中途安装失败,经常是此原因造成的] s ...
sizeof strlen区别于联系
http://www.cnblogs.com/carekee/articles/1630789.html
Python 入门基础20 --面向对象_继承、组合
今日内容组合:自定义类的对象作为类的属性继承:父类与子类.多继承 1.组合将自定义类的对象作为类的属性 class Teacher: def __init__(self, name): self ...

Jquery----对文档操作

Jquery----对文档操作的更多相关文章

随机推荐

热门专题