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初级的更多相关文章

静态Web开发 JQuery
伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线A ...
Web开发——jQuery基础
参考: 参考W3School:jQuery 教程参考:jQuery 参考手册参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
Web开发——jQuery进阶
参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...
1+X Web前端开发（初级）理论考试样题（附答案）
传送门教育部:职业教育将启动"1+X"证书制度改革职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口一.单选题(每题 2 分,共 60 分) 1.在 HTML 中, ...
Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
Web 开发人员不能错过的 jQuery 教程和案例
jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...
对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...
Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

随机推荐

Ubuntu之安装PXE+Kickstart无人值守安装操作系统
CentOS安装PXE见 https://www.cnblogs.com/minseo/p/10774030.html 本文介绍Ubuntu系统安装pxe 1,环境查看服务器ip地址:192.168 ...
C#使用MPI进行高性能计算
MPI.NET是用于Microsoft.NET环境的高性能.易于使用的消息传递接口(MPI)实现.mpi是编写在分布式内存系统(如计算集群)上运行的并行程序的事实上的标准,并且得到了广泛的实现.大多数 ...
添加学生信息（java wb）
要求: 1.登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头: 2.登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成: 3.性别:要求用单选框或下拉框实 ...
CVPapers - Computer Vision Resource
To add links (PDF, project,...) you can use the online tool. Computer Vision Paper Indexes ICCV: 20 ...
最新搜狐java校招面经（含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.搜狐等10家互联网公司的校招Offer,因为某些自身原因最终选择了搜狐.6.7月主要是做系统复习.项目复盘.LeetCode ...
WCF服务的Web HTTP方式
NET 3.5以后,WCF中提供了WebGet的方式,允许通过url的形式进行Web 服务的访问.现将WCF服务设置步骤记录如下: endpoint通讯协议设置成 webHttpBinding en ...
创建多个Fragment可滑动界面
创建新项目,选择Tabbed Activity 默认就有2个Fragment,这里我们删除相关代码. 在切换时 FragmentPagerAdapter onDestroyView onCreateV ...
nginx 配置用户认证
nginx 配置用户认证有两种方式: 1.auth_basic 本机认证,由ngx_http_auth_basic_module模块实现.配置段: http, server, location, li ...
Minimizing Difference 【思维】
题目链接: https://vjudge.net/contest/336389#problem/B 题目大意: 给出一个长度为n的数列以及操作次数k.k的范围为1e14.每次操作都可以选择给任意一个数 ...
luogu P1216 [IOI1994][USACO1.5]数字三角形 Number Triangles (递推）
链接:https://www.luogu.org/problemnew/show/P1216 题面: 题目描述观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的 ...

web开发：jquery初级

web开发：jquery初级的更多相关文章

随机推荐

热门专题