①单体创建对象
将相关的变量和函数组合成一个整体,就是的对象,对象中变量叫属性,变量中的函数叫做方法,
②工厂模式创建对象
<script type="text/javascript">
function Person(name,age,job){
var o = new Object();创建一个空的对象
o.name = name;
o.age = age;
o.job = job;
o.showname = function(){
alert('我的名字叫'+this.name);
};
o.showage = function(){
alert('我今年'+this.age+'岁');
};
o.showjob = function(){
alert('我的工作是'+this.job);
};
return o;
}
var tom = Person('tom',18,'程序员');
tom.showname();
</script>
③构造函数
new相当于工厂模式的创建对象和返回
④call和apply的区别
都可以改变this 区别在于call可以直接传参 apply需要把参数放入数组中在进行传参
⑤新增选择器
document.querySelector('#div1')获取单个
document.querySelectorall('#div1')获取多个
⑥jquery
$(document).ready(function(){
var $div=$(#div);
alert('jquery:'+$div.html());
}) jquery应用(获取html id并且打印内容)
$(function){
var $div=$(#div);
alert('jquery:'+$div.html());
}) 简写
jquery里的ready和window.onlond的区别就是后者需要等所有的页面和节点都加载并且渲染完才会执行里面的代码,但是ready只要你网页节点加载完就可以执行里面的代码
⑦jquery选择器
$(document) //选择整个文档对象 整个网页相当于html标签
$('li') //元素 选择所有的li元素
$('#myId') //id 选择id为myId的网页元素
$('.myClass') //类 选择class为myClass的元素
$('input[name=first]') //属性 选择name属性等于first的input元素
$('#ul1 li span') //后代 选择id为为ul1元素下的所有li下的span元素
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').prevAll('p'); //选择div元素前面所有的p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').nextAll('p'); //选择div元素后面所有的p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
⑧点击事件
。click() 点击事件
。toggleCalss
⑨绑定点击事件
$(this).index() 获取索引值
⑩选项卡
$(this).addClass('cur')添加行边样式 .siblings().removeClass('cur') 给他的其他兄弟去除行边样式
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');