JQuery 测试内容(不保证内容完整性)

LingPF

2019-06-28

关注关注

JQuery 基础

tags: `前端` `JQuery` `基础`

一什么是JQery

是一个轻量级的兼容多浏览器的JavaScript库(类库)

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."

二为什么使用JQery

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

三怎么下载使用

版本选择

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

版本下载

官方地址:http://jquery.com/download/
压缩的版本3.3.1 --->上线使用
未压缩的版本3.3.1 --->开发使用

安装两种方式

pass

优美胜于丑陋（Python 以编写优美的代码为目标）
明了胜于晦涩（优美的代码应当是明了的，命名规范，风格相似）
简洁胜于复杂（优美的代码应当是简洁的，不要有复杂的内部实现）
复杂胜于凌乱（如果复杂不可避免，那代码间也不能有难懂的关系，要保持接口简洁）
扁平胜于嵌套（优美的代码应当是扁平的，不能有太多的嵌套）
间隔胜于紧凑（优美的代码有适当的间隔，不要奢望一行代码解决问题）
可读性很重要（优美的代码是可读的）
即便假借特例的实用性之名，也不可违背这些规则（这些规则至高无上）
不要包容所有错误，除非你确定需要这样做（精准地捕获异常，不写 except:pass 风格的代码）
当存在多种可能，不要尝试去猜测
而是尽量找一种，最好是唯一一种明显的解决方案（如果不确定，就用穷举法）
虽然这并不容易，因为你不是 Python 之父（这里的 Dutch 是指 Guido ）
做也许好过不做，但不假思索就动手还不如不做（动手之前要细思量）
如果你无法向人描述你的方案，那肯定不是一个好方案；反之亦然（方案测评标准）
命名空间是一种绝妙的理念，我们应当多加利用（倡导与号召）

基础知识

基本语法

jquery的基础语法：

$(selector).action()

查找标签

:::info
本章节练习题基于:jQuery选择器筛选器练习.html
:::

基本选择器

$("#id的值")

id选择器

$("#id的值")

举例:找到本页面中id是i1的标签

$("#i1")
--------
-> Object [ div#i1.container
 ]

标签选择器

查找所有标签

$("*")
----------
Object { 0: html
, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: link, 7: link, 8: style, 9: body, … }

查找

class选择器

$(".class")

$(".c1")
Object { 0: h1.c1
, 1: h1.c1, length: 2, prevObject: Object(1) }

配合使用

找到div的container类的标签

