后浪小萌新jQuery ---jQuery基础

一、什么是jQuery

jQuery是使用js封装的一个库，本质就是一个js文件。
通过jQuery类的对象来提供功能，能够让DOM操作变得很简单.

二、怎么使用jQuery

1. 导入jQuery

   本地：
   <script src=“js/jquery.min.js” type=“text/javascript” charset=“utf-8”></script>

   远程：
   <script src=“https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js” type=“text/javascript” charset=“utf-8”></script>

2. 怎么用
   jQuery中：$就是jQuery类， $()就是jQuery对象

   jQuery对象的本质就是像数组一样的容器对象，容器中的元素是标签对应的节点对象, 除了元素以外还有额外的属性和方法。

三、jQuery的DOM操作

1. 获取节点

   $(css选择器) - 获取css选择器中的标签

注意：对jQuery对象进行的节点操作，会作用于jQuery对象中所有的节点

2. 创建节点和添加

   1. 创建节点

      $(html代码)

   2. 添加节点

      节点对象1.append(节点对象2) - 在节点1的最后添加节点2（节点1和节点2是父子关系）

      节点对象1.prepend(节点对象2) - 在节点1的最前面添加节点2 （节点1和节点2是父子关系）

      节点对象1.after(节点对象2) - 在节点1的后面插入节点2（节点1和节点2是兄弟关系）

      节点对象1.before(节点对象2) - 在节点1的前面插入节点2（节点1和节点2是兄弟关系）

   3. 删除

      节点对象.remove()

   4. jQuery对象和js对象的转换

      jQuery对象是容器对象，容器中元素就是标签对应的节点对象，本质就是js对象

      1. jQuery对象转换成js对象: 取出jQuery容器中的元素

      2. js对象转换jQuery对象：$(js对象)

   5. 事件绑定

      1. jQuery节点对象.on(事件名, 函数) - 直接给指定标签绑定事件
      2. jQuery节点对象.on(事件名, 选择器, 函数) - 给指定标签中通过选择器选中的子标签绑定事件
         既 父节点.on(事件名, 子节点选择器, 函数)

   6. 获取节点

      1. 获取父子节点
         节点对象.parent()

         2.获取所有的子节点
         节点对象.children()

   7. 属性操作

      1.标签内容
      节点对象.text()
      节点对象.html()

      2.value属性
      节点对象.val()

      3.class属性
      节点对象.addClass(class值)
      节点对象.removeClass(class值)

      4.样式
      节点对象.css(“css的属性名”, “css属性值”)
      节点对象.css({
      css的属性名: “css属性值”,
      css的属性名: “css属性值”
      })

      注意: 属性名用驼峰式

      节点对象.css({
      “css的属性名”: “css属性值”,
      “css的属性名”: “css属性值”
      })

      注意: 加""里的属性名和CSS一样

      5.普通属性
      节点对象.attr(‘属性名’, ‘属性值’)