web前端(七)——jquery高级

事件冒泡

  事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。(注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。)

 

下面这段代码一共有四个事件都分别绑定了单击事件。

  在页面中当单击a标签会连续弹出4个提示框。这就是事件冒泡引起的现象。

  事件冒 泡的过程是:a --> p--> div-->window。a冒泡到div冒泡到body。

 <script> $(function () { var $box1 = $(‘.father‘); var $box2 = $(‘.son‘); var $box3 = $(‘.grandson‘); $box1.click(function () { alert(‘father‘); }); $box2.click(function () { alert(‘son‘); }); $box3.click(function (event) { alert(‘grandson‘); }); $(document).click(function (event) { alert(‘grandfather‘); }); }) </script></head><body>
<div class="father">
<p class="son">
<a class="grandson">点我</a>
</p>
</div>

 

 

阻止事件冒泡 

  事件冒泡机制有时候是不需要的,需要阻止掉,通过 return false;来阻止

<head> <script> $(function () { var $box1 = $(‘.father‘); var $box2 = $(‘.son‘); var $box3 = $(‘.grandson‘); $box1.click(function () { alert(‘father‘); }); $box2.click(function () { alert(‘son‘); }); $box3.click(function () { alert(‘grandson‘); return false; }); }) </script><body><div class="father"> <p class="son"> <a class="grandson">点我</a> </p></div>

 

 

 

 

事件委托

  事件委托又叫事件代理,就是利用冒泡的原理,把事件加到父级上.

  通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能

  其次可以让新加入的子元素也可以拥有相同的操作

 

$(function(){ $list = $(‘#list‘);
  //delegate(子元素,事件,函数) $list.delegate(
‘li‘, ‘click‘, function() { $(this).css({background:‘red‘}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li></ul>

 

 

何为事件委托

有三个同事预计会在周一收到快递。为签收快递,有两种办法:

  一是三个人在公司门口等快递;

  二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的:

  第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的;

  第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。

 

 

 

Dom操作

  元素节点操作指的是改变html的标签结构,它有两种情况:
    1、移动现有标签的位置
    2、将新创建的标签插入到现有的标签中

 

 

创建新标签

var $div = $(‘<div>‘); //创建一个空的divvar $div2 = $(‘<div>这是一个div元素</div>‘);

 

 移动或者插入标签

   1、append()和appendTo():在现存元素的内部,从后面放入元素

var $span = $(‘<span>这是一个span元素</span>‘);$(‘#div1‘).append($span);......<div id="div1"></div>

  2、prepend()和prependTo():在现存元素的内部,从前面放入元素

  3、after()和insertAfter():在现存元素的外部,从后面放入元素

  4、before()和insertBefore():在现存元素的外部,从前面放入元素

 

 删除标签

$(‘#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();//2,还可以通过对象直接量的方式创建对象var person2 = { name:‘Rose‘, age: 18, sayName:function(){ alert(‘My name is‘ + this.name); }}// 调用属性和方法:alert(person2.age);person2.sayName();

 

 

json

json是一种轻量级的数据交换格式。易于人阅读和编写。

json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持undefined,值还可以是数组或者json对象

json对象的属性名称字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误

 

json格式的数据

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

 

json的另外一个数据格式是数组

["tom",18,"programmer"]

 

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

 

 

JSON 和 JS 对象互转

要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:

var json = JSON.stringify({a: ‘Hello‘, b: ‘World‘}); //结果是 ‘{"a": "Hello", "b": "World"}‘

 

要实现从 JSON 转换为对象,使用 JSON.parse() 方法:

var obj = JSON.parse(‘{"a": "Hello", "b": "World"}‘); //结果是 {a: ‘Hello‘, b: ‘World‘}

 

相关文章