jQuery 基础知识(四)
前面已经介绍HTML、CSS和javaScript,这三个前端语言,俗称前端三剑客。下面来学习一个javaScript简化并封装好的库——jQuery库。
01 - JSON
JSON 是用于存储和传输数据的格式,JSON 通常用于服务端向网页传递数据 。
-
json介绍
json是 JavaScript Object Notation 的首字母缩写,翻译过来就是javascript对象表示法,这里说的json就是类似于javascript对象的字符串,它同时是一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。
-
json的格式
json有两种格式:
-
对象格式
-
数组格式
对象格式:
对象格式的json数据,使用一对大括号({}),大括号里面放入key:value形式的键值对,多个键值对使用逗号分隔。
对象格式的json数据:
{
"name":"tom",
"age":18
}
格式说明:
json中的(key)属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。
数组格式:
数组格式的json数据,使用一对中括号([]),中括号里面的数据使用逗号分隔。
数组格式的json数据:
["tom",18,"programmer"]
实际开发的json格式比较复杂,例如:
{ "name":"jack", "age":29, "hobby":["reading","travel","photography"] "school":{ "name":"Merrimack College", "location":"North Andover, MA" } }
-
json数据转换成JavaScript对象
json本质上是字符串,如果在js中操作json数据,可以将json字符串转化为JavaScript对象。所谓对象就是用大括号{}括起来的数据,可以理解成字典。
示例代码:
var sJson = '{"name":"tom","age":18}'; var oPerson = JSON.parse(sJson); // 操作属性 alert(oPerson.name); alert(oPerson.age);
要获取对象,也就是字典里面key的值,就需要用js对象名.key的方式。
说明:
-
json就是一个javascript对象表示法,json本质上是一个字符串。
-
json有两种格式:1. 对象格式, 2. 数组格式
02 - 事件代理
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
-
事件冒泡代码
<script> $(function(){ var $div1 = $('#div1'); var $div2 = $('#div2'); $div1.click(function(){ alert($(this).html()); }); $div2.click(function(){ alert($(this).html()); }); }); </script> <div id="div1" style="width:200px; height:200px; background: red;"> <div id="div2" style="width:100px; height:100px;background: yellow;"> 哈哈 </div> </div>
说明:
当点击子元素div,它的点击事件会向它父元素传递,也会触发了父元素的点击事件,这就是事件冒泡。
-
事件代理的使用
一般绑定事件的写法:
$(function(){ $ali = $('#list li'); $ali.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>
事件代理的写法:
$(function(){ $list = $('#list'); // 父元素ul 来代理 子元素li的点击事件 $list.delegate('li', 'click', function() { // $(this)表示当前点击的子元素对象 $(this).css({background:'red'}); }); }) <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
delegate方法参数说明:
delegate(childSelector,event,function)
-
childSelector: 子元素的选择器
-
event: 事件名称,比如: 'click'
-
function: 当事件触发执行的函数
说明:
-
事件代理就是使用父元素来代理子元素的事件,好处是减少事件的绑定次数,提高性能。
-
使用场景当多个相同的子元素绑定同一个事件,可以使用事件代理。
-
事件代理使用是使用delegate方法来完成
-
知识点回顾
本节介绍了json字符串和js事件代理的基本知识。
1、json是用来存储和传输数据的轻量级的数据交换格式,英文全称 JavaScript Object Notation。有两种格式,一种对象,一种数组。
2、js事件代理主要是用于当多个相同的子元素绑定同一个事件的场景,可以提高性能,而事件冒泡则是从下往上触发事件。
工欲善其事,必先利其器!
作者:全栈测试开发日记
出处:https://www.cnblogs.com/liudinglong/
csdn:https://blog.csdn.net/liudinglong1989/
微信公众号:全栈测试开发日记
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。