<html5+css3+js>jquery基础

于 2015-12-16 15:26:13 发布
阅读量766 收藏 1
点赞数
分类专栏： 实例代码 文章标签： css3 html5 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_17615475/article/details/50328439
版权

(《javascript&jquery交互式web前端开发》学习记录) 


HTML5:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="jquery.css" />
</head>

<body>
<div id="page">
	<h1>List King</h1>
    <h2>Buy Groceries</h2>
    <ul id="list">
    	<li id="one" class="hot"><em>fresh</em> figs</li>
        <li id="two" class="hot">baby choy</li>
        <li id="three" class="hot">beef</li>
        <li id="four">potato</li>
        <li>linguine</li>
        <li>cream</li>
        <li>coconut milk</li>
        <li>mushrooms</li>
        <li>apples</li> 
        <li>strawberries</li>
        <li>rice crackers</li>
        <li>brie</li>
        <li>rice</li>
        <li>green tea</li>
        <li>vine-ripened tomatoes</li>
        <li>bananas</li>
        <li>red kidney beans</li>
        <li>haricot beans</li>
        <li>lettuce</li>
        <li>organic brown rice vinegar</li>
        <li>sushi nori</li>
        <li>garlic</li>
        <li>ginger</li>
        <li>red onions</li>
        <li>goat's cheese</li>
        <li>baby leaf spinach</li>
        <li>coconut</li>
        <li>avocado</li>
        <li>leeks</li>
        <li>carrots</li>
    </ul>
    <p id="footer">&copy; ListKing</p>
    <div id="slideAd">
    	Buy ListKing Pro for only $1.99
    </div>
    <!--<p>"Opportunity is missed by most people because it is dressed in overalls and looks like work."<br />- Thomas Edison</p>-->
    <!--<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
    <form id="newItemForm">
    	<input type="text" id="itemDescription" placeholder="Add description..." />
        <input type="submit" id="addButton" value="add" />
    </form>-->
     <!--<p id="notes">Click or mouseover a hot item...</p>-->
</div>
<script src="jquery-1.11.0.js"></script>
<script src="jquery.js"></script>
</body>
</html>

CSS3: 

@charset "UTF-8";
/* CSS Document */
body{
	background:#000000;
	color:#FFFFFF;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#page{
	background:#484848;
	margin:0 auto;
	text-align:center;
	max-width:480px;
	position:relative;
}
h1{
	background:url(kinglogo.png) no-repeat center;
	height:72px;
	width:117px;
	text-align:center;
	text-indent:-1000%;
	overflow:hidden;
	margin:0px auto;
	padding:30px 20px 10px;
}
h2{
	text-transform:uppercase;
	letter-spacing:0.2em;
	font-size:150%;
}
a.show{
	font-size:50%;
	background-color:#CC6D6F;
	border-radius:3px;
	letter-spacing:normal;
	font-weight:lighter;
	padding:1px 4px;
	position:relative;
	top:-3px;
}
ul{
	border:none;
	margin:0;
	padding:0;
}
li{
	font-size:150%;
	display:block;
	background-color:#FFA600;
	border-top: 1px solid #FFDA92;
	border-bottom:1px solid #AC7200;
	padding:10px 20px;
	text-shadow:2px 2px 1px #000000;
	text-align:left;
	text-transform:capitalize;
}
p{
	background:#FFFFFF;
	display:inline-block;/*不知道为什么加上这一句才有下外边距*/
	margin:20px auto;
	padding:5px 0;
	color:#000000;
	border-radius:5px;
	width:90%;
}
.hot{
	background-color:#CC6D6F;
	border-top:1px solid #FF9A9C;
	border-bottom:1px solid #A74A4C;
}
.favorite{/*不可以直接用background属性，会将其他属性的background值覆盖*/
	background-image:url(icon-heart.png);
	background-position:center right;
	background-repeat:no-repeat;
}
.complete{
	background-image:url(icon-trash.png);
	background-position:center right;
	background-repeat:no-repeat;
	background-color:#8E8E8E;
	border-top:1px solid #D4D4D4;
	border-bottom:1px solid #353535;
}
#footer{
	background:none;
	color:#FFFFFF;
}
#slideAd{
	width:150px;
	height:60px;
	background-image:url(adverlion.png);
	background-repeat:no-repeat;
	background-position:10px center;
	background-color:#484848;
	font-size:130%;
	text-align:left;
	padding-left:62px;
	padding-top:30px;
	border:1px solid #FFFFFF;
	position:fixed;
	bottom:20px;
	right:-235px;
}

JQUERY: 

// 获取元素内容 .html()
/*var $listHTML=$('ul').html();//返回第一个匹配元素内部的html，包括其所有后代节点
$('ul').append($listHTML);//将内容添加到页面上

var $listItemHTML=$('li').html();//选取器返回4个li元素，不过.html()方法只返回第一个li元素中的内容
$('li').append('<i>'+$listItemHTML+'</i>');*/



//获取元素内容 .text()
/*var $listText=$('ul').text();//返回选取结果中每个元素的内容，包括所有后代元素中的文本
$('ul').append('<p>'+$listText+'</p>');

var $listItemText=$('li').text();//选取器返回4个li元素，.text()方法返回它们中的所有文字，然后将其添加到选取结果中的每一个<li>元素中
$('li').append('<i>'+$listItemText+'</i>');
*/


