20 JQuery基础

目录

概念

其实就是封装了一些js代码，简化了书写

$符就是一个函数的函数名

JQuery版本

1.x：

2.x：

3.x：

js和jq的区别

基本操作

事件绑定

入口函数

样式控制

选择器

层级选择器

属性选择器

过滤选择器

DOM操作

内容操作

属性操作

prop()和attr()区别

toggleClass()

CURD操作

js中的this

---

1. 概念

   1. 其实就是封装了一些js代码，简化了书写

   2. $符就是一个函数的函数名

2. JQuery版本

   1. 1.x：

      1. 可以用，但不用

   2. 2.x：

      1. 很少有人用

   3. 3.x：

      1. 我们使用这个
      2. 官方主要维护这个

3. js和jq的区别

   1. js : innerHTML()  jq : html()
   2. js : value()  jq : val()

4. 基本操作

   1. 事件绑定

      1. 事件函数名没有“on”了
      2. 事件函数传递的参数是匿名函数体

   2. 入口函数

      1. 和window.onload() 功能一样，都是在在页面加载完成之后执行js代码
      2. 有区别
         1. window.onload() 只能执行一个
         2. 入口函数可以写好多个，而且都会生效

   3. 样式控制

      1. $("#div1").css("background-color","red");
         1. js写法
      2. $("#div1").css("backgroundColor","pink");
         1. jq写法
         2. 把鼠标放到backgroundColor上面可以检查自己写的对不对

5. 选择器

   1. 层级选择器

      1. 后代选择器
         1. 儿子孙子都会被选中
      2. 子选择器
         1. 只选中儿子

   2. 属性选择器

      1. 可以选择属性值以什么开始或者以什么结束的标签
      2. 多个属性需要用 []、[] 隔开

   3. 过滤选择器

      1. 加 : 的都是过滤选择器
      2. 可以改变奇偶行颜色
      3. 通过索引值可以改变获取到的标签中的具体的某一个

6. DOM操作

   1. 内容操作

      1. text() 获取标签内部所有的纯文本内容
      2. text("asd") 会把标签内部的所有内容(标签、文本)全部替换为“asd”

   2. 属性操作

      1. prop()和attr()区别

         1. 设置自定义属性使用attr
         2. 设置标签自带属性使用prop
            1. 有些属性的值使用attr是获取不到的(selected, checked)

      2. toggleClass()

         1. 切换css属性
         2. 如果有属性值就删除, 没有就添加
         3. div1.toggleClass("class1")

   3. CURD操作

      1. append是父子级操作
      2. after, before是兄弟级操作

7. js中的this

   1. 在js的函数中, this代表调用这个函数的对象