JQuery

JQuery基础

1. 概念：一个JavaScript框架。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

本质上就是一些js文件，封装了js原生代码而已

2. 快速入门

   1. 步骤
      1. 下载JQuery
         jquery.js：开发版本。给程序员看的，有良好的缩进和注释，体积大一些
         jquery.main.ja：生产版本。程序中使用，没有缩进。体积小一些，读取更快
      2. 导入JQuery的js文件：jquery.main.js
      3. 使用JQuery 如：
         

3. JQuery对象和JS对象区别与转换

   1. JQuery对象在操作时，更加方便
   2. Jquery对象和js对象方法不通用
   3. 两者相互转换：

      1. jq转js：jq对象[索引] 或者 jq对象.get(索引)

      2. js转jq：$(js对象)

4. 选择器：筛选具有相似特征的元素（标签）

   1. 基本语法学习：

      1. 事件绑定

      2. 入口函数（）

         1. window.onload和$(function)的区别
            window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉
            $(function)可以定义多次

      3. 样式控制

   2. 分类

      1. 基本选择器

         1. 标签选择器（元素选择器）
            *语法：$("html标签名")获得所有匹配标签名称的元素

         2. id选择器
            *语法：$("#id的属性值") 获得与指定id匹配的元素

         3. 类选择器
            *语法：$(".class的属性值")获得与指定class属性值匹配的元素

         4. 并集选择器
            *（选择器1,选择器2）获取多个选择器中的元素

      2. 层级选择器

         1. 后代选择器
            *语法：$("A B ")选择A元素内部的所有B元素

         2. 子选择器
            *语法：$("A > B")选择A元素内部的所有B子元素,不包含孙子辈

      3. 属性选择器

         1. 属性名称选择器
            *语法：$("A[属性名]")包含指定属性的选择器

         2. 属性选择器
            *语法：$("A[属性名='值']")包含指定属性等于指定值的选择器

         3. 符合属性选择器
            *语法：$("A[属性名='值'][][]...")包含多个属性条件的选择器

      4. 过滤选择器

         1. 首元素选择器
            *语法：:first 获得选择的元素的第一个元素

         2. 尾元素选择器
            *语法：:last 获得选择的元素的最后一个元素

         3. 非元素选择器
            *语法：:not(selecter) 不包括指定内容的元素

         4. 偶数选择器
            *语法：:even 偶数，从0开始计数

         5. 奇数选择器
            *语法：:odd奇数，从0开始计数

         6. 等于索引选择器
            *语法::eq(index)指定索引元素

         7. 大于索引选择器
            *语法：:gt(index)大于指定索引元素

         8. 小于索引选择器
            *语法："(index)小于指定索引元素

         9. 标题选择器
            *语法：:header 获得标题元素，固定写法

      5. 表单过滤选择器

         1. 可用元素选择器
            • 语法：:enabled 获得可用元素
         2. 不可用元素选择器
            • 语法：:disabled 获得不可用元素
         3. 选中选择器
            • 语法：:checked 获得单选/复选框选中的元素
         4. 选中选择器
            • 语法：:selected 获得下拉框选中的元素

      DOM操作
      6. 内容操作
      1. html():获取/设置元素的标签体内容 <a><font>内容</font></a> -----> </font>内容</font>
      2. text();获取/设置元素的标签体纯文本内容
      3. val();
      8. 属性操作
      9. CRUD操作