$("div.container")
----------
r.fn.init(6) [div.container, div.container, div.container, div#i1.container, div.container, div.container, prevObject: r.fn.init(1)]

层级选择器

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .modal {
            width: 400px;
            height: 300px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 100;
        }

        .close {
            float: right;
            margin-right: 15px;
            cursor: pointer; /* 鼠标移上去光标显示类型 */
        }

        .hide {
            display: none;
        }

        /*#login {*/
        /*!*float: right;*!*/
        /*!*top: 0;*!*/
        /*!*right: 100%;*!*/
        /*}*/
    </style>
</head>
<body>
<div>
    <h1>《钗头凤》唐婉</h1>
    <p>世情薄</p>
    <p>人情恶</p>
    <p>雨送黄昏花易落</p>
    <p>晓风干</p>
    <p>泪痕残</p>
    <p>欲笺心事</p>
    <p>独语斜阑</p>
    <p>难 难 难</p>

    <p>人成各</p>
    <p>今非昨</p>
    <p>病魂长似秋千索</p>
    <p>角声寒</p>
    <p>夜阑珊</p>
    <p>怕人询问</p>
    <p>咽泪装欢</p>
    <p>瞒 瞒 瞒</p>
</div>

<button id="login">登录</button>
<div class="cover hide"></div>
<div class="modal hide">
    <div class="close">X</div>
</div>

<script src="jquery.js"></script>
<script>
    $("#login")[0].onclick = function () {
        //去掉cover和modal的hide样式类
        // 有两种方式
        // 方式一
        // $(".cover")[0].classList.remove('hide');
        // $(".modal")[0].classList.remove('hide');
        //方式二
        $(".cover,.modal").removeClass('hide')
    };
    // 找到close按钮绑定
    $(".close")[0].onclick = function () {
        //添加cover和modal的hide样式类
        // $(".cover")[0].classList.add('hide');
        // $(".modal")[0].classList.add('hide');
        $(".cover,.modal").addClass('hide')

    }

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

基本筛选器

:first ->第一个

举例:找到id值为f1的标签内部的第一个input标签

$("#f1:first")

Object { 0: form#f1
, length: 1, prevObject: Object(1) }

:last ->最后一个
找到id值为my-checkbox的标签内部最后一个input标签

举例:

$("#my-checkbox:last")

Object { 0: div#my-checkbox.panel-body
, length: 1, prevObject: Object(1) }

:eq(index) -->索引等于index的那个元素

举例:

属性选择器

[arribute]
[attribute=value] //属性等于
[attribute!=value] //属性不等于

表单筛选器

练习题

找到本页面中id是i1的标签
找到本页面中所有的h2标签
找到本页面中所有的input标签
找到本页面所有样式类中有c1的标签
找到本页面所有样式类中有btn-default的标签
找到本页面所有样式类中有c1的标签和所有h2标签
找到本页面所有样式类中有c1的标签和id是p3的标签
找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
找到本页面中form标签中的所有input标签
找到本页面中被包裹在label标签内的input标签
找到本页面中紧挨在label标签后面的input标签
找到本页面中id为p2的标签后面所有和它同级的li标签
找到id值为f1的标签内部的第一个input标签
找到id值为my-checkbox的标签内部最后一个input标签
找到id值为my-checkbox的标签内部没有被选中的那个input标签
找到所有含有input标签的label标签

实例

垂直菜单
/Users/chery/Documents/LearnPython/E_前端/day51/垂直菜单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical menu with CSS</title>
    <link rel="stylesheet" href="fonts/css/font-awesome.css">
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .menu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;

        }
        .menu ul li{
            padding: 15px;
            position: relative;
            width: 150px;
            vertical-align: middle;
            background-color: #2C3A47;
            cursor: pointer;
            /*border-right: 5px solid gold;*/
            border-top:1px solid silver;
            /* 颜色延迟显示 */
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .menu ul li:hover {
           background-color: #2ecc71;
        }
        .menu > ul >li {
            border-right: 5px solid gold;
        }
        .menu ul ul{
            transition: all 0.3s;
            opacity: 0;
            position: absolute;
            border-left: 5px solid gold;
            visibility: hidden;
            left: 100%;
            top:-2%;
        }
        .menu ul li:hover>ul {
            opacity: 1;
            visibility: visible;
        }
        .menu ul li a{
            color: #fff;
            text-decoration: none;
        }
        span {
            margin-right: 15px;
        }
        .menu> ul >li:nth-of-type(2)::after{
            content: '+';
            position: absolute;
            margin-left: 40%;
            float: right;
            color: #fff;
            font-size: 20px;
        }
    </style>

</head>
<body>
    <div class="menu">
        <ul>
            <li><a href=""><span class="fa fa-home"></span>主页</a></li>
            <li><a href=""><span class="fa fa-users"></span>用户</a>
                <ul>
                    <li><a href=""><span class="fa fa-plus" ></span>添加</a></li>
                    <li><a href=""><span class="fa fa-edit" ></span>编辑</a></li>
                    <li><a href=""><span class="fa fa-remove" ></span>删除</a></li>
                </ul>
            </li>
            <li><a href=""><span class="fa fa-desktop"></span>设计</a></li>
            <li><a href=""><span class="fa fa-database"></span>数据</a></li>
            <li><a href=""><span class="fa fa-info"></span>关于我</a></li>
        </ul>
    </div>

</body>
</html>

效果:

[x] 延迟显示
[x] 多级菜单

JQuery 测试内容(不保证内容完整性)

操作元素(属性,css,文档处理)

文本操作

/E_前端/day51/文本操作.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本操作</title>
</head>
<body>
<div id="d1">
    《前出师表》
    <p>
        臣本布衣，躬耕于南阳。苟全性命于乱世，不求闻达于诸侯。
        先帝不以臣卑鄙，位子望去，三顾晨宇草湖之中，自衬衣党史知识
    </p>
</div>

<label for="i1"></label><input type="text" id="i1">
<label>
    <input type="checkbox" name="hobby" value="basketball">
</label>篮球

jquery jquery选择器