今晚学习了JS 对象,感觉对它的理解还是不错~~现将对象练习实例展现如下:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网学习--赵桂福</title> </head> <body> <p>练习javascript 创建对象以及属性、方法</p> <p id="demo"></p> <script> //new 创建对象 var obj1= new Object(); obj1.name='赵桂福'; obj1.sex='***'; obj1.show=function(){ document.write('Hi~我从方法中走来...'); } obj1.show(); document.write('<br/>'); document.write(obj1.name); document.write('<br/>'); document.write(obj1.sex); //字面量创建对象 var obj2={}; obj2.name= '西门老大'; obj2.sex= '男生'; obj2.show=function(){ document.write('Hi~我也是从方法中走来...'+this.name); } document.write('<BR/>_________________<BR/>'); document.write(obj2.show()); //其它方式 var obj3 = { name:'朱老师', sex:'大哥', show:function(){ document.write('<br/>'); document.write('hi~'+this.name+'------>'+this.sex); } }; obj3.show(); </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、JQuery的练习
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ //元素的选择 $('p:first').html('php中文网学习的好地方,嗯,是的!').css({'background':'red','color':'white'}); //class选择 $('.guifu_1').css({'font-size':'36px','color':'green'}); //id的选择 $('#bt').css({'width':'200px','height':'20px','background':'yellow'}).html('点点我'); }); function show(){ alert('这就对了!你,好棒啊!'); } </script> </head> <body> <h2>JQuery选择器的学习</h2> <p>php中文网学习的好地方</p> <p class='guifu_1'>PHP中文网老师个个顶呱呱~</p> <button onclick=show() id='bt'>点我</button> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、each 遍历输出数据
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--each 遍历输出值--> <script type="text/javascript"> //each 遍历输出 $().ready(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); }); </script> </head> <body> <button>单击-输出每个列表项的值</button> <ul style='display:none'> <li>php中文网</li> <li>猪哥</li> <li>朱老师</li> <li>西门</li> <li>欧阳克</li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
【总结】整体下来理解还可以,总归于老师讲解的非常到位!感谢老师!