web开发：jquery初级

一、JQ入门

二、引入JQ

三、页面加载

四、分析JQ源码流程

五、JQ操作

六、c菜单栏案例

一、JQ入门

what is jQuery ???
1.jQuery是对原生JavaScript二次封装的工具函数集合
<注: 使用jq,基本上都是完成函数的调用, 函数调用需要()>
2.jQuery是一个简洁高效的且功能丰富的JavaScript工具库
<注:本质还是js,采用的还是原生js语法,只是对js做二次封装>

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

二、引入JQ

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

三、页面加载

<!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源码流程

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

</body>

<!--jq框架-->

<script src="js/my_jq.js"></script>

<!--自定义js代码-->

<script>

    MQ.print();

    $.print();

</script>

</html>

五、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>

六、c菜单栏案例

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

小结：

## 1.引入JQ

- 本地

```html

<script src="js/jquery-3.3.1.js"></script>
```

- CDN

```html

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
```

## 2.JQ对象

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

## 3.延迟加载

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

## 4.jq操作

- 选择器

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

- 对象间转换

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

- 文本操作

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

- 事件绑定

```js
// $box为jq对象
$box.click(function(ev) {

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

- 类名操作

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

- 样式操作

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

- 文档结构关系

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

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

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

巴特西

web开发：jquery初级

最新文章

热门文章