初识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对象

原文地址:https://www.cnblogs.com/vic_/p/7827757.html