本文共 2122 字，大约阅读时间需要 7 分钟。

jQuery

事件冒泡

什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，返回一个false即可

事件委托:

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操

• 事件委托的用法

  关键字:delegate

  $(选择器).delegate(事件委托对象,事件类型，匿名函数命令及事件触发后执行的函数)

• 事件委托的好处

  • 可极大减少事件绑定次数，提高性能
  • 可让动态加入的子元素绑定相同的命令

    
      
   
        
    
文字1
        
    
文字2
        
    
文字3
    
   

DOM操作

1. DOM 文档对象模型 document object model

js内置的一个结构化表现手法，通过这个结构化表现手法把所有的标签实现了一个倒置的树状结构图

2. 节点 (node)

标签(html)元素(javascript)节点(dom)

节点与节点的关系：

• 同级关系
• 子级关系

3.节点常用操作

• 追加节点

  首先要创建节点， 再把新创建的节点追加到指定位置

  • 在子级位置追加

    • append() ： 在子级的尾部追加

      $(选择器).append(新建节点)

    • appendto() : 在子级的尾部追加

      $(新建节点).appendto(目的地)

    • prepend() ： 在子级的首部追加

      $(选择器).prepend(新建节点)

    • prependto() : 在子级的首部追加

      $(新建节点).prependto(目的地)

  • 在同级位置追加

    • after() ： 在同级的下面追加

      $(选择器).after(新建节点)

    • insertAfter() : 在指定节点的后面追加

      $(新建节点).insertAfter(目的地)

    • before() ： 在同级的前面追加

      $(选择器).before(新建节点)

    • insertBefore() : 在指定节点的前面追加

      $(新建节点).insertBefore(目的地)

• 移动节点

  首先找到要移动的节点，在把节点插入到指定位置

  • insertAfter() ： 移动到指定位置的后面

    $(选择器).insertAfter(目的地)

  • insertBefore() ： 移动到指定位置的前面

    $(选择器).insertBefore(目的地)

• 删除节点 remove()

  $(选择器).remove()

• 清空节点empty()

  $(选择器).empty()

​

4.节点操作案例

javascript对象

js中使用对象的方式与python一样，但是创建对象的语法不同

• js对象创建及使用

  • 创建方式1

    var 变量名=new object()

  • 创建方式2

    var 变量名={key1:值1,key2:值2}

• js对象体验

JSON数据格式

JSON是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法,是目前主流的数据格式，主要用于与服务端数据交换

• JSON数据格式定义

  {"key1":值1，"key2":值2...}

  • JSON 中的键对应的值是没有函数方法的

  • JSON中的键名称和字符串值需要用双引号引起来

    {
               "name":"tom",    "age":18}

• json字符串， json对象与js对象的区别

  • javascript对象：javascript中，除开JavaScript原始值(字符串，数字，布尔值，null，正则表达式)的都是javascript对象

  • JSON对象：可以理解为使用基于JSON语法格式的javascript对象

  • JSON字符串：符合JSON语法格式的字符串

ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

• ajax技术的目的

  是让js发送http请求，实现与服务端通信，即数据交互

• ajax的两个主要好处

  • 异步请求
  • 局部刷新(无刷新)
  • ajax不支持访问本地文件
  • 不支持连接操作数据库

• 数据接口：

  数据接口是后台提供的，是一个url地址，通过访问该url，实现对服务端数据的增删改查操作，服务端一般返回的的数据以json格式封装

• ajax请求格式

转载地址：https://blog.csdn.net/weixin_43250623/article/details/90381737 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！