首页 > 代码库 > 笔记：2016-07-19
笔记：2016-07-19
/*原型对象*/
/*定义原型对象的固定格式*/
function Product(){
this.name = ‘iphone7‘
this.price = 6666
}
Product.prototype = {
buy:function(){},
addToCart:function(){}
}
/*如何使用：使用之前必须先实例化*/
var iphone7 = new Product();
iphone7.name = ‘iphone7‘;
iphone7.price = 6666;
/*使用*/
console.log(iphone7.name)
/*字面量形式 简写 json格式*/
var iphone7 = {name:‘iphone7‘,price:6666}
/*如何使用*/
/*万星级知识点*/
/*第一种：点语法：*/
console.log(iphone7.name)
/* 第二种：中括号形式*/
console.log(iphone7[‘name‘])
/*有哪几种数据类型*/
/* 基本类型 复杂类型
基本类型：数据 string 布尔 null undefined
复杂：对象（object 数组 json）*/
/*如何判断数据类型*/
/* typeof instanceof toString.call*/
//-------------------------拷贝创建对象核心代码--------------------------
//就是将一个对象的属性和方法拷贝给另一个对象
/*我们接下来使用这个方法给对象动态的添加一些功能*/
function extend(tar,source) {
//遍历对象
for(var i in source){
tar[i] = source[i];
}
return tar;
}
<!--事件的发展趋势 ： 解耦合 代码分离 目的：团队化作战 降低不同能力之间的合作的彼此依赖-->
<!--//80年代之前-->
<button onclick ="alert(‘nihao‘)">你好</button>
<!--90年代分离-->
<button onclick =‘testfn()‘> dajia</button>
<!--2002年-->
<button id=‘btn‘></button>
$("#btn1").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
$("#btn2").click(function(){
$("div").append("<h3>这是一个新的h3元素</h3>");
});
//给多个元素绑定事件
//但是新增的元素不行
$("div p").each(function(){
$(this).click(function(){
$(this).css(‘color‘,‘green‘)
})
})
//我们可以使用bind来打到同样的目的
//新的元素也不行
$("div h3").bind("click", function () {
$(this).css(‘color‘,‘green‘)
})
//还可以绑定多个
$("div h3").bind("click", function () {
$(this).css(‘background‘,‘yellow‘)
})
一次
$(‘a‘).one(‘click‘,function(){
alert(‘a‘);
})
但是新添加的也不行 怎么办呢？？
// 实现方式
// 这个就是冒泡 下面进入我们的主题 --事件流
// 首先看一个例子
$("div").delegate(‘h3‘,"click", function () {
$(this).css(‘color‘,‘green‘)
})
$("div").delegate(‘h3‘,"click", function () {
$(this).css(‘background‘,‘yellow‘)
})
$("div").on("click",‘h3‘,function () {
$(this).css(‘color‘,‘green‘)
})
$("div").on("click",‘h3‘, function () {
$(this).css(‘background‘,‘yellow‘)
})
<!--HTML运行后点击红色区域,这是最里层的DIV,根据上面说明,无论是DOM标准还是IE,直接写在html里的监听处理函数是事件冒泡传递时调用的,由最里层一直往上传递,所以会先后出现
-->
<body onclick="alert(‘current is body‘);">
<div id="div0" onclick="alert(‘你好 ‘+this.id+‘黄色‘)">
<div id="div1" onclick="alert(‘你好 ‘+this.id+‘蓝色‘)">
<div id="div2" onclick="alert(‘你好 ‘+this.id+‘绿色‘)">
<div id="div3" onclick="alert(‘你好‘+this.id+‘红色‘)"></div>
<!--你好div3红色-->
</div>
</div>
</div>
<div></div>
</body>
<!--点击事件捕获，就是当你点击一个按钮，程序会从最外层开始遍历，直到找到你点击的元素-->
<!--这里，当你点击按钮后，先从最上面开始，也就是body开始，
然后找到body的儿子， --div，
然后再找到div 的儿子 buhuo-->
<div>
<button type="button" id="buhuo">事件捕获</button>
<button id="paopao">事件冒泡</button>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$(‘#paopao‘).click(function(){
alert(‘hello‘);
});
$(‘body‘).click(function(){
alert(‘baby‘);
});
});
笔记：2016-07-19