前端学习第70天JQ初级

53 阅读 0 评论 35 点赞

我是靠谱客的博主清秀牛排，最近开发中收集的这篇文章主要介绍前端学习第70天JQ初级，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一,JQ入门

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq入门</title>
</head>
<body>
what is jQuery ???
<!--1.jQuery是对原生JavaScript二次封装的工具函数集合-->
<!--注: 使用jq,基本上都是完成函数的调用, 函数调用需要()-->
<!--2.jQuery是一个简洁高效的且功能丰富的JavaScript工具库-->
<!--注:本质还是js,采用的还是原生js语法,只是对js做二次封装-->

优势
<!--
1. 简洁的选择器
2. 强大的DOM操作
3. 简化的Ajax操作
4. 开源可拓展性(丰富的插件)
-->

</body>

</html>

二,引入JQ

## 1.引入JQ

- 本地

```html
<!-- 下载jq到本地 -->
<script src="js/jquery-3.3.1.js"></script>
```

- CDN

```html
<!-- jq CDN 地址 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
```

## 2.JQ对象

```js
// jQuery: 具有jq框架规定的所有功能的调用者, 也就是框架产生的唯一对象
// $本质上就是jQuery对象, 开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>引入jq</title>

</head>
<body>
    <div class="box">12345</div>
</body>
<!--js的依赖库 head中 | 自身js脚本前-->
<!--第一种: CDN导入方式 -->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<!--第二种: 本地导入方式-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 将box内容修改为54321
    // js
    // var box = document.querySelector('.box');
    // box.innerText = '54321';

    // jq操作
    $('.box').text('呵呵');
</script>


<script>
    console.log(jQuery);
    jQuery('.box').html("<b>嘻嘻</b>");


    // jQuery对象: 具有jquery框架设置的所有功能的调用者, 就是该框架的对象
    // $又是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使用

    // 如何自定义jQuery对象: 如用 JQ 替换 jQuery | $
    var JQ = jQuery.noConflict();
    JQ('.box').html("<b>哈哈</b>");
</script>
</html>

三,页面加载

``js
// jq的延迟加载: 文档树加载完毕, 即回调
$(document).ready(function() {})
// 1. 早于window.onload
// 2. 可以多次绑定事件
// 3. 可以简写为$(function() {})
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面加载</title>
    <script>
        // 延迟执行
        window.onload = function () {
            var box = document.querySelector('.box');
            console.log(box);
        }
    </script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 延迟执行
        $(document).ready(function () {
            // 在原来只使用jq框架时,大家习惯给变量前加$用来标识这是jq的变量
            var $box = $('.box');
            console.log($box);
            $box.text('12345'); // 无结果, jq已有,但box未有
        })
        // 总结: $(document).ready() 要早于 window.onload
        // $(document).ready(): 文档树加载完毕即回调, 无需关系页面资源加载
        // window.onload: 文档树及文档所需所有资源加载完毕才回调
    </script>

    <script>
        window.onload = function() {
            console.log("window load 1");
        };
        window.onload = function() {
            console.log("window load 2");
        };
        $(document).ready(function() {
            console.log("document load 1");
        });
        // $(document).ready(fn) 简写 $(fn)
        $(function() {
            console.log("document load 2");
        });
        // $(document).ready(fn)可以绑定多个事件
    </script>
</head>
<body>
    <div class="box"></div>

    <img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
</html>

四,.jq操作

1- 选择器

```js
// $(css选择器语法)
// eg: $('.box') 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用
```

2- 对象间转换

```js
// js对象: box  jq对象: $box
// 将js对象转换为jq对象: $(box)
// 将jq对象转换为js对象: $box[index]
```

3- 文本操作

```js
// 获取原有文本
$box.text() | $box.html()
// 设置新文本
$box.text('newData') | $box.html('<b>newData</b>')
```

4- 事件绑定

```js
// $box为jq对象
$box.click(function(ev) {
    
})
// 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件
// ev事件为jq事件, 兼容js事件
// this为js对象, $(this)就转换为jq对象
// 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
```

5- 类名操作

```js
$box.addClass("newClass") // 添加一个新类名
$box.removeClass("oldClass") // 删除一个已有的类名
// 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名
```

6- 样式操作

```js
$box.css('background-color')  // 获取背景颜色
$box.css('background-color', 'red')  // 设置背景颜色
$box.css('background-color', function() {return 'yellow'})  // 通过函数返回值设置背景颜色
```

7- 文档结构关系

```js
// 父
$sup.parent()
// 父,父的父...
$sup.parents()
// 子们
$sup.children() *****
// 上兄弟
$sup.prev()  ***
// 上兄弟们
$sup.prevAll()
// 下兄弟
$sup.next()  ***
// 下兄弟们
$sup.nextAll()
// 同级别的兄弟们
$sup.siblings()  ***

// 在sup下查找类名为inner的子级
$sup.children('.inner')

