1.jquery概述

来源：互联网发布：zsmj淘宝店编辑：程序博客网时间：2024/06/05 07:05
<!DOCTYPE html><html>    <!--        jQuery        jquery是一个开源的javascript库，封装了很多预定的对象和实用函数。        利用jquery，可以方便（写的更少，做的更多）的处理html文档，时间和实现动画效果，与ajax交互和创建富有特性的页面。        1.主要特点：            轻量级的javascript框架，压缩后也就几千字节，不影响页面加载速度。            jquery的选择器使用方便，便于操作DOM。            jquery的魅力所在：链式操作，允许将多个操作写在一句代码中。            jquery简化了对ajax的操作。            jquery兼容大部分主流浏览器            jquery第三方插件丰富，实现例如树型菜单，日期时间控件等简单。        2.jquery用来            HTML元素的选取            HTML元素的操作            CSS操作            HTML事件函数            javascript动画效果            HTML DOM的遍历和修改            更加便利 的使用ajax        3.jquery的两个版本            已经压缩精简（例如:jquery-3.1.1.min.js）,用于实际生产环境            未压缩j（例如:query-3.1.1.js）,用于开发测试，源代码可见        4.jquery的使用            放在服务器上，直接在页面通过script标签引入（<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>）            通过CDN引入，使用一些大公司的cdn引入jquery库文件（效果佳，减轻自己服务器负担，由于用户可能在其他地方已经使用过，缓存是一个很不错的东西）        5.杂项：        jquery使用$作为jQuery的简写（$("p")和jQuery("p")的意义完全一样），其他脚本和$冲突的时候，可以使用$.noConfilct()来释放$,这样其他就可以使用$符了，        也可以自己创建一个简写，var jq = $.noConflict();将返回对jquery的引用。        6.jquery的语法            jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。                基础语法是：$(selector).action()                美元符号定义 jQuery                选择符（selector）“查询”和“查找” HTML 元素                jQuery 的 action() 执行对元素的操作        7.文档就绪函数            $(document).ready(function(){//文档加载就绪                --- jQuery code ----                });            或者            $(function(){//文档加载就绪                --- jQuery code ----            });            所有的jquery代码都位于document ready函数中，这是为了防止在文档完全加载就绪前运行jquery代码    -->    <head>        <meta charset="UTF-8">        <title>jquery概述</title>        <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(document).ready(function() {                alert("hello jquery")                $("button").click(function() {                    if($("p").is(':visible')) {                        $("p").hide();                    } else {                        $("p").show();                    }                });            });            //使用自己创建的jquery简写            //          var jq = $.noConflict();            //          jq(document).ready(function() {            //              alert("hello jquery");            //          });            //            //使用jquery            //          jQuery(document).ready(function() {            //              alert("hello jquery");            //          });        </script>    </head>    <body>        <button type="button">button</button>        <p>这是一个段落，点击按钮会隐藏</p>    </body></html>
0 0