FrontEnd-Basis-9th

周日，雨，记录生活分享点滴

参考博客1：https://www.cnblogs.com/yuanchenqi/articles/5663118.html

参考博客2：https://www.cnblogs.com/5poi/p/6362208.html

 

jQuery 1

jQuery对象

首先需要在html文件中的 <head> 调用jquery文件

<script src="js/jquery-3.5.1.js"></script>

基本语法：$(selector).action()

  • jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

  • jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，使用 jQuery 里的方法：$(“#test”).html();

// jQuery 
$("#test").html()  // 获取ID为test的元素内的html代码，其中html()是jQuery里的方法

// jQuery此方法 等同于 DOM彼方法

// DOM
document.getElementById(" test ").innerHTML;

注意：jQuery无法使用DOM对象的任何方法，DOM对象也不能使用jQuery里的方法

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

  • var $variable = jQuery 对象

  • var variable = DOM 对象

 

寻找元素(重要的选择器和筛选器)

jQuery选择器

参考网站：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

// 基本选择器 ----------------------------------------------
$("*")              // 选取所有元素
$("#id")            // 通过 HTML 元素的 id 属性选取指定的元素
$(".class")         // 通过指定的 class 查找元素
$("element")        // 所有 element 元素
$(".class,p,div")   // 同时满足 class,p,div 标签都可以处理

// 层级选择器 ----------------------------------------------
$(".outer div")     // outer 盒子里 所有 div 标签元素
$(".outer>div")     // outer 盒子里 子辈 div 标签元素
$(".outer+div")     // outer 盒子随后所有 div 标签元素 毗邻
$(".outer~div")     // outer 盒子后面所有 div 标签元素

// 基本筛选器 ----------------------------------------------
$("li:first")       // 选取第一个 <li> 元素
$("li:eq(2)")       // 给定索引值的元素
$("li:even")        // 索引为偶数的元素，从 0 开始
$("li:gt(1)")       // 大于给定索引值的元素

// 属性选择器 ----------------------------------------------
$('[id="div1"]')         // 选取所有带有 id 值等于 "div1" 的元素
$('["chung="man"][id]')  // 满足多个属性的选择条件的标签

// 表单选择器 ----------------------------------------------
$("[type='text']") --简写为--> $(":text")  // 所有的单行文本框  // 注意只适用于input标签
$("input:checked")                        // 所有选中的元素

jQuery筛选器

// 过滤筛选器 ----------------------------------------------
$("li").eq(2)                      // 当前操作中第N个jQuery对象,类似索引
$("li").first()                    // 第一个元素
$("ul li").hasclass("test")        // 元素是否含有某个特定的类,返回布尔值

// 查找筛选器 ----------------------------------------------
$("div").children(".test")         // div中的每个子元素,第一层
$("div").find(".test")             // div中的包含的所有.test元素,子子孙孙

$("p").next()                      // 紧邻p元素后的一个同辈元素
$("p").nextAll()                   // p元素之后所有的同辈元素
$("#test").nextUntil("#test2")     // id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").prev()                      // 紧邻p元素前的一个同辈元素
$("p").prevAll()                   // p元素之前所有的同辈元素
$("#test").prevUntil("#test2")     // id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").parent()                    // 每个p元素的父元素
$("p").parents()                   // 每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")  // id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾

$("div").siblings()                // 所有的同辈元素,不包括自己

实例 左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>

    <script src="../jquery-3.5.1.js"></script>
    <script>
          function show(self){
//              console.log($(self).text())
              $(self).next().removeClass("hide")
              $(self).parent().siblings().children(".con").addClass("hide")

          }
    </script>
    <style>
          .menu{
              height: 500px;
              width: 30%;
              background-color: gainsboro;
              float: left;
          }
          .content{
              height: 500px;
              width: 70%;
              background-color: rebeccapurple;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: #425a66;
             color: forestgreen;}


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>

</body>
</html>

实例 tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="../jquery-3.5.1.js"></script>
    <script>
           function tab(self){
               var index=$(self).attr("xxx")
               $("#"+index).removeClass("hide").siblings().addClass("hide")
               $(self).addClass("current").siblings().removeClass("current")

           }
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
              <li xxx="c2" onclick="tab(this);">菜单二</li>
              <li xxx="c3" onclick="tab(this);">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>

      </div>
</body>
</html>

 

操作元素(属性 CSS 和 文档处理)

属性操作

// 基本属性操作 --------------------------------------------------------
$("div").attr("id");    　　　　　 　 // 返回文档中所有div的id属性值
$("div").attr("id","4");             // 设置所有div的id属性
$("div").attr({'alex':'sb'})         // 设置多个属性,字典形式
$("div").removeAttr("name");    　   // 将文档中图像的src属性删除
 
$("input[type='checkbox']").prop("checked", true);    // 选中复选框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src");    　　  // 删除img的src属性

// CSS类操作 -----------------------------------------------------------
$("p").addClass("selected");    　　 // 为p元素加上 'selected' 类
$("p").removeClass("selected");      // 从p元素中删除 'selected' 类
$("p").toggleClass("selected");      // 如果存在就删除,否则就添加

// HTML代码/本文/值 ----------------------------------------------------
$('p').html();    　　　　　　　　　　 // 返回p元素的html内容
$("p").html("Hello <b>nick</b>!");   // 设置p元素的html内容
$('p').text();    　　　　　　　　　　 // 返回p元素的文本内容
$("p").text("nick");                 // 设置p元素的文本内容
$("input").val();                    // 获取文本框中的值
$("input").val("nick");     　　　　 // 设置文本框中的内容

实例 编辑框正反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <button onclick='selectAll()'>全选</button>
        <button onclick='cancel()'>取消</button>
        <button onclick='reverse()'>反选</button>
        <table border="1" width="100px">
            <thead>
                
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1111</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>2222</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>3333</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>4444</td>
                </tr>
            </tbody>
        </table>
        
        <script src="jquery-1.8.2.js"></script>
        <script type="text/javascript">
            function selectAll(){
                $(":checkbox").prop('checked',true)
            }
            function cancel(){
                $(":checkbox").prop('checked',false)
            }
            function reverse(){
                $(":checkbox").each(function (){
                    if( $(this).prop('checked')){
                        $(this).prop('checked',false)
                    }else{
                        $(this).prop('checked',true)
                    }
                })
            }
        </script>
    </body>
</html>

实例 模态对话框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.6);
                z-index: 10;
            }
            .infoedit{
                position: fixed;
                top: 50%;
                left: 50%;
                margin-left: -150px;
                margin-top: -150px;
                width: 300px;
                height: 300px;
                background-color: white;
                z-index: 20;
            }
            .hide{
                display: none;
            }
        </style>
        <script src="jquery-1.8.2.js"></script>
        <script>
            $(function(){
                $('[target=edit]').click(function(){
                    $('.shadow,.infoedit').removeClass('hide');
                    
                    var server_info = $(this).prevAll();
                    server_info.each(function(k,v){
                        var text = $(this).text();
                        var target = $(this).attr('target');
                        $('#'+target).val(text);
                    })
                })
                
                $('#cancelEdit').click(function(){
                    $('.infoedit :text').val('');
                    $('.shadow,.infoedit').addClass('hide');
                })
                
                $('#addInfo').click(function(){
                    $('.shadow,.infoedit').removeClass('hide');
                })
            })
        </script>
    </head>
    <body>
        <button id="addInfo">添加</button>
        <table border="1">
            <thead>
                <tr>
                    <th>服务器</th>
                    <th>ip地址</th>
                    <th>端口号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td target='server'>c1.com</td>
                    <td target='ip'>10.1.1.1</td>
                    <td target='port'>8881</td>
                    <td target='edit'>编辑</td>
                </tr>
                <tr>
                    <td target='server'>c2.com</td>
                    <td target='ip'>10.1.1.2</td>
                    <td target='port'>8882</td>
                    <td target='edit'>编辑</td>
                </tr>
                <tr>
                    <td target='server'>c3.com</td>
                    <td target='ip'>10.1.1.3</td>
                    <td target='port'>8883</td>
                    <td target='edit'>编辑</td>
                </tr>
            </tbody>
        </table>
        
        <div class="shadow hide"></div>
        <div class="infoedit hide">
            <form action="" method="get">
                <p>服务器:
                    <input type="text" id='server' />
                </p>
                
                <p>ip地址:
                    <input type="text" id='ip' />
                </p>
                
                <p>端口号:
                    <input type="text" id='port' />
                </p>
                
                <input type="submit" value="提交" />
                <input type="button" value="取消" id='cancelEdit'/>
            </form>
        </div>
    </body>
