2018-11-11
前端之jquery

<!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>