网站前端_Jquery-基础入门.0001.原生Js到后期封装库Jquery的过渡?

发布时间:2020-08-20 19:51:25 作者:运维开发
来源:网络 阅读:496

原生缺点:


1. JS的出现使得网页与用户之间实现了一种实时/动态/交互的关系,网页可以包含更多活跃的元素和精彩的内容

2. JS的弊端在于复杂的DOM对象,而JQuery封装了很多预定义的对象和使用函数简化了DOM操作,使得我们可以快速创建有高难度交互的富客户端页面,且兼容各大浏览器


简单介绍:


1. JQuery是一个优秀的JavaScript库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能,目前团队主要推核心库(JQuery)/UI(JQuery UI)/移动端(JQuery Mobile)


小试牛刀:

说明: 官网下载最新版,.min.js结尾的表示压缩版,自己开发学习可以使用未压缩版,需要明确的是在JQuery库环境下$就是JQuery简写形式,其实两个是等价的,以后开发中更多用的当然是$符号了~


<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>前端开发</title>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            // 常规写法
            $(document).ready(function () {
                alert('Hello Word!')
            })
            // 简写方式
            $(function () {
                alert('Hello Word!')
            })
        </script>
    </body>
</html>

说明: 如上代码的$(document).ready(function(){})其实类似于传统JS中的window.onload方法,但是不同点一是前者只要等待DOM结构绘制完毕后执行,可能DOM元素关联的东西还没有加载完,而后者是必须等待所有的东西加载完毕才能执行,不同点二是前者支持同时编写多个,而后者编写多个就无法正确执行,不同点三是前者还支持简化写法$(function(){})


小小项目:


<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>前端开发</title>
        <style type="text/css">
            #menu {
                width: 300px;
            }
            .sub_menu {
                color: #ffffff;
                cursor: pointer;
                background-color: #555555;
            }
            div {
                padding: 0;
                margin: 1px 0;
            }
            div a {
                background: #888888;
                display: none;
                float: left;
                width: 300px;
            }
            .highlight {
                color: #ffffff;
                background-color: green;
            }
        </style>
    </head>
        <div id="menu">
            <div class="sub_menu">
                <span>第1章 - 认识JQuery</span>
                <a href="">1.1 - Javascript和Javascript库</a>
                <a href="">1.2 - 加入JQuery</a>
                <a href="">1.3 - 编写简单JQuery代码</a>
                <a href="">1.4 - JQuery对象和DOM对象</a>
                <a href="">1.5 - 解决JQuery和其它库的冲突</a>
                <a href="">1.6 - JQuery开发工具和插件</a>
            </div>
            <div class="sub_menu">
                <span>第2章 - JQuery选择器</span>
                <a href="">2.1 - JQuery选择器是什么</a>
                <a href="">2.2 - JQuery选择器的优势</a>
                <a href="">2.3 - JQuery选择器</a>
                <a href="">2.4 - 应用JQuery改写示例</a>
                <a href="">2.5 - 选择器中的一些注意事项</a>
                <a href="">2.6 - 类似淘宝品牌列表的效果</a>
                <a href="">2.7 - 还有其它选择器吗?</a>
            </div>
            <div class="sub_menu">
                <span>第3章 - JQuery中的DOM操作</span>
                <a href="">3.1 - DOM操作的分类</a>
                <a href="">3.2 - JQuery中的DOM操作</a>
                <a href="">3.3 - 某网站超链接和图片提示效果</a>
            </div>
        </div>
    <body>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $('.sub_menu').click(function () {
                // 对点击的对象添加highlight类
                $(this).addClass('highlight')
                        .children('a')
                        .show()
                        // 重新定位到上次操作的节点
                        .end()
                        .siblings()
                        .removeClass('highlight')
                        .children('a')
                        .hide()
            })
        </script>
    </body>
</html>

说明: 如上代码简单实现了一个手风琴的效果, 通过$('.sub_menu')定位到class属性包含.sub_menu的元素,并给其绑定一个click事件,回调函数内部$(this)其实就是触发回调函数的源对象,当点击时先通过.addClass('highlight').children('a').show()展开自己的子元素,然后通过.end()重新定位到上次操作的节点$(this),然后通过.siblings()..removeClass('highlight') .children('a').hide()让其它兄弟元素不高亮且子元素隐藏.


两种对象:


1. DOM对象是文档原生对象模型,只能通过原生的方法对其添加/删除/查询/修改,不能使用JQuery对象下的任何方法

2. JQuery对象是基于DOM对象封装的对象,可以通过JQuery特有的方法对齐添加/删除/查询/修改,不能使用DOM对象下的任何方法.

3. DOM对象变量声明常定义为var xm = 10,JQuery对象变量声明常定义为var $xm = 10,这个是约定俗称的规定.

4. DOM对象可以通过$()转换为JQuery对象,从此遍可以使用JQuery对象的方法,反之JQuery对象也可以通过[]或get()转换为DOM原生对象,从此便可使用DOM对象的方法


<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>前端开发</title>
    </head>
    <body>
        <div id="container">
            asdasdas
        </div>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            // 将JQuery对象转换为DOM对象
            var $div = $('#container')
            var div = $div[0]
            console.log(div)
            var div = $div.get(0)
            // 将DOM对象转换为JQuery对象
            var div = document.getElementById('container')
            var $div = $(div)
            console.log($div)
        </script>
    </body>
</html>



推荐阅读:
  1. jQuery中能使用PHP方法吗?
  2. jquery常用示例

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery 网站前端 ue

上一篇:微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)

下一篇:java序列化与ObjectOutputStream和ObjectInputStream的实例详解

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》