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>

jQuery骚操作1号

小小例子：网页侧目录（会动的哟）

<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' οnclick='Func(this);'>菜单三</div>内容
            $(ths).next().removeClass('hide');   // 移除hide样式
            $(ths).parent().siblings().find('.body').addClass('hide');  //给出自身的兄弟标签的body项加上hide样式
            }</script>
</body>
</html>

jQuery骚操作2号

$(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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>

jQuery骚操作-返回顶部初级版

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

jQuery骚操作-返回顶部终极版

终极版的关键语句：

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

jQuery骚操作3号

有关总结：

$(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;

转载于:https://www.cnblogs.com/Vera-y/p/10456518.html

html_jQuery相关推荐

php开发是可视的吗,javascript,html_Jquery判断页面元素是否在浏览器的可视区域内，javascript,html,css,html5 - phpStudy...
Jquery判断页面元素是否在浏览器的可视区域内前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过 ...
ajax调取mysql数据显示在html_jQuery+Ajax+js请求json格式数据并渲染到html页面
json格式的数据文件有两种方式一种是xxx.json文件一种是xxx.php文件前者是json格式的文件后者是输出json格式的文件前者是本地的文件后者是获取数据库的数据再输出成json ...

html_jQuery

html_jQuery相关推荐

最新文章

热门文章