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 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

随机推荐

Hadoop 部署之 Hadoop (三)
目录一.Hadoop 介绍 1.HDFS 介绍 2.HDFS 组成 3.MapReduce 介绍 4.MapReduce 架构 JobTracker TaskTracker 二.Hadoop的安装 ...
学习SpringBoot整合SSM三大框架源码之SpringBoot
Spring Boot源码剖析一.Spring Boot 项目的启动入口流程分析 Spring Boot项目的启动入口main线程上有一个@SpringBootApplication( @Confi ...
Java中get()方法和set()方法如何使用？
在java中,为了保证数据的安全性,我们会把数据定义为private等(私有.封装),如果想要调用就会用到set()方法与get方法或者构造函数方法.这里说的是第一种方法,set()与get(),既然 ...
manjar 搭建aria2c下载器
从添加或删除软件管理程序里安装 aria2. 在一个地方创建一个文本文件,名为「aria2.conf」 : rpc-user=我是用户名 rpc-passwd=我是密码 enable-rpc=tru ...
【FFMPEG】VS2013编译ffmpeg
原文:http://blog.csdn.net/uselym/article/details/49885867 由于VS2013支持c99了,所以,可以直接用vs2013进行ffmpeg的编译调试,而 ...
冲刺Noip2017模拟赛1 解题报告——五十岚芒果酱
题1 国际象棋(chess) [问题描述] 有N个人要参加国际象棋比赛,该比赛要进行K场对弈.每个人最多参加2场对弈,最少参加0场对弈.每个人都有一个与其他人都不相同的等级(用一个正整数来表示).在对 ...
dockerfile 搭建nginx镜像
昨晚看了看dockerfile的内容,想自己玩一玩.折腾了一晚上,到今天才顺利构建出来(弱鸡如我~). 首先,我新建了一个文件夹,并且放进了nginx源码包,建立了一个Dockerfile. Do ...
pytorch API中sgd.py的学习记录
参考:PyTorch与caffe中SGD算法实现的一点小区别其中公式(3)(4)的符号有问题变量对应表程序参考文章 buf v momentum μ d_p Δf(θ) lr ξ p θ
Oracle的查询-多行查询
多行函数[聚合函数],作用于多行,返回一个值 ) from emp;--查询总数量 select count(empno) from emp;--查询总数量 select count(*) from ...
Maven仓库介绍以及私服搭建
1 什么是Maven? 1.1 Maven的概念 Maven主要服务于基于Java平台的项目构建.依赖管理和项目信息开发,它是一个异常强大的构建工具,能够帮助我们自动化构建过程,从清理.编译.测试 ...

web开发：jquery初级

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

随机推荐

热门专题