//修改内容的三种方法
/*$(function(){
	$('li:contains("honey")').text('almonds');//选取包含单词honey的所有列表项，然后使用.text()方法将匹配元素的文本修改为almonds
	$('li.hot').html(function(){//选中属性为hot的列表项，用.html()方法更新每个元素的内容
		return '<em>'+$(this).text()+'</em>';
	});
	$('li#one').remove();//选取id属性为one的li元素，然后用.remove()方法移除它
});
*/


//插入元素
/*$(function(){
	$('ul').before('<p class="notice">Just updated</p>');//选择ul元素，然后用.before()方法向列表之前插入一个新的段落
	$('li.hot').prepend('+');//选择所有class属性为hot的元素，然后使用.prepend()方法在文字之前添加＋
	var $newListItem=$('<li><em>gluten-free</em>soy sauce</li>');//创建一个新的li元素，然后选择最后一个li元素，并使用.after()方法添加新的元素
	$('li:last').after($newListItem);
});*/



//操作属性
/*$(function(){
	$('li#three').removeClass('hot');
	$('li.hot').addClass('favorite');
	$('ul').attr('id','group');
});
*/



//修改css规则
/*$(function(){
	var backgroundColor=$('li').css('background-color');
	$('ul').append('<p>Color was: '+backgroundColor+'</p>');
	$('li').css({
		'background-color':'#c5a996',
		'border':'1px solid #fff',
		'color':'#000',
		'padding-left':'+=75'
	});
});*/



//.each()方法
/*$(function(){
	$('li').each(function() {
        var ids=this.id;
		$(this).append('<span class="order">'+ids+'</span>');
    });
});*/



//事件
/*$(function(){
	var ids='';
	var $listItems=$('li');
	
	$listItems.on('mouseover click',function(){
		ids=this.id;
		$listItems.children('span').remove();
		$(this).append('<span class="priority">'+ids+'</span>');
	});
	
	$listItems.on('mouseout',function(){
		$(this).children('span').remove();
	});
});*/



//事件对象
/*$(function(){
	$('li').on('click',function(e){
		$('li span').remove();
		var date=new Date();
		date.setTime(e.timeStamp);
		var clicked=date.toDateString();
		$(this).append('<span class="date">'+clicked+''+e.type+'</span>');
	});
});*/



//事件委托
/*$(function(){
	var listItem,itemStatus,eventType;
	$('ul').on(
		'click mouseover',
		':not(#four)',
		{status:'important'},
		function(e){
			listItem='Item: '+e.target.textContent+'<br />';
			itemStatus='Status: '+e.data.status+'<br />';
			eventType='Event: '+e.type;
			$('#notes').html(listItem+itemStatus+eventType);
		}
	);
});*/



//特效
/*$(function(){
	$('h2').hide().slideDown();
	var $li=$('li');
	$li.hide().each(function(index) {
        $(this).delay(700*index).fadeIn(700);
    });
	$li.on('click',function(){
		$(this).fadeOut(700);
	});
});*/



//css动画
/*$(function(){
	$('li').on('click',function(){
		$(this).animate({
			opacity:0.0,
			paddingLeft:'+=80'
		},500,function(){
			$(this).remove();
		});
	});
});*/



//遍历
/*$(function(){
	var $h2=$('h2');
	$('ul').hide();
	$h2.append('<a class="show">show</a>');
	$h2.on('click',function(){
		$h2.next()
			.fadeIn(500)
			.children('.hot')
			.addClass('complete');
		$h2.find('a').fadeOut();
	});
});*/



//筛选
/*var $listItems=$('li');
$listItems.filter('.hot:last').removeClass('hot');
$('li:not(.hot)').addClass('cool');
$listItems.has('em').addClass('complete');
$listItems.each(function() {
    var $this=$(this);
	if($this.is('.hot')){
		$this.prepend('Priority item: ');
	}
});*/



//使用索引
/*$(function(){
	$('li:lt(2)').removeClass('hot');//less than the index element
	$('li').eq(0).addClass('complete');//equel to
	$('li:gt(2)').addClass('cool');//greater than
});*/



//操作表单
/*$(function(){
	var $newItemButton=$('#newItemButton');
	var $newItemForm=$('#newItemForm');
	var $textInput=$('input:text');
	
	$newItemButton.show();
	$newItemForm.hide();
	
	$('#showForm').on('click',function(){
		$newItemButton.hide();
		$newItemForm.show();
	});
	
	$newItemForm.on('submit',function(e){
		e.preventDefault();
		var newText=$('input:text').val();
		$('li:last').after('<li>'+newText+'</li>');
		$newItemForm.hide();
		$newItemButton.show();
		$textInput.val('');
	});
});*/



//剪切，复制和粘贴
/*$(function(){
	var $p=$('p');
	var $clonedQuote=$p.clone();
	$p.remove();
	$clonedQuote.insertAfter('h2');
	
	var $moveItem=$('#one').detach();
	$moveItem.appendTo('ul');
});*/



//修改尺寸
/*$(function(){
	var listHeight=$('#page').height();
	$('ul').append('<p>Height: '+listHeight+'px</p>');
	$('li').width('50%');
	$('li#one').width(125);
	$('li#two').width('75%');
});*/



//列表项在页面中的位置
$(function(){
	var $window=$(window);
	var $slideAd=$('#slideAd');
	var endZone=$('#footer').offset().top-$window.height()-500;
	
	$window.on('scroll',function(){
		if((endZone)<$window.scrollTop()){
			$slideAd.animate({'right':'0px'},250);
		}else{
			$slideAd.stop(true).animate({'right':'-360px'},250);
		}
	});
});

代码下载： http://download.youkuaiyun.com/detail/qq_17615475/9361325

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值