前端之jquery

作者: ropon 分类: Web前端 发布时间: 2018-11-11 17:30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<style type="text/css">
		*{
			padding: 0;
            margin: 0;
        }
        ul,ol{
			list-style: none;
		}
		.container{
			width: 300px;
			height: 300px;
			background-color: green;
			position: relative;
		}
		#box{
			width: 250px;
			height: 200px;
			padding-left: 30px;
			border: 2px solid red;
			position: absolute;
			top: 45px;
			left: 45px;
			/*display: none;*/
		}
		input[type='text']{
			border: none;
			outline: none;
			border: 1px solid red;
			width: 200px;
			height: 100px;
			font-size: 30px;
		}
		.diyauto{
			width: 100px;
			height: 100px;
			/*background-color: green;*/
		}
		.tt{
			color: red;
		}
		.pp{
			color: green;
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color:red;
		}
		div.hidden{
			display: none;
		}
		.container{
			height: 2000px;
		}
		.toTop{
			width: 100px;
			height: 80px;
			background-color: black;
			color: white;
			text-align: center;
			line-height: 80px;
			cursor: pointer;
			position: fixed;
			bottom: 50px;
			right: 50px;
		}
		.father{
			width: 300px;
			height: 300px;
			background-color:red;
		}
		.main{
		
		}
		.skin{
			width: 100%;
			height: 100px;
			background-color: red;
			position: fixed;
			top: 0;
			left: 0;
			display: none;
		}
		.skin li{
			float: left;
			margin-right: 30px;
			cursor: pointer;

		}
		span{
			color: bule;
			cursor: pointer;
		}
		.testsy{
			width: 100%;
			height: 500px;
			/*background-color: green;*/
			display: none;
		}
	</style>
	<!-- <script src="./js/1.js"></script> -->
	<script src="./js/jquery.js"></script>
	<script>
		// console.log(window.$);
		// clientTop 内容区域到边框顶部的距离 也就是边框高度
		// clientLeft 内容区域到边框左部的距离 也就是边框宽度
		// clientWidth 内容区域+左右padding 不包含border 可视宽度
		// clientHeight 内容区域+ 上下padding 可视高度
		window.onload = function(){
			// console.log(document.documentElement.clientWidth);
			// console.log(document.documentElement.clientHeight);
			// // 窗口大小发生变化时,调用此方法
			// window.onresize = function(){
			// 	console.log(document.documentElement.clientWidth);
			// }
			// 
			// offsetWidth 占位宽 内容+padding+border
			// offsetHeight 占位高 内容+padding+border
			// offsetTop 如果盒子没有设置定位 到body顶部的距离,如果设置固定定位 那么以父辈为基准的top值
			// offsetLeft 如果盒子没有设置定位 到body左部的距离,如果设置固定定位 那么以父辈为基准的left值
			// var box = document.getElementById('box')
			// console.log(box.offsetTop);
            // console.log(box.offsetLeft);
            // console.log(box.offsetWidth)
            // console.log(box.offsetHeight)
            // 
            // jquery
            // 库和框架
            // 库 小而精 直接操作DOM
            // jquery 封装js的 事件 属性 DOM 选择器 ajax 等操作
            // 框架 大而全 事件 DOM 属性 ajax 模板引擎
            // console.log(jquery());
            // console.log($);
            // DOM事件三步走
            // 事件源
            // 通过标签获取jQuery对象 $('div')
            // 通过ID获取jQuery对象 $('#box')
            // 通过类名获取jQuery对象 $('.top-l')
            // 
            // 事件
            // click()参数是一个回调函数,当调用click方法完成事件操作,jQuery内部返回一个jQuery对象
            // 然后通过 jQuery对象.click(function(){})
            // 
            // 事件驱动 事件的回调函数
            // 对样式属性操作
            // .css('color')
            // .css({
            	// 'color':'red',
            	// 'background-color':'green'
            // })
            // 
            // console.log($('#box'));
            // $('#box').click(function(){
            // 	console.log('test');
            // 	$('.container').css({
            // 		'background-color': 'yellow',
            // 		'width': '500px'
            // 	})
            // })
            //
            // 事件流
            // true,事件捕获 false,事件冒泡 默认false,即事件冒泡
         //    var oBtn =document.getElementById('btn');
         //    document.addEventListener('click',function(){
         //    	console.log('document处于事件捕获阶段');
         //    },true); 
         //    document.documentElement.addEventListener('click',function(){
	        //     console.log('html处于事件捕获阶段');
	        // }, true);
	        // document.body.addEventListener('click',function(){
	        //     console.log('body处于事件捕获阶段');
	        // }, true);
	        // oBtn.addEventListener('click',function(){
	        //     console.log('btn处于事件捕获阶段');
	        // }, true);
	        // oBtn.addEventListener('click',function(){
	        //     console.log('btn处于事件冒泡阶段');
	        // }, false);
	        // document.body.addEventListener('click',function(){
	        //     console.log('body处于事件冒泡阶段');
	        // }, false);
	        // document.documentElement.addEventListener('click',function(){
	        //     console.log('html处于事件冒泡阶段');
	        // }, false);
	        // document.addEventListener('click',function(){
	        //     console.log('document处于事件冒泡阶段');
	        // }, false);


            
			
		}
		// 入口函数 不用等待图片资源加载完成后就可以调用 没有时间覆盖现象
		// $(document).ready(function(){
		// 	console.log($('#box'));
		// });

		// $(function(){
		// 	console.log($('#box'));
		// });

		// $(function(){
		// 	console.log('test')
		// });
		// 
		$(function(){
			// console.log($('button'));
			// var isShow = true;
			// $('button').click(function(){
			// 	$('#box').css({
			// 		'background-color': 'yellow'
			// 	});
				// 显示
				// $('#box').fadeIn(3000);
				// 隐藏
				// $('#box').fadeOut(3000);

				// if (isShow){
				// 	$('#box').stop().slideUp(1000);
				// 	isShow = false;
				// }
				// else{
				// 	$('#box').stop().slideDown(1000);
				// 	isShow = true;
				// }
				
			// 	$('#box').stop().slideToggle(1000);
			// });
			// 	
			// js和jquery对象转换
			// js --- jquery
			// $(js对象)
			// var datas = ['red','green','yellow'];
			// console.log($(datas));
			// jquery -- js
			// jq对象[0]
			// jq对象.get(0)	
			// var item = document.getElementsByClassName('item')[0];
			// $(item).css('color','red').click(function(){
			// 	alert('test');
			// });
			// 
			// 高级选择器
			// 子代选择器
			// $('.box>p').css('color','green'); 
			// 紧邻的挨着的下一个兄弟元素
			// $('#aa+p').css('color','red');
			// 
			// 基本选择器
			// var i = 1;
			// $(`ul li:eq(${i})`).css('color','red');
			// $('ul li:first').css('color','green');
			// $('ul li:last').css('color','blue');
			//
			// 属性选择器 
			// $('input[type=text]').css('color','green');
			// 
			// 筛选选择器 
			// find() 查找后代
			// $('.father').find('.g').css('color','red');
			// $('.g').click(function(){
			// 	console.log(this);
			// 	$(this).css('color','green');
			// });
			// console.log($('.father').find('.g>span'));
			// $('.father').find('.g>span').click(function(){
			// 	console.log(this);
			// });
			// children() 查找子代
			// console.log($('.father').children('span'));
			// parent() 查找父亲
			// console.log($('.g span').parent());
			// var i = 1;
			// console.log($('.father span').eq(i));
			// 
			// siblings() 除它之外,选择其它兄弟元素
			// $('ul li').click(function(){
			// 	$(this).css('color','red').siblings('li').css('color','black');
			// })
			// 
			// 自定义动画
			// animate(动画队列,时间,回调函数)
			// $('button').click(function(){
			// 	var json = {
			// 		'width': '300px',
			// 		'height': '300px',
			// 		'left': '300px',
			// 		'top': '300px',
			// 		'border-radius': '100px'
			// 	};
			// 	$('.diyauto').animate(json,1000,function(){
			// 		alert('ok');
			// 	});
			// });
			// 
			// 对标签属性的操作
			// $('.diyauto').html('<a href="https://ropon.top">Ropon</a>');
			// $('.diyauto').html('<a id="testid"></a>');
			// $('#testid').attr('href','https://ropon.top').text('Ropon');
			// console.log($('#testid').attr('id'));
			// $('#testid').attr({
			// 	'title': 'testtitle',
			// 	'class': 'tt'
			// });
			// $('body').click(function(){
			// 	// $('#testid').attr('class','pp');
			// 	// 增加类名
			// 	$('#testid').addClass('pp');
			// 	// 移除多个类名
			// 	$('#testid').removeClass('tt pp');
			// 	// 移除多个属性
			// 	$('#testid').removeAttr('title href');
			// });
			// 类的操作 建议使用addClass()/removeClass()/toggleClass()
			// 其它设置使用attr或者removeAttr()
			// 
			// 标签对象属性操作
			// console.log($('input[type=radio]').eq(0).attr('checked'));
			// console.log($('input[type=radio]').eq(0)[0].checked);
			// console.log($('input[type=radio]').eq(1)[0]);
			// console.log($('input[type=radio]').eq(0).prop('checked'));
			// console.log($('input[type=radio]').eq(0).prop('abc','1123'));
			// console.log($('input[type=radio]').eq(1));
			// $('button').click(function(){
			// 	console.log('test');
			// 	$('input[type=radio]').eq(0).removeProp('checked');
			// 	$('input[type=radio]').eq(1).prop('abc','1123')
			// });
			// 
			// 控制显示/隐藏
			// $('button').click(function(){
			// 	$('.box1').toggleClass('hidden');
			// });
			// 
			// 对值的操作
			// text()
			// html()
			// val()
			// 清空值 text('') html('') val('')
			// 
			// DOM的操作
			// 父子追加
			// 父.append(子)
			// 子.appendTo(父)
			// 兄弟添加
			// after()
			// insertAfter()
			// 
			// before()
			// insertBefore
			// var oP = document.createElement('p');
			// oP.innerText = 'Ropon';
			// $('.box').append('<h2 id ="ab">Pengge</h2>');
			// $('.box').append(oP);
			// // $('.box').append($('#bb'));
			// $('#bb').click(function(event){
			// 	alert($(this).text());
			// });
			// $('.box').prepend('<h1>luopeng</h1>');
			// 
			// ajax
			// $('input[type=button]').click(function(event){
			// 	var cityVal = $('input[name=city]').val();
			// 	var url = `https://free-api.heweather.com/s6/weather/now?location=${cityVal}&key=4693ff5ea653469f8bb0c29638035976`;
			// 	// console.log(url);

			// 	$.ajax({
			// 		url:url,
			// 		type:'get',
			// 		success:function(data){
			// 			var Tmp = data.HeWeather6[0].now.tmp;
			// 			var Tq = data.HeWeather6[0].now.cond_txt;
			// 			var nowTmp = Tq + Tmp;
			// 			$('.box').html(nowTmp);
			// 		},
			// 		error:function(err){
			// 			console.log(err);
			// 		}
			// 	});
			// });
			// 
			// var init = function(){
			// 	var url ='https://free-api.heweather.com/s6/weather/now?location=chengdu&key=4693ff5ea653469f8bb0c29638035976';
			// 	$.ajax({
			// 		url:url,
			// 		type:'get',
			// 		success:function(data){
			// 			var Tmp = data.HeWeather6[0].now.tmp;
			// 			var Tq = data.HeWeather6[0].now.cond_txt;
			// 			var nowTmp = Tq + Tmp;
			// 			$('.box').html(nowTmp);
			// 		},
			// 		error:function(err){
			// 			console.log(err);
			// 		}
			// 	});
			// };
			// setTimeout(init,2000);
			// 
			// $('span').mouseenter(function(){
			// 	// setTimeout(init,1000);
			// 	// 
			// 	var url ='https://free-api.heweather.com/s6/weather/forecast?location=chengdu&key=4693ff5ea653469f8bb0c29638035976';
			// 	$.ajax({
			// 		url:url,
			// 		type:'get',
			// 		success:function(data){
			// 			datas = data.HeWeather6[0].daily_forecast;
			// 			console.log(datas);
			// 			$('.box').show();
			// 			$('.box').empty();
			// 			datas.forEach(function(item,index){
			// 				$('<div class="item"></div>').appendTo('.box').html(item.cond_txt_d,item.tmp_max);
			// 				$('<div class="item"></div>').appendTo('.box').html(item.tmp_max);
			// 			})
			// 		},
			// 		error:function(err){
			// 			console.log(err);
			// 		}
			// 	});
			// });
			
			// $('span').mouseleave(function(){
			// 	$('.box').hide();
			// });
			// 
			// 位置信息
			// width() height()获取内容的宽和高
			// console.log($('#box').width());
			// console.log($('#box').height());
			// $('#box').delay(2000).hide(3000);
			// 异步延时
			// setTimeout(function(){
			// 	$('#box').width(400);
			// },2000);
			// console.log($('#box').width());
			// innerWidth() innerHeight()获取内部的宽和高 包含内容的宽和高及padding 但不包含border
			// console.log($('#box').innerWidth());
			// outerWidth() outerHeight()获取外部宽和高 包含内容的宽和高及padding和border
			// console.log($('#box').outerWidth());
			// console.log($('#box').offset().top);
			// $(document).scroll(function(){
			// 	console.log('test');
			// });
			// 
			// 返回顶部
			// $('.toTop').click(function(){
			// 	$('html,body').animate({
			// 		'scrollTop':0
			// 	},1000);
			// });
			// 
			// 事件冒泡
			// $('#btn').click(function(event){
			// 	console.log('按钮被点击');
			// 	console.log(event.target);
			// 	// console.log(event.currentTarget);
			// 	// 阻止事件冒泡
			// 	// event.stopPropagation();
			// });
			// $('.child').click(function(event){
			// 	console.log(event.type);
			// 	console.log('子盒子被点击');
			// 	console.log(event.target);
			// 	event.stopPropagation();
			// });

			// $('.father').click(function(event){
			// 	console.log(event.type);
			// 	console.log('父盒子被点击');
			// 	console.log(event.target);
			// 	// console.log(event.currentTarget);
			// 	// event.stopPropagation()
			// });
			
			// $('body').click(function(event){
			// 	console.log(event.target);
			// 	// console.log(event.currentTarget);
			// 	console.log('body被点击');
			// });
			// 
			// 更换皮肤
			// $('#chmskin').click(function(e){
			// 	// 阻止当前默认的事件
			// 	e.preventDefault();
			// 	e.stopPropagation();
			// 	$('.skin').slideDown(1000);
			// });
			// $('#sclose').click(function(e){
			// 	$('.skin').slideUp(1000);
			// });
			// var datas = ['red','green','yellow'];
			// $('li').click(function(e){
			// 	// console.log(e.target);
			// 	$('.testsy').css({
			// 		'display':'block',
			// 		'background-color':'green'
			// 	});
			// });
			// 
			// 事件代理 第一个参数事件 第二个参数后代选择器
			// $('ul').on('click','#rtest',function(e){
			// 	alert(this.innerText);
			// });
			// $('ul').append('<li><a href="#">Pengge</a></li>');
			// 
			// 事件
			// click
			// dblclick
			// mouseenter
			// mouseleave
			// mouseout
			// mouseover
			// mousedown
			// mouseup
			// change
			// select
			// 
			// 合成事件
			// $('button').hover(function(){
			// 	console.log('进入');
			// },function(e){
			// 	console.log('离开');
			// });
			// 
			// 单双击事件 单双击的时间 间隔是300ms
			// $('button').click(function(e){
			// 	console.log('单击');
			// });
			// $('button').dblclick(function(e){
			// 	console.log('双击');
			// });
			// 
			// 聚焦和失焦
			// $('input[type=text]').focus(function(e){
			// 	console.log('聚焦');
			// });
			// $('input[type=text]').keydown(function(e){
			// 	console.log('正在输入');
			// 	// console.log(e.keyCode);
			// });
			// $('input[type=text]').change(function(e){
			// 	console.log('失焦');
			// });
			// $('input[type=text]').select(function(e){
			// 	console.log('选中输入框内容');
			// });
			// 
			// 表单控件事件
			// $('input[type=submit]').click(function(e){
			// 	var userName = $('input[type=text]').val();
			// 	$.ajax({
			// 		url:`http://127.0.0.1:8000/?user=${userName}`,
			// 		type:'get',
			// 		success:function(data){

			// 		},
			// 		error:function(err){
			// 			console.log(err);
			// 		}
			// 	});
			// });
			// 
			// 解决单双击事件冲突
			// var time = null;
			// $('button').click(function(e){
			// 	clearTimeout(time);
			// 	clearTimeout(time);
			// 	time = setTimeout(function(e){
			// 		console.log('做出单击操作');
			// 	},300);
			// });

			// $('button').dblclick(function(e){
			// 	clearTimeout(time);
			// 	clearTimeout(time);
			// 	time = setTimeout(function(e){
			// 		console.log('做出双击操作');
			// 	},300);
			// });

		});
		

	</script>
