jQuery基础笔记（3）

day55

参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0

操作标签

样式操作

样式类

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

示例：开关灯和模态框

实践：

01自定义模态框示例.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>自定义模态框示例</title>

    <style>

        .cover {//全白色覆盖之前内容

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background-color: rgba(0,0,0,0.4);

            z-index: 998;

        }

        .modal {//但是这部分在cover之前，通过z-index设置

            height: 400px;

            width: 600px;

            background-color: white;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-left: -300px;

            margin-top: -200px;

            z-index: 1000;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

<button id="b1">屠龙宝刀,点击就送!</button>

<div class="cover hide"></div>

<div class="modal hide">

    <form>

        <p>

            <label>用户名:

                <input type="text">

            </label>

        </p>

        <p>

            <label>密码:

                <input type="password">

            </label>

        </p>

        <p>

            <input type="submit" value="登录">

            <input id="cancel" type="button" value="取消">

        </p>

    </form>

</div>

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

<script>

    // 找到点击弹出模态框的按钮

    $("#b1").click(function () {  //点击后显示

        // 把.cover和.modal显示出来(去除掉.hide)

        $(".cover").removeClass("hide");  // 显示背景

        $(".modal").removeClass("hide"); // 显示模态框

    });

    // 找到取消按钮,绑定事件

    $("#cancel").click(function () {//点击取消

        // 给背景和模态框都加上hide类

        $(".cover").addClass("hide");

        $(".modal").addClass("hide");

    })

</script>

</body>

</html>

效果：

CSS

改变css样式

css("color","red")//DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red"); //将所有p标签的字体设置为红色

实践：

02修改CSS样式.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>修改CSS样式</title>

</head>

<body>

<p>乔小强</p>

<p>二哥</p>

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

<script>

    $("p").click(function () {

        // 把当前点击的标签变绿

        // 在处理事件的函数中用 this 表示 当前触发事件的标签

//        $(this).css("color", "red");

//        $(this).css("font-size", "24px");

        //点击改变CSS

        $(this).css({"color": "pink", "font-size": "48px"});

    })

</script>

</body>

</html>

效果：

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置

position()// 获取匹配元素相对父元素的偏移

scrollTop()// 获取匹配元素相对滚动条顶部的偏移

scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

04返回顶部示例.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>位置相关示例之返回顶部</title>

  <style>

       * {

           margin: 0;

       }

    .c1 {

      width: 100px;

      height: 200px;

      background-color: red;

    }

    .c2 {

      height: 50px;

      width: 50px;

      position: fixed;

      bottom: 15px;

      right: 15px;

      background-color: #2b669a;

    }

    .hide {

      display: none;

    }

    .c3 {

      height: 100px;

    }

  </style>

</head>

<body>

<button id="b1" class="btn btn-default">点我</button>

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

<div class="c3">1</div>

<div class="c3">2</div>

<div class="c3">3</div>

<div class="c3">4</div>

<div class="c3">5</div>

<div class="c3">6</div>

<div class="c3">7</div>

<div class="c3">8</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>

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

<script>

  //鼠标滚动，script应用此功能函数

  $(window).scroll(function () { //转为jQuery对象

    if ($(window).scrollTop() > 100) {//滚了100px,则显示

      $("#b2").removeClass("hide");

    }else {

      $("#b2").addClass("hide");//小于100px,隐藏

    }

  });

  $("#b2").click(function () { //回网页顶部

    $(window).scrollTop(0);

  })

</script>

</body>

</html>

一键回到顶部：

尺寸：

height()

width()

innerHeight()

innerWidth()

outerHeight()

outerWidth()

05尺寸示例.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>尺寸示例</title>

    <style>

        .c1 {

            height: 100px;

            width: 200px;

            padding: 10px;

            margin: 20px;

            background-color: red;

            border: 5px solid green;

        }

    </style>

</head>

<body>

<div>

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

</div>

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

</body>

</html>

实践：

高度为100，加上上下内填充10，为120

jQuery基础笔记（3）的更多相关文章

jQuery基础笔记（1）
day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery? MySQL Python ...
jquery基础笔记一
一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...
jQuery基础笔记 each和data（7）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...
jQuery基础笔记事件（6）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
jQuery基础笔记（4）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...
jQuery基础笔记（2）
day54 筛选器参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法下一个元素: $("#id& ...
jquery基础笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
jquery基础笔记二
动态创建元素关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
Jquery基础笔记
1.$(function(){ 等价于 window.onload=function(){ }) } 2 ...

随机推荐

《计算机网络》谢希仁（第7版）第四章 c语言http://c.biancheng.net/cpp/html/3137.html
第四章网络层电信网使用面向连接的通信方式,使电信网络能够向用户提供可靠传输的服务. 互联网设计思路:网络层向上只提供简单灵活的.无连接的.尽最大努力交付的数据报(分组)服务. 网络层不提供可靠传输 ...
Car 加油
package com.hanqi; public class Car { //属性成员变量 //车的颜色 String YanSe; //车的品牌 String PinPai; //邮箱容量 do ...
白盒静态自动化测试工具：PMD使用指南
参考文献:http://www.oschina.net/p/pmd/http://www.cnblogs.com/flyme/archive/2011/09/09/2172548.htmlhttp:/ ...
电商类Web原型制作分享-IKEA
IKEA是一个家居整合大型零售商,属于电商类官网.电商以展示商品.售后服务.购物流程为主.根据网站的图文方式排版,主导航栏使用的标签组,区域导航栏使用的是垂直选项卡,实现下拉弹出面板交互的功能. 本原 ...
linux 基本工具相关
首先是linux下安装ssh服务(root) 由于是使用debian版本与其他稍有差别安装服务 apt-get install ssh 查看服务是否开启 service ssh status 开启 ...
2018.10.04 NOIP模拟航班（tarjan+树形dp）
传送门考场上自己yy了一个双连通只有40分. 然后换根dp求最长路就行了. 代码
Intelj IDEA的pom.xml显示错误can not reconnect
从GitHub上边down下来的开源项目,报错莫名其妙,后来发现是跟本地hosts文件有关系 hosts文件加上 127.0.0.1 localhost 然后pom文件reload一下就
Windows 下安装mysql总结
1.配置环境变量将安装目录添加到系统路径我的电脑->属性->高级->环境变量->path 2.修改my.ini 位于解压安装目录下在其中修改或添加配置: [mysqld] ...
CentOS7中实用的命令总结
一:软件安装配置方面这里总结一下对个人很实用的功能 1.查询rpm包的依赖哪些文件:rpm -qpR xx.rpm,然后rpm会分析此包的文件依赖性 2.查询系统中安装了哪些rpm包:rpm -qa ...
Java(Android)线程池[转]
介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...