欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

体验/JQuery基础一

程序员文章站 2024-03-17 18:02:16
...

入口函数写法

$(document).ready(function () {})

常用简写

$(function () {
})

选中奇数和偶数

$(function () {
        //获取元素  $()  选择器作为参数  ---》获取元素
        //隐形迭代  :even偶数下标  :odd 奇数下标
        //链式调用
        $('ul li:even').css('background-color','yellow').text('我是奇数行')
        $('ul li:odd').css({'background-color':'red',width:'300px',height:'100px','border':'1px solid #ccc'})

    });

jquery对象和js对象转换

<body>

<div  class="box"></div>
<script src="jquery-3.0.0.js"></script>
<script>
    var box = document.getElementsByClassName('box')[0]//js对象
    /*
    * box.style.width = '200px'
    * */
    /*$(box).css({'width':'200px',height:'200px',backgroundColor:'red'});*/ //设置样式
    var $box = $('.box');//jquery
    $box[0].style.width = '200px';
    $box[0].style.height = '200px'
    $box[0].style.backgroundColor = 'red'
    //js对象和jquery对象的转换
    //js--->jquery 花钱  box ---> $(box)
    //jquery->js  box --->box[0]
</script>
</body>

文本操作

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .box {
            width: 30%;
            height: 400px;
            margin: 0 auto;
            background-color: red;

        }
    </style>
</head>
<body>

<div class="box"></div>
<input type="text" id="pass">
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        $('.box').html('<em>我是div元素</em>').css({"border-radius":"50%","line-height":"400px","text-align":"center"})
        // onblur  $对象.blur(function(){})  jquery所有事件不加on
        $('#pass').blur(function () {
            //获取用户输入的值
            console.log(this) // bug  js当中事件对象this
            //jquery 中的事件 对象 $(this)
            console.log($(this).val())
        })
    });
</script>

属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box" ></div>
<img src="images/jdTop.jpg" alt="">
<script src="jquery-3.0.0.js"></script>

<script>
    $(function () {
        $('.box').attr('id',200)
        $('img').attr('src','images/samll.jpg')
    });
</script>
</body>
</html>

样式操作

<script>
    $(function () {
        // 除非是特别简单样式 或者是计算样式  opacity 0,0.3,left top
        $('.box').css({borderRadius:'50%'})

    });

</script>

行外样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 100px auto;
        }
        .cloth {
            border-radius: 50%;
            opacity: 0.6;

        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button>隐藏</button>
<!--<button>移除</button>
<button>切换</button>-->
<div class="box "></div>
<script src="jquery-3.0.0.js"></script>
<script>


    $(function () {
        //对象:eq(i) i下标获取第i+1个元素
        $('button:eq(0)').click(function () {
            $('.box').toggleClass('hide')
            if($('.box').hasClass('hide')){ //判断当前元素是否包含隐藏样式
                $(this).text('显示')
            }
            else {
                $(this).text('隐藏')
            }
        })
      /*  $('button:eq(1)').click(function () {
            $('.box').removeClass('cloth')
        })
        $('button:eq(2)').click(function () {
            $('.box').toggleClass('cloth')
        })*/
    });

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

选择器

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

<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="text" hidden> <!--隐藏-->
<div class="box">
    <p>我是第一行
       <p>我是第二个p</p>
        <span>我是p里的span</span>
        <div>213
           <span>111111</span>
        </div>
    </p>
    <span>我是span</span>
</div>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        //1: prev + next
      /*  var $obj = $('p ~ span')
        console.log($obj)*/
        //找没有被默认选择中的  :checked 选择中的是被勾选的  :not(:checked)未被选中的
        var $inputs = $('input:not(:checked)')
        $(':header').css({'font-weight':'100'});//选择所有h1,h2...
    });
</script>
</body>
</html>

突出显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        ul li {
            list-style: none;
        }
        body {
            background-color: #ccc;
        }
        ul {
            width: 47%;
            height: auto;
            margin: 100px auto;
            border: 3px solid #fff;
            padding: 30px;
            background-color: #000;
        }
        ul li {
            float: left;
            margin-right: 30px;

        }
        ul li img {
            width: 200px;
            height: 200px;
            display: block;
        }
        .clearFix::after {
            content: '';
            line-height: 0;
            display: block;
            clear: both;
        }
        /*取消3 6 li元素的外间距*/
        ul li:nth-of-type(3n){
            margin-right: 0;

        }
        /*前三张 */
        ul li:nth-of-type(-n+3){
            margin-bottom: 30px;
        }

    </style>
</head>
<body>

<ul class="clearFix">
    <li><img src="images/01.gif" alt=""></li>
    <li><img src="images/02.gif" alt=""></li>
    <li><img src="images/03.gif" alt=""></li>
    <li><img src="images/05.gif" alt=""></li>
    <li><img src="images/06.gif" alt=""></li>
    <li><img src="images/08.gif" alt=""></li>
