html_jQuery
jQuery:对Dom和js的封装模块
jQuery 低版本(1.x)兼容IE，jquery下载：http://jquery.com/download/
若不考虑兼容ie，可下载最新版
我用的jQuery版本：https://code.jquery.com/jquery-3.3.1.js
可以把min.js文件转换为.js文件滴东东：http://tool.chinaz.com/Tools/JsFormat.aspx
jQuery提供所有的方法：http://jquery.cuishifeng.cn/index.html
1.基本选择器
获取标签，修改内容（$==jQuery）
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<div id='n1'>11</div>
<div class='c1'>22</div>
<div class='c1'>22</div>
<a></a>
<span id = 'n2'></span>
<div id = 'n3'>
<div>
<div class='c3'>
<span>
<a>asd</a> //<a class="c4"></a>
</span>
</div>
</div>
<span>adfs</span>
</div>
<script src='jquery-3.3.1.js'></script>
<script>
//获取标签// $相当于jQuery
$("#n1").text('123');
$('div').text('xxx');
$('.c1').text('oo');
$('.c1,a,#n2').text('ok');
$('#n3 div .c3 span a').text('kkk'); //$('.c4').text('000');
</script>
</body>
</html>
2.选择器
| $('label+input') | 选中lable旁边有input的标签 |
| $('form~input') | 兄弟标签input标签 |
| $('li:first') | 找到li标签的第一个标签 |
| $('input:not(:checked)' | 找到input下没有checked属性的标签（没有被选中的标签） |
| $('tr:even') | 找到tr标签中索引从零开始为偶数的tr |
| $('tr:eq(1)') | 找到tr标签中索引值为1的标签 |
| $('div:contains('John')') | 找到div标签 文本里有John的标签 |
| $('div[sb='XXOO']') | 所有div标签中找到div属性中有自定义属性sb='XXOO'的标签 |
| $('ul li:first-child') | 找到ul标签下li标签的第一个子孩子 |
| $(':input') | 找到所有的input标签 |
| $('input[type='password']')==$(' :password') | 所有input标签中找到属性中有[type='password']的标签 |
| $('input:checked') | 表示属性有checked=checked标签（被选中的标签） |
3.筛选器
| $('tr').eq(num) | 匹配到索引为num的标签 |
| $('div').hasClass('perfect') | 检查当前类是否有perfect类 |
| $('.c1').children() | 找到c1类下所有的‘孩子’，不是孙子 |
| $('.c1').find('a') | 在兄弟姐妹的子子孙孙里找到a标签 |
| $('.c1').next() | 找到c1类的下一个兄弟标签 |
| $('.c1').nextAll() | c1类的下的所有的兄弟标签 |
| $('.c1').prev() | c1类的上一个兄弟标签 |
| $('.c1').prevAll() | c1类的上的所有的兄弟标签 |
| $('.c1')siblings() | c1同级的所有的兄弟标签 |
| $('#n10').parent().siblings() | 找到n10的父标签的所有兄弟标签 |
4.小小方法
| $('#nid').toggleClass('hide') | 如果有class=hide则移除掉hide ，没有则添加class= hide |
| $('#nid').html() | 可以获取所有包括html标签的所有东西 |
| $('#nid').html(‘dfkfdl’) | 修改值 |
| text() | 获取标签的文本 |
| val() | 针对获取input系列 select textarea文本 |
5.属性
有关checkbox的属性操作：
$('#c1').attr('XXOO','sb'); 表示给id为c1的添加属性XXOO='sb'（关键字: attr）
$('#c2').attr('checked','checked');表示给checkbox设置属性选中
$('#c2').removeAttr('checked');删除选中
然而给checkbox / radio 属性的设置后，一旦删除就不能再设置（其他属性可以）
故，针对checkbox和radio 有专用的快捷设置：“prop”
$('#c2').prop('checked',true); 表示选中
$('#c2').prop('checked',false); 表示取消选中
6.有关于each的for循环
var userList=[11,22,33,44];
$.each(userList function(i,item){ // each 即可获取下标，也可获取元素
console.log(i,item); // i是下标 item是元素
});
小例子：对表格的操作（选中，取消，反转）
<html>
<head>
<meta charset='utf8'/>
<title></title>
</head>
<body>
<div>
<div>
<input type='button' value='全选' onclick='SelectAll();'/>
<input type='button' value='取消' onclick='ClearAll();'/>
<input type='button' value='反选' onclick='ReverseAll();'/>
</div>
<table border='1'>
<tr>
<td><input type='checkbox'/></td>
<td>123</td>
<td>1233</td>
</tr>
<tr>
<td><input type='checkbox'/></td>
<td>123</td>
<td>1233</td>
</tr>
<tr>
<td><input type='checkbox'/></td>
<td>123</td>
<td>1233</td>
</tr>
</table>
</div>
<script src='jquery-3.3.1.js'></script>
<script>
function SelectAll(){
//table标签中所有的input
$("table input[type='checkbox']").prop('checked',true); // 找到所有的input的checkbox
//$('table :checkbox').prop('checked',true);
}
function ClearAll(){
//table标签中所有的input
//$('table input[type='checkbox']') // 找到所有的input的checkbox
$('table :checkbox').prop('checked',false); // 这种写法注意table后要有空格
}
function ReverseAll(){
/*var checkList=$('table :checkbox');
for(var i in checkList){ // 利用for循环把每一个元素都拿到
var ele = checkList[i];
var isChecked = $(ele).prop('checked');
if(isChecked){
$(ele).prop('checked',false);
}else{
$(ele).prop('checked',true);
}
}*/
$('table :checkbox').each(function(){ // each相当于for循环
var isChecked=$(this).prop('checked');//$(this)表示当前元素
if(isChecked){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
});
}
</script>
</body>
</html>
小小例子：网页侧目录（会动的哟）
<html>
<head>
<meta charset = 'utf8'>
<title></title>
<style>
.menu{
float:left;
height:500px;
width:20%;
background-color:antiquewhite;
}
.content{
float:left;
height:500px;
width:80%;
background-color:#777;
}
.title{
background-color:black;
color:white;
hight:40px;
line-height:40px;
border:2px solid white;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div>
<div class = 'menu'>
<div class='item'>
<div class='title' onclick='Func(this);'>菜单一</div>
<div class='body'>
<div>1.0</div>
<div>1.1</div>
<div>1.2</div>
</div>
</div>
<div class='item'>
<div class='title' onclick='Func(this);'>菜单二</div>
<div class='body hide'>
<div>2.0</div>
<div>2.1</div>
<div>2.2</div>
</div>
</div>
<div class='item'>
<div class='title' onclick='Func(this);'>菜单三</div>
<div class='body hide'>
<div>3.0</div>
<div>3.1</div>
<div>3.2</div>
</div>
</div>
</div>
<div class = 'content'>
</div>
</div>
<script src='jquery-3.3.1.js'></script>
<script>
function Func(ths){
// 获取菜单 、获取菜单二
// this 表示当前的菜单 // $(ths) 获取菜单一二三
// $(ths).text(); // 获取到<div class='title' onclick='Func(this);'>菜单三</div>内容
$(ths).next().removeClass('hide'); // 移除hide样式
$(ths).parent().siblings().find('.body').addClass('hide'); //给出自身的兄弟标签的body项加上hide样式
}
</script>
</body>
</html>
$(window).scroTop() : 窗体滚动多少，也可在scrollTop里添加值进行设置窗体滚动到的位置
小小小例子: 返回顶部
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style>
.go-top{
position:fixed;
right:50px;
bottom:50px;
border:2px solid yellow;
background-color:yellow;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div style='height:2000px;background-color:#dddddd;'>
<div style='height:500px;background-color:antiquewhite;overflow:auto;'> <!--overflow:auto;设置滚动条-->
<p>我是一个占位符</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>占位结束</p>
</div>
<div class='go-top'><a onclick='Gotop();'>返回顶部</a></div>
</div>
<script src='jquery-3.3.1.js'></script>
<script>
window.onscroll=function(){ // 表示每当滚动条滚动都会执行一次这个函数
//每滚动一次就获取scrollTop的值
var currentTop = $(window).scrollTop();
if(currentTop>200){ // 如果滚动的值大于200 取消隐藏
$('.go-top').removeClass('hide'); // 通过样式获取到标签
}else{
$('.go-top').addClass('hide');
}
};
function Gotop(){
$(window).scrollTop(0);
}
</script>
</body>
</html>
<html> <head> <meta charset='utf8'> <title>返回顶部</title> <style> .hide{ display:none; } .icon{ background-color:#86eaf2; width:32px; height:32px; display:inline-block; overflow:hidden; } .back{ position:fixed; right:20px; bottom:20px; width:50px; } .gotop{ position:relative; width:48px; height:38px; border:1px solid #ddddd; color:#fff; text-align:center; } .gotop .icon{ margin-top:0px; } .gotop:hover:after{ <!--hover鼠标移上去应用这个样式--> top:0; left:0; width:100%; height:100%; content:" "; position:absolute; background-color:#d9f1f2; } .content{ visibility:hidden; <!--隐藏content样式---> width:30px; height:32px; padding:3px 10px; cursor:pointer; font-size:12px; z-index:1; text-align:center; line-height:16px; top:0; position:absolute; } .gotop:hover .content{ visibility:visible; <!--把content样式设置为可见--> } </style> </head> <body> <div style='height:2000px;'>页面内容</div> <div class='back hide'> <div class='gotop' onclick='GoTop();'> <a class='icon'></a> <div class='content'> <span style='color:black;'>返回顶部</span> </div> </div> </div> <script src='jquery-3.3.1.js'></script> <script> function GoTop(){ $(window).scrollTop(0); //返回顶部 } $(function(){ $(window).scroll(function(){ // 当滚动滑轮时，执行函数体 var top = $(window).scrollTop(); // 获取当前滑轮高度 if(top>0){ $('.back').removeClass('hide'); // 展示返回顶部 }else{ $('.back').addClass('hide'); // 隐藏返回顶部 } }); }); </script> </body> </html>
终极版的关键语句：
.gotop:hover:after{ // hover鼠标移上去时应用这个样式
}
.gotop:hover .content{ // 把content设置为可见
visibility:visible;
}
7.关于标签位置
$(this).offset(): 当前标签离整个屏幕左上角的位置（离顶部和左部）
$(this).postion(): 当前标签离父标签（有多远）的位置
xx.height() 相对于父框不包括边框的高度
xx.weight() 相对于父框 不包括边框的宽度
xx.innerheight ：包括边框的高度
xx.innerweight ：包括边框的宽度
小小小小例子： 左边框内容随右边框内容变化而变化
<!--uc浏览器显示不了第三章的效果，谷歌可以-->
<html>
<head>
<meta charset='utf8'/>
<title></title>
<style>
.pg-body .catalog{
position:absolute;
top:0px;
width:200px;
bottom:0px;
background-color:#c6cad3;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .content{
position:absolute;
top:0px;
width:700px;
margin-left:210px;
background-color:#dadee7;
overflow:auto;
}
.pg-body .content .section{
height:500px;
}
</style>
</head>
<body>
<div class='pg-body'>
<div class='catalog'>
<div class='cotalog-item' auto-to='function1'><a>第一章</a></div>
<div class='cotalog-item' auto-to='function2'><a>第二章</a></div>
<div class='cotalog-item' auto-to='function3'><a>第三章</a></div>
</div>
<div class='content'>
<div menu='function1' class='section'><h1>第一章</h></div>
<div menu='function2' class='section'><h1>第二章</h></div>
<div menu='function3' class='section'><h1>第三章</h></div>
</div>
</div>
<script src='jquery-3.3.1.js'></script>
<script>
window.onscroll=function(){ //窗体每滚动一次就执行一次这个函数
var ws=$(window).scrollTop(); //获取离顶部的高度
if(ws > 50){ // 左边框固定在左侧
$('.catalog').addClass('fixed');
}else{
$('.catalog').removeClass('fixed');
}
$('.content').children().each(function(){ // 循环content里每一章节的标签
var offs=$(this).offset(); // 获取标签离顶部的高度和宽度
var offTop=offs.top; // 获取离顶部的高度
// 如果滑动的距离大于当前标签的距离
var total = offTop+$(this).height();
if(ws>offTop && total > ws){
// 如果滑轮到底部，则最后一个菜单增大
//window的高度 + 滑轮滚动的高度 = 文档的高度
//$(window).height() 窗口（window的高度)高度
//$(window).scrollTop() 滑轮滚动的高度
//$(document).height() 整个页面的高度（长度）
//var win-height = ;
if(ws + $(window).height() == $(document).height()){
$('.catalog').find('div:last-child').css('fontSize','48px').siblings().css('fontSize','12px');
//$('.catalog').children(' :last').css('fontSize','48px').siblings().css('fontSize','12px');
}else{
//当前标标签离顶部高度< 滚动条高度
//当前标签离顶部高度+当前标签的高度>滚动条高度
var t = $(this).attr('menu');
var target='div[auto-to="' + t +'"]';
$('.catalog').children(target).css('fontSize','48px').siblings().css('fontSize','12px');
return;
}
}
});
};
</script>
</body>
</html>
有关总结：
$(window).height() : 窗口高度
$(document).height() : 滑轮高度
$('#nid').height() : 标签高度
$(window).crollTop() :右侧滑动轮滑动了多少
$('#nid').crollTop() ： 标签的滑动轮滑动了多少
8.jQuery 标签操作
$('#nid').append('<a>ff</a>') 添加一个标签
$('#nid').after('<a>ff</a>') 在标签后添加一个标签
$('#nid').before('<a>ff</a>') 在标签前添加一个标签
$('#nid').empty() 清空标签
$('#nid').remove() 删除整个标签
var ni = $('#nid').detach() 可返回已经删除的nid 标签
$('$container').append(ni) : 可把删除的ni标签添加到container中
9.jQuery函数事件绑定
1.最基本的jQuery事件绑定:页面完全加载完成后才执行事件
1.1
$('li').click(function func(){ // 为每一个li绑定这个事件（批量）
var temp= = $(this).text(); // 但在后面添加进来的不会被绑定事件
alert(temp);
});
1.2
$('li').bind('click',function(){
//与上面的绑定方式一毛一样
});
2.文档准备好就绪之后就执行，而不是js在页面完全加载出来才执行
2.1
$(document).ready(function(){
// 当前文档结构准备好了（标签都加载出来了），但是页面（标签内容）还没有完全加载出来
});
2.2
$(function(){
});
3.特殊的绑定方式：委托，适合批量事件绑定
$(function(){ // 原理：当事件触发的时候才零时绑定上
$('ul').delegate('li','click',function(){ // 就算后面再添加事件进来也会被绑定
var temp = $(this).text();
alert(temp);
})
});
4.移除绑定的事件
两个特殊的关键字：$('li:last').unbind('click');
$('ul').delegate('li','click')
5.小例子
<!DOCTYPE html>
<html>
<head lang = 'en'>
<meta charset= 'utf8'>
<title></title>
</head>
<body>
<div style='border:1px solid #dddddd; width:600px; position:absolute;'> <!--position绝对位置-->
<div id='title' style = 'background-color:black; height:40px; color:white;'>
标题
</div>
<div style='height:300px;'>
内容
</div>
</div>
<script src='jquery-3.3.1.js'></script>
<script>
$(function(){
//页面加载完成之后自动执行
$('#title').mouseover(function(){ // 给title所在的标签绑定鼠标事件,添加鼠标移动
$(this).css('cursor','move'); // 增加样式
}).mousedown(function(e){ // 拓展：1.mousedown当鼠标事件 2.keydown 当按下键盘的时候的事件
//console.log($(this).offset()); // offset 标签离左上角的位置距离
var _event = e||window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove',function(e){ // 当鼠标点击的时候绑定框框
var _new_event = e || window.event; // 鼠标移动距离就是框移动的距离
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x +'px'); //给新移动的地方添加距离样式
$(this).parent().css('top',y +'px');
});
}).mouseup(function(){
$(this).unbind('mousemove'); // 当鼠标放开的时候绑定解开
});
});
</script>
</body>
</html>
10.jQuery扩展方法
jQuery方法一般写为自执行函数，写在js文件里
扩展方法1号：
jQuery.extend({ shushu:function(){ return 'zui_shuai'; }, qinqin:function(){ return 'shaobin'; } }); var ret = $.shushu(); // 直接通过$.直接访问 alert(ret);
扩展方法2号：
jQuery.fn.extend({ zhaozhao:function(){ return 'mei' } }); var ret = $('#id').zhaozhao(); // 选择器扩展访问 alert(ret);
都放在自执行函数里：
(function(arg){ arg.extend({ shushu:function(){ return 'zui_shuai'; }, qinqin:function(){ return 'shaobin'; } }); arg.fn.extend({ zhaozhao:function(){ return 'mei' } }); })(jQuery);
11.底部滚动条（很重要！）
// min-width:980px;当小于980px底部就出现滚动条
<html> <head> <meta charset='utf-8'> </head> <body> <div style='min-width:980px;'> // min-width:980px;当小于多少时底部就出现滚动条 <div style='width:20%; float:left'>111111111111111111111</div> <div style='width:80%; float:left'> 22222222222222222</div> </div> </body> </html>
小知识：
无论是什么样式，只要在最后加上important，就表示此标签优先级最高，它最流弊！！
例：
background-color:red:important;
