正文

前端神器之jquery(代码片段)

zhangyafei  zhangyafei  2023-01-10  627

关键词：

jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

jquery的特点：

1.jQuery 是一个 JavaScript 库。

2.jQuery 极大地简化了 JavaScript 编程。

3.jQuery 很容易学习。

查找元素

1.选择器

　　基本选择器
    $("div").css("color","red")
    $("*").css("color","red")
    $("#p1").css("color","red")

    $(".outer").css("color","red")

    $(".inner,p,div").css("color","red")


    层级选择器

    $(".outer p").css("color","red")
    $(".outer>p").css("color","red")
    $(".outer+p").css("color","red")
    $(".outer~p").css("color","red")

    基本筛选器

    $("li:first").css("color","red")
   $("li:eq(0)").css("color","red") //序号
    $("li:gt(2)").css("color","red") //大于
    $("li:even").css("color","red") //偶数
    $("li:lt(2)").css("color","red") //小于

    属性选择器
    $("[alex=‘sb‘][id=‘p1‘]").css("color","red")

    表单选择器
     $("[type=‘text‘]").css("width","200px")
     $(":text").css("width","400px")

2.筛选器

 筛选器
    $("li").eq(2).css("color","red");
    $("li").first().css("color","red");
    $("li").last().css("color","red");

    查找筛选器

    $(".outer").children("p").css("color","red");
    $(".outer").find("p").css("color","red");

    $("li").eq(2).next().css("color","red");
    $("li").eq(2).nextAll().css("color","red");
    $("li").eq(2).nextUntil("#end").css("color","red");

    $("li").eq(4).prev().css("color","red");
    $("li").eq(4).prevAll().css("color","red");
    $("li").eq(4).prevUntil("li:eq(0)").css("color","red");

    console.log($(".outer .inner p").parent().html())
   $(".outer .inner p").parents().css("color","red");
   $(".outer .inner p").parentsUntil("body").css("color","red");

实例：模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content
            height: 1800px;
        
        .shade
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;
        
        .model
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        
        .hide
            display: none;
        
    </style>
</head>
<body>
<div class="content">
    <button onclick="show(this)">show</button>kjdksnakdnaskldsdkldladksladdkaldadkal
</div>
<div class="shade hide"></div>
<div class="model hide">
    <button onclick="cancel(this)">cancel</button>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    function show(self) 
        $(self).parent().siblings().removeClass(‘hide‘);
    
    function cancel(self) 
        // $(self).parent().addClass(‘hide‘);
        // $(self).parent().prev().addClass(‘hide‘);
        // $(self).parent().parent().children(‘.model,.shade‘).addClass(‘hide‘);
        $(self).parent().prev().addClass(‘hide‘).next().addClass(‘hide‘);
    

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

View Code

