0709-jQuery

0709jQuery

1. 什么是jquery？

他就是已给js的类库,对原生的js进行了进一步的封装

write less, do more

2. jquery快速入门

1. jquery的使用方式

• 1. 必须在html页面中先引入该js类库

2. jquery的调用方式

• $(“xxxx”)

3. jquery的html方法-重点掌握

• 用来替换js的innerHTML属性的

3. jquery的基本语法

1. js对象和jquery对象的转换-重点掌握

• js对象转换为jquery对象

  • let jqueryObject = $(jsObject);

• jquery对象转换为js对象

  • 使用数组下标的形式

    • JqueryObject[0]

  • 使用get方法的形式

    • jqueryObject.get(0)

2. jquery的事件绑定-重点掌握

• 1. jquery的封装-到底给你封装了些什么？
  • 把原生的js的属性都封装成了对应的方法
• 2. jquery的事件封装
  • 把原生的.onxxx属性封装成了对应的方法-方法名字就是去掉了on以后的名字
• 3. 案例
  • //单击事件
    $("#btn").click(function(){
    alert(“点我干嘛?”);
    });
• 4. 事件的动态绑定和解绑

  • 绑定

    • $("#id").on(“事件名称”,function(){})

  • 解绑

    • $("#id").off([‘事件的名称’])

      • 如果off不传递任何参数,那么他会解绑当前元素上绑定的所有的事件-危险的操作
      • 如果传递参数,则解绑指定的事件
      • 建议：使用off的时候一定要带上参数,避免影响到其他的事件
• 5. 多事件的绑定
  • 1. 单个事件一个一个的绑定
  • 2. 使用链式编程的形式进行事件的绑定推荐使用第二种
    • $("#div").mouseover(function(){
      $(this).css(“background”,“red”);
      }).mouseout(function(){
      $(this).css(“background”,“blue”);
      });

3. jquery的遍历

• 1. for循环的原生遍历必须要掌握的
• 2. each方法的遍历重点掌握
  • $("#btn").click(function(){
    let lis = $(“li”);
    lis.each(function(index,ele){
    alert(index + “:” + ele.innerHTML);
    });
    });
• 3. 全局的遍历方式能看懂即可
  • $.each(“数组”,funcation(index,ele){})
• 4. 增强的for循环能看懂即可
  • for(ele of lis){
    alert(ele.innerHTML);
    }

4. jquery的选择器

1. 基本选择器-重点掌握

• 1. id选择器
  • $("#id")
• 2. 标签选择器
  • $(“标签的名字”)
• 3. 类选择器
  • $(".class属性的值")

2. 层级选择器-掌握

• 1.后代选择器- “空格”

​ let spans1 = $(“div span”);

• 2. 子集选择器- “>”

     let spans2 = $(“div > span”);

• 3. 兄弟选择器 - “+”

     let ps1 = $(“div + p”);

• 3. 所有兄弟的选择器-"~"

     let ps2 = $(“div ~ p”);

3. 属性选择器-掌握

• 1. 查找某一个标签里面拥有某一个或者某几个属性的标签
  • let in1 = $(“input[type]”);
• 2. 查找某一个标签拥有某一个后者某几个属性并且值为XXX的标签
  • $(“input[type=‘password’]”)

4. 过滤选择器

• 1.首元素选择器

  • $(“div:first”)
• 2. 尾元素选择器
  • $(“div:last”)
• 3. 非元素选择器
  • $(“div:not(#div2)”)

• 4.偶数选择器

  • $(“tr:even”)

• 5.奇数选择器

  • $(“tr:odd”)

• 6.等于索引选择器

  • $(“tr:eq(0)”)

• 7.大于索引选择器

  • $(“tr:gt(1)”)

• 8.小于索引选择器

  • $(“tr:lt(1)”)

5. 表单属性选择器-重点掌握

• 1.可用元素选择器了解

  • $(“input:enabled”)

• 2.不可用元素选择器

  • $(“input:disabled”)

• 3.单选/复选框被选中的元素

  • $(“input:checked”)

• 4.下拉框被选中的元素非常容易写错,写的时候务必注意

  • $(“select option:selected”)

5. jquery操作DOM元素

1. 操作文本类型的元素-重点掌握

• 获取文件内容

  • .html()

• 设置文本内容

  • .html(“xxxx”)

2. 操作DOM节点-重点掌握

• 0. 创建节点对象
  • $(“标签的完整内容”)
  • let span = $(“span”);
• 1. 在父元素的最后一个位置添加某一个节点

  • 父元素调用的方法

    • $("#div").append(span)

  • 子元素调用的方法

    • KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲jy").appendTo(("#city"))
• 2. 在父元素的第一个位置添加某一个节点

  • 父元素调用的方法

    • KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲city").prepend(("#jy"))

  • 子元素调用的方法

    • KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲jy").prependTo(("#city"))

  • 建议选择一组来掌握

• 3. 在指定的元素上添加节点

  • 添加在当前节点的前面

    • KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲sh").before(("#xq"))

  • 添加到当前节点的后面

    • KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲sh").after(("#xq"))

  • 注意点：当前调用api的对象是兄弟节点

• 4. 节点的删除
  • 1. 删除单一的某一个节点
    • $("#xq").remove();
    • 注意：跟js不一样,js必须是父元素删除子元素,jq支持的是自杀
  • 2. 删除所有的节点
    • $("#desc").empty();
    • 注意:调用api的是父元素,同时删除以后父元素任然存在

3. 操作样式

• 1.获取或设置单一的某一个css属性

  • 获取

    • $("#div").css(“border”)

  • 设置

    • $("#div").css(“background”,“blue”)
• 2. class属性的设置和删除-重点掌握

  • 添加一个class样式

    • $("#div").addClass(“cls1”)

  • 删除一个class样式

    • $("#div").removeClass(“cls1”)
• 3. class属性的动态切换掌握
  • $("#div").toggleClass(“cls1”);
  • 如果没有样式类名，则添加。如果有，则删除

4. 属性操作-重点掌握

• 1. 获取某一个属性的值

  • 常规的属性

    • $("#username").attr(“id”)

  • value属性比较特殊推荐使用val方法进行操作

    • $("#username").val()
    • $("#username").val(“hello”);
• 2. 设置某一个属性的值

  • 常规属性的设置

    • $("#username").attr(“value”,“hello…”);

  • 单选/多选/下拉菜单的设置

    • 多选和单选

      • $("#gender2").prop(“checked”,true)

    • 下拉菜单

      • $("#bk").prop(“selected”,true);