jQuery高级

以你之姓@ 2021-12-22 13:09 238阅读 0赞

# 一、常用事件： #

1、focus事件 获取焦点事件，一般不在这个事件上绑定函数，一般作为让输入框自动或的焦点的方式使用，写法：$input.focus( )  
2、mouseover 和 mouseout 鼠标移入移出事件 移入子元素也会触发  
3、mouseenter 和 mouseleave 鼠标移入移出事件 移入子元素不会触发  
4、hover 可以将mouseenter 和 mouseleave事件合并在一起写，写法：  
$input.hover(function()\{ mouseenter的操作 \},function()\{ mouseleave的操作 \})

# 二、事件冒泡 #

什么是事件冒泡  
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。  
事件冒泡的作用  
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。  
阻止事件冒泡  
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止  
原理：元素发生事件后，会将这个事件传递父级，父级还会往上传递，一直传递到最顶级标签，一般最顶级标签写成$(document)  
阻止事件冒泡：return false

# 三、事件委托 #

原理：利用事件冒泡的特性，将事件绑定在父级上，子集发生的事件都会冒泡到父级，父级通过判断子级的特征给它特定的操作。  
写法： KaTeX parse error: Expected '\}', got 'EOF' at end of input: …nction()\{ 这里的(this)指的是当前冒泡的子级 \})  
事件委托的写法的案例：

$(function(){ 
        $list = $('#list');
        $list.delegate('li', 'click', function() { 
            $(this).css({ background:'red'});
        });
    })
    ...
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

四、Dom操作（也叫作节点操作）  
元素节点操作指的是改变html的标签结构，它有两种情况：  
1、移动现有标签的位置  
2、将新创建的标签插入到现有的标签中  
1、append 和 appendTo  
2、prepend 和 prependTo  
3、after 和 inserAfter  
4、before 和 insertBefore  
5、remove 删除节点

$('#div1').remove();

五、javascript对象  
javascript中的对象，可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。  
创建javascript对象有两种方法，一种是通过顶级Object类来实例化一个对象，然后在对象上面添加属性和方法：

var person = new Object();
    
    // 添加属性：
    person.name = 'tom';
    person.age = '25';
    
    // 添加方法：
    person.sayName = function(){ 
        alert(this.name);
    }
    
    // 调用属性和方法：
    alert(person.age);
    person.sayName();

还可以通过对象直接量的方式创建对象：

var person2 = { 
        name:'Rose',
        age: 18,
        sayName:function(){ 
            alert('My name is' + this.name);
        }
    }
    
    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();

# 六、json #

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式对象，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。  
json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。  
与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。  
json格式的数据：

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

json的另外一个数据格式是数组，和javascript中的数组字面量相同。

["tom",18,"programmer"]

还可以是更复杂的数据机构：

{ 
        "name":"jack",
        "age":29,
        "hobby":["reading","travel","photography"]
        "school":{ 
            "name":"Merrimack College",
            "location":'North Andover, MA'
        }
    }

# 七、ajax #

ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。  
ajax需要在服务器环境下运行。  
$.ajax使用方法  
常用参数：  
1、url 请求地址  
2、type 请求方式，默认是’GET’，常用的还有’POST’  
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’  
4、data 设置发送给服务器的数据  
5、success 设置请求成功后的回调函数  
6、error 设置请求失败后的回调函数  
7、async 设置是否异步，默认值是’true’，表示异步  
以前的写法：

$.ajax({ 
        url: '/change_data',
        type: 'GET',
        dataType: 'json',
        data:{ 'code':300268}
        success:function(dat){ 
            alert(dat.name);
        },
        error:function(){ 
            alert('服务器超时，请重试！');
        }
    });

新的写法(推荐)：

$.ajax({ 
        url: '/change_data',
        type: 'GET',
        dataType: 'json',
        data:{ 'code':300268}
    })
    .done(function(dat) { 
        alert(dat.name);
    })
    .fail(function() { 
        alert('服务器超时，请重试！');
    });

$.ajax的简写方式  
 . a j a x 按 照 请 求 方 式 可 以 简 写 成 .ajax按照请求方式可以简写成 .ajax按照请求方式可以简写成.get或者$.post方式

$.get("/change_data", { 'code':300268},
      function(dat){ 
        alert(dat.name);
    });
    
    $.post("/change_data", { 'code':300268},
      function(dat){ 
        alert(dat.name);
    });

### 同步和异步 ###

现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。  
局部刷新和无刷新  
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。  
数据接口  
数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。