实例：层次菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
        .outer
            height: 1000px;
            width: 100%;
        
        .menu
            float: left;
            background-color: #a47e3c;
            width: 30%;
            height: 500px;
        
        .content div
            float: left;
            height: 500px;
            background-color: #0077cc;
            width: 70%;
            display: none;
        
        .item .title
            background-color: #4cae4c;
            line-height: 40px;
        
        .hide
            display: none;
        
        .content .active
            display: block;
        
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con current">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con next hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con next1 hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
        <div>tab文字内容四</div>
        <div>tab文字内容五</div>
        <div>tab文字内容六</div>
        <div>tab文字内容七</div>
        <div>tab文字内容八</div>
        <div>tab文字内容九</div>
    </div>

    <script>
        function show(self) 
            $(self).next().slideDown().parent().siblings().children(‘.con‘).slideUp();
            // $(self).next().removeClass(‘hide‘);
            // $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
            // $(‘#contents div‘).eq($(self).parent().index()).addClass(‘active‘).siblings().removeClass(‘active‘);
        
        $(‘.item .current div‘).click(function () 
            $(‘#contents div‘).eq($(this).index()).addClass(‘active‘).siblings().removeClass(‘active‘);
        );

        $(‘.item .next div‘).click(function () 
            $(‘#contents div‘).eq($(this).index()+3).addClass(‘active‘).siblings().removeClass(‘active‘);
        );

        $(‘.item .next1 div‘).click(function () 
            $(‘#contents div‘).eq($(this).index()+6).addClass(‘active‘).siblings().removeClass(‘active‘);
        );

        // function show1(self) 
        //     $(self).next().removeClass(‘hide‘);
        //     $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
        //     $(‘#contents div‘).eq($(self).parent().index()+3).addClass(‘active‘).siblings().removeClass(‘active‘);
        // 
        // function show2(self) 
        //     $(self).next().removeClass(‘hide‘);
        //     $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
        //     $(‘#contents div‘).eq($(self).parent().index()+6).addClass(‘active‘).siblings().removeClass(‘active‘);
        // 
    </script>
</div>
</body>
</html>

View Code

操作元素

1.属性操作

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

<script>
    console.log($(‘.div1‘).hasClass(‘fei‘));
    console.log($(‘.div1‘).attr(‘con‘));
    console.log($(‘.div1‘).attr(‘con‘,‘c2‘));

    console.log($(‘:checkbox:first‘).attr(‘checked‘));
    console.log($(‘:checkbox:last‘).attr(‘checked‘));

    console.log($(‘:checkbox:first‘).prop(‘checked‘));
    console.log($(‘:checkbox:last‘).prop(‘checked‘));

    console.log($(‘div‘).prop(‘con‘)); //定制属性
    console.log($(‘div‘).prop(‘class‘)); //固有属性

    console.log($(‘#id1‘).html());
    console.log($(‘#id1‘).text());
    console.log($(‘#id1‘).html(‘<h1>zhang</h1>‘));
    console.log($(‘#id1‘).text(‘<h1>zhang</h1>‘));

    console.log($(‘:text‘).val()); //必须是固有属性
    console.log($(‘:text‘).next().val());
    console.log($(‘:text‘).val(‘789‘));

    $(‘#id1‘).css(‘color‘:‘red‘,‘background-color‘:‘blue‘);
</script>

View Code

2.CSS操作

CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
            margin: 0px;
        
        .div1,.div2
            width: 200px;
            height: 1000px;
        
        .div1
            border: 6px solid #ffff00;
            padding: 10px;
            margin:2px;
            background-color: #4cae4c;
        
        .div2
            background-color: #0077cc;
        
        .outer
            position: relative;
        
    </style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    //相对于视口的偏移量
    console.log($(‘.div1‘).offset().top);
    console.log($(‘.div1‘).offset().left);

    console.log($(‘.div2‘).offset().top);
    console.log($(‘.div2‘).offset().left);
    //相对于已定位父级的偏移量
    console.log($(‘.div1‘).position().top);
    console.log($(‘.div1‘).position().left);

    console.log($(‘.div2‘).position().top);
    console.log($(‘.div2‘).position().left);

    // console.log($(‘body‘).scrollTop())
    console.log($(‘.div1‘).height(‘300‘));
    console.log($(‘.div1‘).innerHeight()); //包括padding
    console.log($(‘.div1‘).outerHeight()); //包括border和padding
    console.log($(‘.div1‘).outerHeight(true)); //包括border和padding和margin

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

View Code

3.文档处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">
    <p>ppppp</p>
</div>
<button>add</button>
<script src="js/jquery-3.1.1.js"></script>
<script>
    $(‘button‘).click(function () 
        // $(‘.c1‘).append(‘<h1>hello</h1>‘);
        var $ele = $(‘<h1></h1>‘);
        $ele.html(‘hello world‘);
        $ele.css(‘color‘,‘red‘);
        //内部插入
        // $(‘.c1‘).append($ele);
        // $ele.appendTo(‘.c1‘);
        // $(‘.c1‘).prepend($ele);
        // $ele.prependTo(‘.c1‘);
        // 外部插入
        // $(‘.c1‘).after($ele);
        // $ele.insertAfter(‘.c1‘);
        // $(‘.c1‘).before($ele);
        //替换
        // $(‘p‘).replaceWith($ele);
        //删除与清空
        // $(‘.c1‘).empty();
        // $(‘.c1‘).remove();
        //复制
        var $ele1 = $(self).clone();
        $(‘.c1‘).after($ele1);

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

View Code

克隆练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script src="js/jquery-3.1.1.js"></script>
<script>
    function add(self) 
        var $clone = $(self).parent().clone();
        $clone.children(‘button‘).text(‘-‘).attr(‘onclick‘,‘remove(this)‘);
        $(‘.outer‘).append($clone);
    
    function remove(self) 
        $(self).parent().remove();
    
</script>
</body>
</html>

View Code

实例：全反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<button onclick="selectall()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px;">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    function selectall() 
        $(‘:checkbox‘).each(function () 
            $(this).prop(‘checked‘,true);
        )
    
    function cancel() 
        $(‘:checkbox‘).each(function () 
            $(this).prop(‘checked‘,false);
        )
    
    function reverse() 
        $(‘:checkbox‘).each(function () 
            $(this).prop(‘checked‘,!$(this).prop(‘checked‘));
            // if($(this).prop(‘checked‘)==false)
            //     $(this).prop(‘checked‘,true);
            // 
            // else
            //     $(this).prop(‘checked‘,false)
            // 
        )
    
</script>
</body>
</html>

View Code

实例：左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <style>
        .outer
            height: 1000px;
            width: 100%;
        
        .menu
            float: left;
            background-color: #a47e3c;
            width: 30%;
            height: 500px;
        
        .content div
            float: left;
            height: 500px;
            background-color: #0077cc;
            width: 70%;
            display: none;
        
        .item .title
            background-color: #4cae4c;
            line-height: 40px;
        
        .hide
            display: none;
        
        .content .active
            display: block;
        
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con current">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单二</div>
            <div class="con next hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this)">菜单三</div>
            <div class="con next1 hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
        <div>tab文字内容四</div>
        <div>tab文字内容五</div>
        <div>tab文字内容六</div>
        <div>tab文字内容七</div>
        <div>tab文字内容八</div>
        <div>tab文字内容九</div>
    </div>

    <script>
        function show(self) 
            $(self).next().slideDown().parent().siblings().children(‘.con‘).slideUp();
            // $(self).next().removeClass(‘hide‘);
            // $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
            // $(‘#contents div‘).eq($(self).parent().index()).addClass(‘active‘).siblings().removeClass(‘active‘);
        
        $(‘.item .current div‘).click(function () 
            $(‘#contents div‘).eq($(this).index()).addClass(‘active‘).siblings().removeClass(‘active‘);
        );

        $(‘.item .next div‘).click(function () 
            $(‘#contents div‘).eq($(this).index()+3).addClass(‘active‘).siblings().removeClass(‘active‘);
        );

        $(‘.item .next1 div‘).click(function () 
            $(‘#contents div‘).eq($(this).index()+6).addClass(‘active‘).siblings().removeClass(‘active‘);
        );

        // function show1(self) 
        //     $(self).next().removeClass(‘hide‘);
        //     $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
        //     $(‘#contents div‘).eq($(self).parent().index()+3).addClass(‘active‘).siblings().removeClass(‘active‘);
        // 
        // function show2(self) 
        //     $(self).next().removeClass(‘hide‘);
        //     $(self).parent().siblings().children(‘.con‘).addClass(‘hide‘);
        //     $(‘#contents div‘).eq($(self).parent().index()+6).addClass(‘active‘).siblings().removeClass(‘active‘);
        // 
    </script>
</div>
</body>
</html>

View Code

事件

页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function()) -----------> $(function())

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $(‘ul‘).on(‘click‘, ‘li‘, function()console.log(‘click‘);)就是筛选出ul下的li给其绑定
    //  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$(‘ul li‘).on(‘click‘, function()console.log(‘click‘);)的绑定方式和
        //$(‘ul li‘).bind(‘click‘, function()console.log(‘click‘);)一样；我通过js给ul添加了一个
        //li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的

        //但是用$(‘ul‘).on(‘click‘, ‘li‘, function()console.log(‘click‘);方式绑定，然后动态添加
        //li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) 
                alert(event.data.foo);
                
             $("li").on("click", foo: "bar", myHandler)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
<script>
    //1.页面加载
    // $(document).ready(function () 
    //     $(‘ul li‘).html(6);
    // );
    // $(function () 
    //     $(‘ul li‘).html(666);
    // );
    //2.事件绑定简写
    $(function () 
        $(‘li‘).click(function () 
        alert(‘666666‘);
    );
    // $(‘li‘).unbind(‘click‘);
    // $(‘ul li‘).bind(‘click‘,function () 
    //     alert(‘666666‘);
    // )
    $(‘button‘).click(function () 
            var $ele=$(‘<li>‘);
            var len=$(‘ul li‘).length;
            $ele.html((len+1)*111);
            $(‘ul‘).append($ele);
    )

    //3.事件委托
    $(‘ul‘).on(‘click‘,‘li‘,function () 
        alert(‘666666‘);
    )
    );
</script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<button>add</button>

</body>
</html>

View Code

实例：返回顶部-滑轮滚动监听事件

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

        .div2
            width: 100%;
            height: 1000px;
        
        .div1
            border: 6px solid #ffff00;
            padding: 10px;
            margin:2px;
            width: 40%;
            height: 150px;
            overflow: scroll;
            background-color: #4cae4c;
        
        .div2
            background-color: #0077cc;
        
         .returnTop
             position: fixed;
             right: 20px;
             bottom: 20px;
             width: 90px;
             height: 50px;
             background-color: gray;
             color: white;
             text-align: center;
             line-height: 50px;
         
         .hide
             display: none;
         

    </style>
</head>
<body>
<div class="div1">
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
</div>
<div class="div2">
    <button onclick="returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    window.onscroll=function () 
        console.log($(window).scrollTop());
        if($(window).scrollTop()>100)
            $(‘.returnTop‘).removeClass(‘hide‘);
         else
            $(‘.returnTop‘).addClass(‘hide‘);
        
    ;
    // function returnTop() 
    //     // $(window).scrollTop(0);
    //     $(‘.div1‘).scrollTop(0);
    // 
    $(‘.div2 button‘).click(function () 
        $(‘.div1‘).scrollTop(0);
    )

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

View Code

动画效果

显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<button onclick="show()">显示</button>
<button ONCLICK="hide()">隐藏</button>
<button onclick="qiehuan()">切换</button>

<script src="js/jquery-3.1.1.js"></script>
<script>
    function show() 
        $(‘div‘).show(1000);
    

    function hide() 
        $(‘div‘).hide(1000,function () //回调函数：动画效果完成之后会触发
            alert(‘隐藏了！‘)
        );
    
    function qiehuan() 
        $(‘div‘).toggle(1000);
    
</script>
</body>

</html>

View Code

滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function()
     $("#slideDown").click(function()
         $("#content").slideDown(1000);
     );
      $("#slideUp").click(function()
         $("#content").slideUp(1000);
     );
      $("#slideToggle").click(function()
         $("#content").slideToggle(1000);
     )
  );
    </script>
    <style>

        #content
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

View Code

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function()
   $("#in").click(function()
       $("#id1").fadeIn(1000);


   );
    $("#out").click(function()
       $("#id1").fadeOut(1000);

   );
    $("#toggle").click(function()
       $("#id1").fadeToggle(1000);


   );
    $("#fadeto").click(function()
       $("#id1").fadeTo(1000,0.4);

   );
);



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

View Code

扩展方法

<script>
    
$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。


    jQuery.extend(
          min: function(a, b)  return a < b ? a : b; ,
          max: function(a, b)  return a > b ? a : b; 
        );
    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend(
    "print":function()
        for (var i=0;i<this.length;i++)
            console.log($(this)[i].innerHTML)
        

    
);

$("p").print();
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script src="js/jquery-3.1.1.js"></script>
<script>
    //jquery调用方法
    // $.each(obj,function () 
    //
    // );
    // $(‘‘).each(function () 
    //
    // );
    $.extend(
        Myprint:function () 
            console.log(‘hello‘)
        
        );
    $.Myprint();
    jQuery.extend(
          min: function(a, b)  return a < b ? a : b; ,
          max: function(a, b)  return a > b ? a : b; 
        );
    console.log($.min(3,4));

    $.fn.extend(
        get_text:function () 
           // for(var i=0;i<this.length;i++)
           //     console.log(this[i].innerHTML)
           // 
           $.each($(this),function (x,y) 
                // console.log(y.innerHTML)
                console.log($(y).html())
            )
        
    );
    $(‘p‘).get_text();
</script>
</body>
</html>

View Code

实例：轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    body
        background-color: black;
    
    .main
        position: relative;
        width: 1000px;
        height: 400px;
        overflow: hidden;
        margin: 100px auto;
    
    .main ul.img li
        position: absolute;
        top: 0;
        left: 0;
        list-style: none;
    

    .main ul li img
        width: 1000px;
        height: 400px;
    
    .main .dom
        position: absolute;
        bottom: 20px;
        left: 340px;
        /*width: 200px;*/
        list-style: none;
    
    .main .dom li
        display: inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: white;
        margin-left: 40px;
        text-align: center;
        line-height: 18px;
        opacity: 90%;
        cursor: pointer;
    
    .btn
        display: none;
        background-color: lightgray;
        position: absolute;
        top: 40%;
        width: 30px;
        height: 60px;
        cursor: pointer;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        opacity: 0.7;
    
    .left
        left: 0px;
    
    .right
        right: 0px;
    
    .main:hover .btn
        display: block;
    
    .main ul.dom .active
        background-color: red;
    
    .hide
        display: none;
    
</style>
<body>
<div class="main">
    <ul class="img">
        <li><a href=""><img src="images/beijing3.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/beijing2.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/beijing1.png" alt=""></a></li>
        <li class="hide"><a href=""><img src="images/xiaomen.png" alt=""></a></li>
    </ul>
    <span class="btn left"><</span>
    <span class="btn right">></span>
    <ul class="dom">
        <!--<li class="active"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>
</div>

<script src="jQuery/js/jquery-3.1.1.js"></script>
<script>

    //通过jquery自动创建按钮标签
    var img_num = $(‘.img li‘).length;
    for(var i=0;i<img_num;i++)
        $(‘.dom‘).append(‘<li></li>‘);
    
    $(‘.dom li‘).eq(0).addClass(‘active‘);

    //手动轮播
    var num = 0;
    $(‘.dom li‘).mouseover(function () 
        num = $(this).index();
        $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
        // $(‘.img li‘).eq(index).show().siblings().hide();
        // $(‘.img li‘).eq(index).fadeIn(1000).siblings().fadeOut(1000);
        $(‘.img li‘).eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    )

    //自动轮播
    var clock = setInterval(auto_play,3000);
    function auto_play() 
        if (num==img_num-1)
            num=-1;
        
        num++;
        $(‘.dom li‘).eq(num).addClass(‘active‘).siblings().removeClass(‘active‘);
        $(‘.img li‘).eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    
    function play_L() 
        if (num==0)
            num=img_num;
        
        num--;
        $(‘.dom li‘).eq(num).addClass(‘active‘).siblings().removeClass(‘active‘);
        $(‘.img li‘).eq(num).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    

    //鼠标悬浮
    $(‘.main‘).hover(function () 
        clearInterval(clock);
    ,function () 
        clock = setInterval(auto_play,3000);
    );

    //button加定播
    $(‘.right‘).click(auto_play);
    $(‘.left‘).click(play_L);

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

View Code

前端编程之jquery(代码片段)

什么是jQueryjQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程，宗旨“Writeless,domore.“jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQu... 查看详情

前端之jquery(代码片段)

一、jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“二、jQuer... 查看详情

前端之jquery(代码片段)

jQueryjQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“jQuery的优势一... 查看详情

前端之jquery(代码片段)

COPY自强仔找到div标签并给div标签设置为红色//原生js操作vard1Ele=document.getElementById(‘d1‘);d1Ele.style.color=‘red‘;//jQuery操作$(‘#d1‘).css(‘color‘,‘blue‘);基础语法$(selector).action()//样式演变，原本应该jQuery();//为了简化$( 查看详情

前端之jquery(代码片段)

01-jQuery的介绍1.为什么要使用jQuery在用js写代码时，会遇到一些问题：window.onload事件有事件覆盖的问题，因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐，代码量多。代码很乱，各个页面到处都是。动画效... 查看详情

05-前端之jquery(代码片段)

一.jQuery是什么？　　<1>jQuery由美国人JohnResig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。　　<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITELESS,DOMORE!　　<3>它是轻量... 查看详情

小猿圈前端之jquery语法(代码片段)

现在为什么越来越多的人使用jQuery框架？原因是JQuery很容易上手、可以利用很少的代码实现很强大的功能，代码精简而高效；可以解决浏览器的兼容问题，还有和ajax的完美结合，导致了更多人使用jQuery框架，下面小猿圈加加说... 查看详情

前端之jquery2(代码片段)

jquery属性操作1、html()取出或设置html内容//取出html内容var$htm=$(‘#div1‘).html();//设置html内容$(‘#div1‘).html(‘<span>添加文字</span>‘);2、text()取出或设置text内容//取出文本内容var$htm=$(‘#div1‘).text();//设置文本内容$(‘#div1... 查看详情

前端开发之jquery属性和文档操作(代码片段)

主要内容：　　1、jQuery属性操作　　2、jQuery文档操作一、jQuery属性操作　　1、什么是jQuery的属性操作？　　　　jQuery的属性操作模块包括四个部分：html属性操作，dom属性操作，类样式操作和值操作。　　　（1）html属性操... 查看详情

前端开发之jquery效果篇(代码片段)

主要内容：　　1、显示与隐藏效果　　2、滑动效果　　3、淡入与淡出效果　　4、动画效果　　5、弹出广告效果一、显示与隐藏　　显示与隐藏即show()和hide()，能够控制元素显示或隐藏。　　实例：<scripttype="text/javascript... 查看详情

前端之jquery:简介,选择器,动画效果,属性操作;(代码片段)

jQuery简介jQuery选择器jQuery动画效果jQuery属性操作 jQuery简介为什么要使用jQuery:答:因为优秀.　　什么是jQuery:jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能... 查看详情

前端开发之jquery位置属性和筛选方法(代码片段)

主要内容：　　1、jQuery的位置属性及实例　　　　（1）位置属性　　　　（2）实例---仿淘宝导航栏　　2、jQuery的筛选方法及实例　　　　（1）筛选方法　　　　（2）实例一：嵌套选项卡　　　　（3）实例二：小米官网滑动... 查看详情

前端知识点回顾之重点篇——jquery实现的原理(代码片段)

jQueryjQuery的实现原理参考：https://blog.csdn.net/zhouziyu2011/article/details/70256659外层沙箱和命名空间$为了避免声明了一些全局变量而污染，把代码放在一个“沙箱执行”。jQuery具体的实现，都被包含在了一个立即执行的匿名函数构造的... 查看详情

前端基础之jquery(代码片段)

前端知识之jQueryjQuery2006年1月发布的1.0版本目前在市场上,1.x,2.x,3.x.功能的完善在1.x,2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码3.x的时候增加es的新特性以及调整核心代码的结构核心:writeless,domore官网:https://jquery... 查看详情

前端之jquery(代码片段)

...AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单... 查看详情