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' onclick='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;

猜你喜欢