</ul>
<script src="jquery-3.0.0.js"></script>
<script>

    $(function () {
        //所有Li元素绑定鼠标移入事件
        $('ul li').mouseover(function () {
            //当前对象透明度为1 其余兄弟是透明度0.4
            $(this).css('opacity','1').siblings().css('opacity','0.4')
        })
        //鼠标移出ul ul的透明度为1
        $('ul').mouseout(function () {
            console.log($(this))
            $(this).children().css('opacity','1')
        })
        /*对象.css('','')
        * 对象.css({ 属性名1:'属性值','属性名02':‘属性值’   })
        * */
    });
</script>
</body>
</html>

突出显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        ul li {
            list-style: none;
        }
        body {
            background-color: #ccc;
        }
        ul {
            width: 47%;
            height: auto;
            margin: 100px auto;
            border: 3px solid #fff;
            padding: 30px;
            background-color: #000;
        }
        ul li {
            float: left;
            margin-right: 30px;

        }
        ul li img {
            width: 200px;
            height: 200px;
            display: block;
        }
        .clearFix::after {
            content: '';
            line-height: 0;
            display: block;
            clear: both;
        }
        /*取消3 6 li元素的外间距*/
        ul li:nth-of-type(3n){
            margin-right: 0;

        }
        /*前三张 */
        ul li:nth-of-type(-n+3){
            margin-bottom: 30px;
        }

    </style>
</head>
<body>

<ul class="clearFix">
    <li><img src="images/01.gif" alt=""></li>
    <li><img src="images/02.gif" alt=""></li>
    <li><img src="images/03.gif" alt=""></li>
    <li><img src="images/05.gif" alt=""></li>
    <li><img src="images/06.gif" alt=""></li>
    <li><img src="images/08.gif" alt=""></li>
</ul>
<script src="jquery-3.0.0.js"></script>
<script>

    $(function () {
        //所有Li元素绑定鼠标移入事件
        $('ul li').mouseover(function () {
            //当前对象透明度为1 其余兄弟是透明度0.4
            $(this).css('opacity','1').siblings().css('opacity','0.4')
        })
        //鼠标移出ul ul的透明度为1
        $('ul').mouseout(function () {
            console.log($(this))
            $(this).children().css('opacity','1')
        })
        /*对象.css('','')
        * 对象.css({ 属性名1:'属性值','属性名02':‘属性值’   })
        * */
    });
</script>
</body>
</html>

显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<button class="btn">显示</button>
<button class="btn">隐藏</button>
<button class="btn">滑上去</button>
<button class="btn">滑下来</button>
<button class="btn">淡入</button>
<button class="btn">淡出</button>

<div class="box"></div>

<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {

        $('.btn').eq(0).click(function () {
            $('.box').show(2000,function () {
                //元素显示了以后执行本函数
                $(this).css('border-radius','50%')

            });

        })
        $('.btn').eq(1).click(function () {
            $('.box').hide(2000);

        })
        $('.btn').eq(2).click(function () {
            $('.box').slideUp(2000);

        })
        $('.btn').eq(3).click(function () {
            $('.box').slideDown(2000);

        })
        $('.btn').eq(4).click(function () {
            $('.box').fadeIn(2000);

        })
        $('.btn').eq(5).click(function () {
            $('.box').fadeOut(2000);

        })
    });

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

动画

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

        .box {
            width: 300px;
            height: 300px;
            background-color: #55a532;
            position: absolute;
            left: 30px;
            top:40px;
        }
    </style>

</head>
<body>

<div class="box"></div>
<button class="btn">动起来</button>
<button class="btn">不许动</button>
<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        $('.btn:first').click(function () {
            $('.box').animate({left:'400px',top:'400px'},2000,'swing',function () {
                console.log('动画完成')
            }).animate({left:'800px',top:'0px'},2000)
        });
        $('.btn:last').click(function () {
            $('.box').stop() //延续  没有清空序列
        });
    });
</script>
</body>
</html>

手风琴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box {
            width: 300px;
            height: auto;
            border: 1px solid #ccc;

        }
        .box .item {
           width: 100%;height: auto;
            border-bottom: 1px solid #bbb;
        }
        .title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: skyblue;
        }
        .content {
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;

        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="item"><div class="title">标题1</div><div class="content hide">我是弹出来的div1</div></div>
    <div class="item"><div class="title">标题2</div><div class="content hide">我是弹出来的div2</div></div>
    <div class="item"><div class="title">标题3</div><div class="content hide">我是弹出来的div3</div></div>
    <div class="item"><div class="title">标题4</div><div class="content hide">我是弹出来的div4</div></div>
</div>

<script src="jquery-3.0.0.js"></script>
<script>
    $(function () {
        //点击title 任意一个  绑定点击事件
        //如果点击某一个标题  显示这个标题对应的内容
        //其余兄弟隐藏
        $('.item > .title').click(function () {
            if($(this).next().css('display')==='block'){
                    $(this).next().slideUp(1000)
            }
            else {
            $(this).next().slideDown(1000).parent().siblings().find('.content').slideUp(1000)
            }
            console.log($(this).next().css('display'))
        })
    })
</script>
</body>
</html>

 

上一篇： Python的类型判断：isinstance

下一篇：

推荐阅读