博客列表 >JS 创建对象、属性、方法及JQuery的id/class选择器使用2019.10.23

JS 创建对象、属性、方法及JQuery的id/class选择器使用2019.10.23

努力拼搏----赵桂福的博客
努力拼搏----赵桂福的博客原创
2019年10月24日 15:24:57746浏览

今晚学习了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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


【总结】整体下来理解还可以,总归于老师讲解的非常到位!感谢老师!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议