一个初学者的辛酸路程-jQuery
前言：
主要概要：
1、HTML+CSS补充
2、DOM事件
3、jQuery示例
内容概要：
1、布局
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .w{ width:980px; margin:0 auto; border:1px solid greenyellow; } </style> </head> <body> <div style="background-color: black;color: white;"> <div class="w">标题</div> </div> <div> <div class="w">内容</div> </div> </body> </html>
效果如下：
2、clear both的另外一种写法 （清除浮动）
常规写法就是如下所示：
<body>
<div style="background-color: greenyellow;">
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="clear: both;"></div>
</div>
</body>
接着，我们换另外一种写法
注意：有content才会加标签，一般都是这么写，不能写display: none
<style> .clearfix:after{ content: '.'; display: block; clear: both; visibility: hidden; height:0; } </style>
所有网站这个都会用到。
以后就写一个公共的CSS，放在引用即可，after是指在这个标签内容的后面
<link rel="stylesheet" href="commons.css">
3、页面布局，拖动浏览器如何让格式不变
第一种方法：
在外面定义一个div给一个固定宽度，如果缩小他会自动出现滚动条。如下图
写法如下：
<div style="width: 800px;">
输入标签
</div>
方法2：@media
<style> @media (min-width: 800px){ .item{ width:20%; float: left; } } @media (max-width: 700px){ .item{ width:50%; float: left; } } </style>
4、事件绑定
submit ，a标签，from表单，这些默认有些默认事件的
也可以自定义一些事件
方式1：点击出现弹框，确定，跳转
<body>
<a href="http://www.baidu.com" onclick=" func();">走你</a>
<script>
function func(){
alert(123);
false;
}
</script>
</body>
如果我不想让他跳转，需要return一个FALSE即可，如下
<body>
<a href="http://www.baidu.com" onclick="return func();">走你</a>
<script>
function func(){
alert(123);
return false;
}
</script>
</body>
方式2：
<a href="http://www.baidu.com" id="i1">走你</a> <script> document.getElementById('i1').onclick = function () { alert(123) } </script>
默认阻止写法就是，价格return FALSE；
<body> <a href="http://www.baidu.com" id="i1">走你</a> <script> document.getElementById('i1').onclick = function () { alert(123); return false; } </script> </body>
有何作用？
用户提交数据如果为空，我就在JS上去阻止提交了。
<form action="http://www.baidu.com"> <input type="text" id="user" name="user" /> <input type="submit" value="提交" onclick="return func();"> </form> <script> function func(){ var v = document.getElementById('user').value; if(v.length>0){ return true; }else{ alert('请输入内容') return false; } } </script>
第二种写法：
<input type="submit" id="sb" value="提交" /> </form> <script> document.getElementById('sb').onclick = function(){ var v = document.getElementById('user').value; if(v.length>0){ return true; }else{ alert('请输入内容') return false; } } </script>
5、有一个绑定事件，我绑定想获取里面的数据。
<body>
<div id="i1" onclick="fuck();">答复</div>
<script>
function fuck(){
var v = document.getElementById('i1').innerText;
alert(v);
}
</script>
this，触发当前目标的对象
<div onclick="fuck(this);">答复</div> <script> function fuck(self){ var v = self.innerHTML; alert(v); } </script>
另外一种写法
<div id="i1">答复</div> <script> document.getElementById('i1').onclick = function(){ var v = this.innerHTML; alert(v); } </script>
6、点击获取时间去掉里面的关键字，拿开又恢复
代码如下：
<body>
<input type="text" value="请输入关键字" onfocus="fuckFocus(this);"onblur="fuckBlur(this);" />
<input type="button" value="提交">
<script>
/*
当标签获取焦点
*/
function fuckFocus(ths){
var v = ths.value;
if(v == "请输入关键字"){
ths.value = "";
}
}
/*
当标签失去焦点
*/
function fuckBlur(ths){
var v = ths.value;
if(v.length == 0){
ths.value = "请输入关键字"
}
}
</script>
</body>
this 代表当前标签。
如果获取值，都用.value（表单相关的，比如input系列，select标签）
除了这些，想获取标签中间的值（div span），用innerhtml和innertext。
2者的区别就是innerhtml除了获取值之外还能获取里面的标签，比如a标签或者span标签
如下：
7、同时绑定2个相同的事件
实现效果如下：
点击同时出现2个事件
代码如下：
<div id="i1" onclick="console.log(1);">dfd</div> <script> document.getElementById('i1').addEventListener('click',function(){ console.log(2); }) </script>
8、触发事件顺序。由内朝外（事件冒泡）
<body>
<div style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">
<div style="height: 300px;width: 300px;background-color: greenyellow" onclick="alert(2);">
<div style="height: 200px;width: 200px;background-color: black" onclick="alert(3);">
</div>
</div>
</div>
</body>
下面，写一个捕获式。通过addEventListener和true来捕获，事件触发顺序就是由外向里了。来控制事件顺序
<div id="i1" style="height: 400px;width: 400px;background-color: red">
<div id="i2" style="height: 300px;width: 300px;background-color: greenyellow" >
<div id="i3" style="height: 200px;width: 200px;background-color: black" >
</div>
</div>
</div>
<script>
document.getElementById('i1').addEventListener('click',function(){alert(1);},true);
document.getElementById('i2').addEventListener('click',function(){alert(2);},true);
document.getElementById('i3').addEventListener('click',function(){alert(3);},true);
</script>
给全局绑定事件
event是当前事件的信息
<input type="text" onkeydown="func(this,event);" /> <script> function func(ths,e){ console.log(ths,e) } </script>
全局生效，给Window绑定全局事件
<input type="text" onkeydown="func(this,event);" /> <script> function func(ths,e){ console.log(ths,e); } window.onkeydown = function(e){ console.log(e); } </script>
9、通过JS 给任何标签添加提交表单功能
<form id="f1" action="http://www.baidu.com"> <input type="submit" value="提交"> <a onclick = "submitForm();">提交</a> </form> <script> function submitForm(){ document.getElementById('f1').submit(); } </script>
10、给页面刷新，通过代码级别来做
window.location.reload()
获取当前URL和赋值
window.location.href
window.location.href = "http://cn.bing.com"
11、出效果图
jQuery+highchart（专门用来出图）
上官网拿图https://www.hcharts.cn/demo/highcharts
代码如下：
记住，函数式直接从官网找好图，贴上它的代码而来，然后再执行函数即可。
官网找的函数如下：
<body>
<div style="height: 500px;">
<div id="i1"></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="highchart/highchart/highcharts.js"></script>
<script>
function createChart(){
$('#i1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
}
createChart();
</script>
</body>
12、利用jQuery找到并操作
<body>
<div id="i1">sdfdf</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').text('adidas')
</script>
</body>
通过class来修改
<body>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.c1').text('666')
</script>
</body>
2个条件，比如找到class为c1然后ID为i1
$('.c1,#i1').text('666')
等于
$('.c1:eq(2)').text('12345')
地址为：http://jquery.cuishifeng.cn/id.html
可以在这个里面去查找一些功能。
13、点赞实现
用到的知识点如下：
1）追加$('t1').append()在旁边增加一个标签
2）定时器 setInterval
3）透明度
4）位置变化 position: relative
5）字体大小和位置变化
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding:50px; border:1px solid #dddddd; } .item{ position: relative; width:30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> </body> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function(){ AddFavor(this); }); function AddFavor(self){ var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('position','absolute'); $(tag).css('right',right + "px"); $(tag).css('top',top + "px"); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function(){ fontSize = fontSize + 5; top = top - 5; right = right - 5; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + "px"); $(tag).css('opacity',opacity); // 删除定时器和去除+1的标签 if (opacity < 0){ clearInterval(obj); $(tag).remove() } },100); } </script> </html>
效果如下：
你现在所遭遇的每一个不幸，都来自一个不肯努力的曾经