</html>

CSS操作

// 样式 ----------------------------------------------------------------
$("p").css("color");          // 访问查看p元素的color属性
$("p").css("color","red");    // 设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" });    // 设置多个属性要用{}字典形式

// 位置 ----------------------------------------------------------------
$('p').offset()     //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()   //元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}
 
$(window).scrollTop()       //获取滚轮滑的高度
$(window).scrollLeft()      //获取滚轮滑的宽度
$(window).scrollTop('100')  //设置滚轮滑的高度为100
 
$(window).height()          //获取窗口的高度
$(document).height()        //获取文档的高度

// 尺寸 ----------------------------------------------------------------
$("p").height();    //获取p元素的高度
$("p").width();     //获取p元素的宽度
 
$("p:first").innerHeight()    //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth()     //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
 
$("p:first").outerHeight()    //匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth()     //匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true)    //为true时包括边距

实例 返回顶部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .goTop{
                position: fixed;
                right: 10px;
                bottom: 10px;
                width: 40px;
                height: 40px;
                background-color: darkgray;
                text-align: center;
            }
            .hide{
                display: none;
            }
        </style>
        
    </head>
    <body>
        <div style="height: 1000px;"></div>
        
        <div class="goTop hide">返回顶部</div>
        
        <script src="jquery-1.8.2.js"></script>
        <script type="text/javascript">
            
            window.onscroll = function(){

                if( $(window).scrollTop() > 50 ){
                    $(".goTop").removeClass('hide')
                }else{
                    $(".goTop").addClass('hide')
                }
            }
            
            $('.goTop').click(function(){
                
                $(window).scrollTop(0)
            })
            
        </script>
    </body>
