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>‘); //創建一個空的div var $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‘}
web前端(七)——jquery高級