zoukankan      html  css  js  c++  java
  • 初识jQuery

    jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。

    一、jQuery的用途

      01、访问和操作DOM元素    提供了一整套方便、快捷的方法来实现对指定元素的增删改查,既减少了代码量,又提高用户体验

      02、控制页面样式       方便的控制页面的CSS文件

      03、对页面事件的处理     css()、addClass()、removeClass()、toggleClass()

      04、方便的使用jQuery插件   jQuery UI插件库、Form插件、Validate插件

      05、与Ajax技术的完美结合

    二、jQuery的优势

      01、轻量级:体积小

      02、强大的选择器:几乎支持所有css选择器,jQuery还有自定义的特有选择器

      03、出色的DOM封装:封装了大量的DOM操作

      04、可靠的事件处理机制:吸收了JavaScript事件处理函数的精华,使得jQuery在处理事件绑定是非常可靠

      05、出色的浏览器兼容性:jQuery能够同时兼容多种浏览器,使显示效果在个浏览器之间没有差异

      06、隐式迭代:能同时操作所匹配的对象集合,无需遍历

      07、丰富的插件支持:jQuery的易扩展性,吸引全球开发者编写jQuery的扩展插件,

    三、配置jQuery环境

      01、获取jQuery的最新版本(进入官网 http://jquery.com)下载

      02、开发版:用于测试、学习和开发

        发布版:(min)用于发布的产品和项目(也叫压缩版)

      03、引用:只要用<script>标签引入即可,注意多个<script>标签的顺序

    四、jQuery语法结构

      $(selector).action();    包含三大部分:工厂函数、选择器、方法

           $()---工厂函数

        selector---选择器

       action()---方法

    ·五、jQuery程序的代码风格

      01、“$”的使用

        它是jQuery的标志,即$等同于jQuery,也就是说$(document).ready()==jQuery(document).ready()

        $(function(){...})==jQuery(function(){...})

      02、链式操作

        采用链式编程模式,来减少不必要的重复代码。举例而言,下方的next()的使用(诸如prev()、siblings()、parent().....)

        $("h1").css("color","red").next().css("display","block");  

      03、隐式迭代

        $("p").css("backgruond-color","blue')  会将所有的p标签的北京设置为蓝色

      04、添加注释

        开发阶段:增加代码的可读性,便于后期维护

        维护阶段:把关键的模块形成开发文档,便于后期维护,即便删除代码注释,还可以通过文档得到关键信息

        产品正式发布:删除注释,减少文件大小,加快下载速度,提高用户体验

     六、DOM对象和jQuery对象

      01、两者的方法不能混用

        jQuery对象就是通过jQuery包装DOM对象后产生的对象,它能够使用jQuer中的方法。

        jQuery对象无法直接使用DOM对象的任何方法,同样DOM对象也无法直接使用jQuery对象的任何方法

      02、相互转换

        jQuery对象转换成DOM对象

          [index]方法:     var $txtName=$("#txtName");  //jQuery对象

                    var txtName=$txtName.[0];    //DOM对象

          get(index)方法:   var $txtName=$("#txtName")

                    var txtName=$txtName.get(0);

        DOM对象转换成jQuery对象

          工厂函数$():var txtName=document.getElementById("txtName");  //DOM对象

                var $txtName=$(#txtName)    //jQuery对象

  • 相关阅读:
    goj 来自不给标题的菜鸟出题组(巴什博弈+素数判定)
    goj 城市交通线(简单并查集)
    ACM_鸡兔同笼(二元一次方程)
    ACM_魔仙岛探险(深搜)
    ACM_螺旋填数
    ACM_开心消消乐
    构建工具是如何用 node 操作 html/js/css/md 文件的
    学习使用ExpressJS 4.0中的新Router
    请求时token过期自动刷新token
    Express的基本使用
  • 原文地址:https://www.cnblogs.com/vic_/p/7827757.html
Copyright © 2011-2022 走看看