// 获得的结果都是jq对象, 还可以接着使用jq方法
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQ操作</title>
    <style>
        .li {
            font-size: 38px;
        }
        .li.active {
            color: orange;
        }
        .ele {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

<div class="sup">
    <div class="sub">嘿嘿</div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>


<ul>
    <li class="li active">标题</li>
    <li class="li">标题</li>
    <li class="li">标题</li>
</ul>

<div class="ele"></div>

</body>
<!-- 使用jq大前提: 导入jq -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 使用jq语法完成自身js代码 -->
<script>
    // 1.选择器: $(css3选择器语法)
    var $sub = $('.sub');

    // 2.操作文本 text() | html()
    var text = $sub.text(); // 获取文本
    console.log(text);
    $sub.html('<i>虎虎 vs 刘XX</i>'); // 设置(html)文本

    // 3.jq对象与js对象是一样的吗? 不一样
    // 那么能相互转换吗?
    $sub.innerText = "tank";  // 无效果, jq对象不能使用原生js方法和属性

    // i) jq对象 转换 js对象
    // $sub[0].innerText = "tank";
    $sub.get(0).innerText = "tank";

    // ii) js对象 转换 jq对象
    var sub = document.querySelector('.sub');
    sub.innerText = "egon";
    $(sub).html("<b>egon</b>");

    // 总结:
    // js => jq   $(box)  box为js对象
    // jq => js   $box[0] | $box.get(0)  $box为jq对象

    // 4.事件
    console.log($('.box'));
    // $('.box')[1].innerText = "test"; // 通过索引一取值,就是js对象
    // 不需要循环绑定, 直接对数组对象绑定后,所有的数组内对象都拥有了该事件
    $('.box').click(function (ev) {
        console.log(ev);  // jq.event 兼容 js事件
        // 鼠标点
        console.log(ev.clientX);

        // console.log(123)
        // this 是 js对象还是jq对象?  this是js对象, $(this)就是jq对象
        console.log(this);
        // 用索引区分
        // index()为jq获取标签在其结构下的索引位置, 从0开始
        console.log($(this).index())
    })


    // 5.类名

    $('.li').click(function () {
        // $(this).addClass('active');
        // $(this).removeClass('active');
        // 点击者变成活跃状态, 其他变为非活跃状态

        // 全部删除
        $('.li').removeClass('active');
        // 自身添加
        $(this).addClass('active');
        // siblings()所有兄弟标签
        // $(this).siblings().removeClass('active');
    })

    // 6.样式操作
    // 取值
    var w = $('.ele').css('width');
    console.log(w);
    console.log($(".ele").css('background-color'))
    // 设值
    $(".ele").css("border-radius", "50%");

    // 7.文档结构关系
    var $sup = $('.sup');
    // 父
    console.log($sup.parent());
    // 父,父的父...
    console.log($sup.parents());
    // 子们
    console.log($sup.children());
    // 上兄弟
    console.log($sup.prev());
    // 上兄弟们
    console.log($sup.prevAll());
    // 下兄弟
    console.log($sup.next());
    // 下兄弟们
    console.log($sup.nextAll());
    // 同级别的兄弟们
    console.log($sup.siblings());

    // 在sup下查找类名为inner的子级
    console.log($sup.children('.inner'))

</script>

</html>

五,菜单栏案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单栏案例</title>
    <style>
        body, h2, ul {
            margin: 0;
            padding: 0;
            list-style: none;
            user-select: none;
        }
        .menu {
            width: 180px;
            cursor: pointer;
            /*background-color: orange;*/
        }
        .menu h2 {
            padding-left: 20px;
        }
        .menu h2:hover {
            background-color: red;
            color: white;
        }
        .menu ul {
            background-color: yellow;
            height: 0;
            overflow: hidden;
            transition: .3s;
        }
        .menu ul li {
            padding-left: 30px;
            line-height: 26px;
        }
        .menu ul li:hover {
            background-color: cyan;
            color: deeppink;
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <div class="menu">
        <h2>菜单标题</h2>
        <ul>
            <li>子标题1</li>
            <li>子标题2</li>
            <li>子标题3</li>
            <li>子标题4</li>
            <li>子标题5</li>
        </ul>
    </div>
    <div class="menu">
        <div class="menu-cell">
            <h2>菜单标题</h2>
            <ul>
                <li>子标题1</li>
                <li>子标题2</li>
                <li>子标题3</li>
                <li>子标题4</li>
                <li>子标题5</li>
            </ul>
        </div>
        <div class="menu-cell">
            <h2>菜单标题</h2>
            <ul>
                <li>子标题1</li>
                <li>子标题2</li>
                <li>子标题3</li>
                <li>子标题4</li>
                <li>子标题5</li>
            </ul>
        </div>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $('.menu h2').click(function () {
        var $ul = $(this).next();
        var height = $ul.height();
        if (height == 0) {
            // 将函数的返回值作为结果赋值给属性height
            $ul.css('height', function() {
                var $lis = $ul.children('li');
                // ul下li的高度 * li的个数
                return $lis.height() * $lis.length;
            });
        } else {
            $ul.css('height', '0');
        }
    })
</script>
</html>