</head>
<body>
	<!-- <div class="container">
		<div id="box"></div>
	</div> -->
	<!-- <button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<div id="box"></div> -->
	<!-- <ul>
		<li class="item">ropon</li>
		<li>pengge</li>
		<li>luopeng</li>
	</ul> -->
	<!-- <div class="box">
		<p id="aa">ropon</p>
		<p>pengge</p>
		<p>luopeng</p>
	</div> -->
	<!-- <form action="">
		<input type="text" name="user">
	</form> -->
	<!-- <div class="father">
		<p>ropon</p>
		<a href="#">pengge</a>
		<span>luopeng</span>
		<div class="g">
			<span>test</span>
		</div>
	</div> -->
	<!-- <button>自定义动画</button>
	<div class="diyauto"></div> -->
	<!-- <button>点击</button>
	<span>男</span><input type="radio" name="sex" checked>
	<span>女</span><input type="radio" name="sex"> -->
	<!-- <button>隐藏</button>
	<div class="box1"></div> -->
	<!-- <a href="#" id="bb">测试</a>
	<div class="box">
		
	</div> -->
	<!-- <input type="text" name="city" placeholder="请输入城市名">
	<input type="button" name="" value="查询"> -->
	<!-- <span>成都天气</span>
	<div class="box">
		<div class="item"></div>
	</div> -->
	<!-- <div id="box"></div> -->
	<!-- <div class="container">
		<div class="toTop">返回顶部</div>
	</div> -->
	<!-- <div class="father">
		<div class="child">
			<button id="btn">按钮</button>	
		</div>
	</div> -->
	<!-- <div class="main">
		<span id="chmskin">更换样式</span>
		<div class="skin">
			<ul>
				<li>样式1</li>
				<li>样式2</li>
				<li>样式3</li>
			</ul>
			<span id="sclose">收起</span>
		</div>
		<div class="testsy">
			
		</div>
	</div> -->
	<!-- <ul>
		<li><a href="#" id="rtest">Ropon</a></li>
		<li>样式2</li>
		<li>样式3</li>
	</ul> -->
	<button>按钮</button>
	<input type="text" name="user">
	<input type="submit" name="">

</body>
</html>

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!