Samuelyo12
Samuelyo12

jQuery-1

day01: 基础--选择器、属性和CSS、文档处理
day02: 高级--筛选、事件、效果、ajax

  1. jQuery介绍

    1. JS类库

  • JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

    1. 当前流行的 JavaScript 库有：

  • jQuery ，最流行
  • EXT_JS，2.0开始收费
  • Dojo ，很多js单独文件，优化：打包。（常见：开发小图标，一张图片）
  • Prototype，对js扩展，框架开发。
  • YUI(Yahoo! User Interface) ，taobao之前使用。
  • 淘宝UI：http://docs.kissyui.com/
  • Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。基于jQuery 一个UI工具

    1. jQuery介绍

  • JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
  • 轻量级：依赖程序少，占用的资源的少
  • 特点：js代码和html代码分离
  • jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
  • 由美国人John Resig在2006年1月发布
  • jQuery是免费、开源的
  • jQuery分类：
       WEB版本：我们主要学习研究
       UI版本：集成了UI组件
       mobile版本：针对移动端开发
       qunit版本：用于js测试的

    1. 版本介绍

    1. 优点

  • 核心理念是write less,do more(写得更少,做得更多)
       
  • 轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。
  • 兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
  • jQuery的语法设计可以使开发者更加便捷
  • 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
  • jQuery能够使用户的html页面保持代码和html内容分离
  • 不用再在html里面插入一堆js来调用命令了，只需要定义id即可
  • jQuery提供API让开发者编写插件，有许多成熟的插件可供选择
  • 文档说明很全

  1. 基本语法

    1. jQuery语法

   <script type="text/javascript">
      //js 执行时，有加载顺序
      
      /* jQuery获得数据
       * * 语法：$("选择器")   == jQuery("选择器")
       *
       */
      
      var username = $("#username");
      // * val()函数 用于获得 value属性的值
      alert(username.val());
      
   script>

    1. jQuery对象和dom对象转换

<script type="text/javascript">
        //1 使用javascript获得value值
        var username = document.getElementById("username");
        //alert(username.value);
        
        //2 将 dom对象 转换 jQuery对象
        // * 语法：$(dom对象)
        // * 建议：jQuery对象变量名，建议为$开头
        var $username = $(username);
//      alert($username.val());
        
        //3 将 jQuery对象 转换 dom对象
        //3.1 jQuery对象内部使用【数组】存放所有的数据，可以数组的下标获取（索引）
        var username2 = $username[0];
        alert(username2.value);
        //3.2 jQuery提供函数 get() 转换成dom对象
        var username3 = $username.get(0);
        alert(username3.value);
    script>

  1. 选择器

    1. 基本【掌握】

#id ， id选择器， 通过id值获得元素
element，标签选择器， 通过标签名获得元素
.class ，类选择器， 通过class值获得元素。注意：使用点开头
s1,s2,...  多选择器，将多个选择器的结果添加一个数组中。
--------------------------------------------
*     所有

    1. 层级

A  B ，获得A元素内部所有的B后代元素。（爷孙）
A > B ，获得A元素内部所有的B子元素。（父子）
A + B ，获得A元素后面的第一个兄弟B。（兄弟）
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）

    1. 基本过滤

  • 过滤选择器格式 “：关键字”
:first        , 第一个
:last         ,最后一个
:eq(index) ，获得指定索引
:gt(index) 大于
:lt(index) 小于
:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）
:odd 奇数
:not(selector) 去除所有与给定选择器匹配的元素
------------------------------
:header  获得所有标题元素。例如：

...

:animated  获得所有动画
:focus     获得焦点

    1. 内容过滤

:empty  当前元素是否为空（是否有标签体--子元素、文本）
:has(...)  当前元素，是否含有指定的子元素
:parent     当前元素是否是父元素
:contains( text ) 标签体是否含有指定的文本

    1. 可见性过滤[掌握]

:hidden    隐藏。特指   ，获得
:visible     可见（默认）

    1. 属性【掌握】

[属性名]                      获得指定的属性名的元素
[属性名=值]                 获得属性名 等于 指定值的 的元素【1】
[属性名!=值]               获得属性名 不等于 指定值的 的元素
[as1][as2][as3]....         复合选择器，多个条件同时成立。类似 where ...and...and【2】
---------------------------------------
[属性名^=值]               获得以属性值 开头 的元素
[属性名$=值]               获得以属性值 结尾 的元素
[属性名*=值]               获得 含有属性值  的元素

    1. 子元素过滤

:nth-child(index)  ，获得第几个孩子，从1开始。
:first-child ， 获得第一个孩子
:last-child ， 获得最后孩子
:only-child ， 获得独生子

    1. 表单过滤

:input  所有的表单元素。（ /