</html>

缓慢返回顶部(带效果)

$('#backTop').bind('click',function(){
    $('html,body').animate( {scrollTop:0} );
});

注:html,body需一起使用。

实例 滚动菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .head{
                height: 50px;
                background-color: burlywood;
            }
            .menu{
                position: absolute;
                left: 0;
                background-color: ghostwhite;
                width:200px;
                height: 600px;
                float:left;
            }
            .menu-fix{
                position: fixed;
                top:10px;
            }
            .father{
                background-color: gray;
                position: absolute;
                left: 210px;
            }
            .item{
                width: 800px;
                height: 600px;
            }
            .title{
                text-align: center;
            }
            .active{
                background-color: cornflowerblue;
                color: darkgreen;
            }
        </style>
    </head>
    <body>
        <div class="head"></div>
        
        <div class="menu">
            <div class="title active" target='c1'>第一张</div>
            <div class="title" target='c2'>第二张</div>
            <div class="title" target='c3'>第三张</div>
        </div>
        
        <div class="father">
            <div class="content">
                <div class="item" con='c1'>第一章</div>
                <div class="item" con='c2'>第二章</div>
                <div class="item" con='c3'>第三章</div>
            </div>
        </div>
        
        <script src="jquery-1.8.2.js"></script>
        <script>
            window.onscroll = function(){

                var current = $(window).scrollTop()
                if(current > 50 ){
                    $('.menu').addClass('menu-fix')
                }
                else{
                    $('.menu').removeClass('menu-fix')
                }
                
                if( current + $(window).height() == $(document).height() ){
                    $('.menu').children(":last").addClass('active').siblings().removeClass('active');
                    return
                }
                
                $('.item').each(function(){

                    var item_top = $(this).offset().top;
                    var item_height = $(this).height();
                    var title = $(this).attr('con')
                    if ( current > item_top && current < item_height+item_top){
                        $(".title[target="+title+"]").addClass('active').siblings().removeClass('active')
                    }
                    
                })
                
            }
        </script>
        
    </body>
</html>

文档处理

// 内部插入 ------------------------------------------------------------
$("p").append("<b>nick</b>");    //每个p元素内后面追加内容
$("p").appendTo("div");    　　　 //p元素追加到div内后
$("p").prepend("<b>Hello</b>");  //每个p元素内前面追加内容
$("p").prependTo("div");    　   //p元素追加到div内前

// 外部插入 ------------------------------------------------------------
$("p").after("<b>nick</b>");     //每个p元素同级之后插入内容
$("p").before("<b>nick</b>");    //在每个p元素同级之前插入内容
$("p").insertAfter("#test");     //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test");    //所有p元素插入到id为test元素的前面

// 替换 ----------------------------------------------------------------
$("p").replaceWith("<b>Paragraph. </b>");    //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉所有 selector匹配到的元素

// 删除 ----------------------------------------------------------------
$("p").empty();     //删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove();    //删除所有匹配的元素,包括本身
$("p").detach();    //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

// 复制 ----------------------------------------------------------------
$("p").clone()    　　//克隆元素并选中克隆的副本
$("p").clone(true)   //布尔值指事件处理函数是否会被复制

实例 克隆方法的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
            <div class="outer">
                <div class="condition">

                        <div class="icons" style="display:inline-block">
                            <a onclick="add(this);"><button>+</button></a>
                        </div>

                        <div class="input" style="display:inline-block">
                            <input type="checkbox">
                            <input type="text" value="alex">
                        </div>
                </div>
            </div>

<script src="jquery-1.8.2.js"></script>
    <script>

            function add(self){
                var $duplicate = $(self).parent().parent().clone();
                $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
                $duplicate.appendTo($(self).parent().parent().parent());

            }
           function removed(self){

               $(self).parent().parent().remove()

           }

    </script>
</body>
</html>

更多请查询：jQuery API 中文在线手册

 

posted @ 2020-07-05 23:24  ChungZhao  阅读(157)  评论(0)  编辑  收藏  举报