jquery基础.md

JQuery基础

1. 概念：一个JavaScript框架。简化JS开发。

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

2. 快速入门

   1. 步骤：
      1. 下载JQuery
         • jquery-xxx.js与jquery-xxx.min.js区别
           1. jquery-xxx.js：开发版本。有良好的注释和缩进。
           2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进，体积更小，程序加载更快。
      2. 导入JQuery的js文件
      3. 使用
         • var div1=$("#div1");

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

   1. JQuery对象操作时，更加方便
   2. Jquery对象和js对象方法不通用
   3. 两者相互转换
      • jq --> js：jq对象[索引] 或 jq对象.get(索引)
      • js --> jq：$(js对象)

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

   1. 基本语法学习：

      1. 事件绑定

         //1.获取b1按钮
         window.onload = function () {
         	$("#b1").click(function () {
         		alert("abc");
         	});
         };

      2. 入口函数

         $(function(){
             
         });

         window.onload 和$(function)区别

                 *  `window.onload`只能定义一次，如果定义多次，后边的会将前面的覆盖
                 *  `$(function)`可以定义多次
         

      3. 样式控制：css方法

         // $("#div1").css("background-color","red");
         $("#div1").css("backgroundColor", "pink");

   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(selector) 不包括指定内容的元素
         4. 偶数选择器
         • 语法：:even偶数，从 0 开始计数
         5. 奇数选择器
         • 语法： :odd 奇数，从 0 开始计数
         6. 等于索引选择器
         • 语法： :eq(index) 指定索引元素
         7. 大于索引选择器
         • 语法： :gt(index) 大于指定索引元素
         8. 小于索引选择器
         • 语法： :lt(index) 小于指定索引元素
         9. 标题选择器
         • 语法： :header 获得标题（h1~h6）元素，固定写法

      5. 表单过滤选择器

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

5. DOM操作

   1. 内容操作

      1. html()：获取/设置元素的标签体内容
      2. text()
      3. val()

   2. 属性操作

      1. 通用属性操作
         1. attr()：获取/设置元素的属性
         2. removeAttr()：删除属性
         3. porp()：获取/设置元素的属性
         4. removeProp()：删除属性
            • attr和prop的区别
              1. 如果操作的时元素的固有属性，则建议使用prop
              2. 如果操作的时元素自定义的属性，则建议attr
      2. 对class属性的操作
         1. addClass()：添加class属性值
         2. removeClass()：删除class属性值
         3. toggleClass()：切换class属性值
            • toggleClass("one")：如果元素对象上存在class="one"，则删除，若果没有，则添加

   3. CURD操作

      1. append()：父元素将子元素追加到末尾

         • 对象1.append(对象2)：将对象2添加到对象1元素内部，末尾

      2. prepend()：父元素将子元素追加到开头

         • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，开头

      3. appendTo()

         • 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，末尾

      4. prependTo()：父元素将子元素追加到开头

         • 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，开头

      5. after()：添加元素到元素后边

         • 对象1.after(对象2):将对象2添加到对象1后边。兄弟关系

      6. before()

         • 对象1.before(对象2):将对象2添加到对象1前边。兄弟关系

      7. insertAfter()：添加元素到元素后边

         • 对象1.insertAfter(对象2)`:将对象1添加到对象2后边。兄弟关系

      8. InsertBefore()`

         • 对象1.InsertBefore(对象2):将对象1添加到对象2前边。兄弟关系

      9. remove()：移除元素

         • 对象.remove()：将对象删除掉

      10. empty()：清空元素的所有后代元素

      -   `对象.empty()`：将对象的后代元素全部清空，但保留当前对象及其属性节点