day56 Pyhton 前端Jquery08

前端

内容回顾:

　　-BOM

　　-jquery介绍

　　-jquery下载和引入方式

　　　　npm install jquery　　

　　-jquery的选择器

　　　　-基本选择器

　　　　　　-通配符选择器

　　　　　　- id选择器

　　　　　　- 类选择器

　　　　　　- 标签选择器

　　　　- 高级选择器

　　　　　　- 后代空格表示

　　　　　　-子代 >

　　　　　　- 毗邻兄弟 +

　　　　　　- 兄弟 ~

　　　　　　- 组合选择器 div,p,a

　　　　　　- 交集选择器 div,active

　　　　　　- 属性选择器 $('input[type="text"]')

　　　　- jquery的动画效果

　　　　　　- 普通动画

　　　　　　　　先要停掉动画 stop()

　　　　　　　　　- show(3000,fn)

　　　　　　　　　- hide()

　　　　　　　　　- toggle(3000,fn)

　　　　　　- 卷帘门效果

　　　　　　　　 - slideDown()

　　　　　　　　 - slideUp()

　　　　　　　　 - slideToggle()

　　　　　　- 淡入淡出

　　　　　　　　 - fadeIn()

　　　　　　　　 - fadeOut()

　　　　　　　　　- fadeToggle()

　　　　- jquery和js对象转换

　　　　　　js===>jquery

　　　　　　$(jsDOM对象)

　　　　　　jquery==>jsDOM对象

　　　　　　　　$('div')[0]

　　　　　　　　$('div').get(0)

今日内容:

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

        li:nth-child(3){

            background: deeppink;

        }

    </style>

</head>

<body>

    <ul>

        <li class="item1">alex</li>

        <li class="item1">得劲</li>

        <li class="item1">裤架为</li>

        <li class="item1">王家辉</li>

    </ul>

    <input type="text">

    <input type="radio" checked name="sex" value="1">男

    <input type="radio" name="sex" value="0">女

    <select name="" id="">

        <option value="smoke" >抽烟</option>

        <option value="drink">喝酒</option>

        <option value="tangtou" selected>烫头</option>

        <option value="koufoot">抠脚</option>

    </select>

    <button>提交</button>

    <script>

        //ajax

        //筛选选择器

        $('ul li:eq(3)').css('color','yellow');//eq从0开始选择

        $('ul li:first').css('color','red');

        $('ul li:last').css('color','red');

        $('ul li:nth-child(4)').css('background','yellow');//从1开始选择

        // console.log($('input[type=radio]:checked'));

        // console.log($('select option:selected').text());

        $('button').click(function () {

             console.log($('input[type=radio]:checked'));

        })

    </script>

</body>

　　-补充选择器(筛选选择器,筛选的方法)

　　　　-筛选选择器

　　　　　　-eq() 获取匹配的元素索引从0开始

　　　　　　-first()

　　　　　　-last()

　　　　　　-属性选择器$('ul li:nth-child(4)')

　　　　　　-$('input [type=radio]:checked') 获取选中的单选的元素

　　　　　　-$('select option:selected').text() 获取下拉框被选中的元素

<body>

    <ul>

        <li class="item1">

            <a href="javascript:void(0);">alex</a>

            <ol>

                <li>小茹</li>

            </ol>

        </li>

        <li class="item2">

            <p class="active">得劲</p>

        </li>

        <li class="item3">裤架为</li>

        <li class="item4">王家辉</li>

    </ul>

    <script>

        //find(selector)

        console.log($('ul').find('li.item1 a').css('color','red'))

        //链式编程

        $('ul').find('li.item1 a').css('color','red').click(function () {

            //html() 如果没有参数，表示获取值，如果有一个参数，表示设置值

            alert($(this).html());

            console.log($(this).html('黄文泰'));

            $(this).html('黄文泰').css({'color':'yellow'})

        });

        console.log($('ul').find('*'));

        //获取的是亲儿子们

        console.log($('ul').children());

        // $('ul li:eq(3)')

        console.log($('ul li').eq(3))

        //获取的是亲爹爹

        console.log( $('p.active').parent())

        console.log( $('.item1').siblings('.item2'));

    </script>

- 筛选的方法
            - $('ul').find('li.active') 查找后代（儿子和孙子。。。。）元素
            - children() 查找亲儿子
            - eq() 获取指定的元素索引从0 开始
            - parent() 获取亲爹
            - siblings() 选取兄弟（除它本身之外）

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

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        ul{

            list-style: none;

        }

        div.box{

            width: 600px;

            height: 600px;

        }

        ul{

            overflow: hidden;

        }

        ul li {

            float: left;

            width: 194px;

            height: 80px;

            line-height: 80px;

            text-align: center;

            background-color: red;

            border: 1px solid darkgoldenrod;

            font-size: 18px;

            color: #fff;

            font-weight: 700;

        }

        ul li a{

            display: block;

            width: 194px;

            height: 80px;

            text-decoration: none;

            color: #fff;

        }

        ul li a.active{

            background-color: green;

        }

        div.box p{

            width: 594px;

            height: 300px;

            line-height: 300px;

            text-align: center;

            color: #fff;

            font-weight: bolder;

            background-color: darkred;

            display: none;

        }

         div.box p.active{

             display: block;

         }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>

                <a href="javascript:void(0)">新闻</a>

            </li>

            <li>

                <a href="javascript:void(0);">音乐</a>

            </li>

            <li>

                <a href="javascript:void(0);">体育</a>

            </li>

        </ul>

        <p>新闻</p>

        <p>音乐</p>

        <p>体育</p>

    </div>

    <script>

 　　　　　　 $('ul li a').click(function () {

            $(this).addClass('active').parent().siblings('li').find('a').removeClass('active');

            let index = $(this).parent().index();

            console.log(index);

            $('.box p').eq(index).addClass('active').siblings('p').removeClass('active');

        })

    </script>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        ul{

            list-style: none;

        }

        div.box{

            width: 600px;

            height: 600px;

        }

        ul{

            overflow: hidden;

        }

        ul li {

            float: left;

            width: 194px;

            height: 80px;

            line-height: 80px;

            text-align: center;

            background-color: red;

            border: 1px solid darkgoldenrod;

            font-size: 18px;

            color: #fff;

            font-weight: 700;

        }

        /*ul li {*/

            /*display: block;*/

            /*width: 194px;*/

            /*height: 80px;*/

            /*text-decoration: none;*/

            /*color: #fff;*/

        /*}*/

        ul li.active{

            background-color: green;

        }

        div.box p{

            width: 594px;

            height: 300px;

            line-height: 300px;

            text-align: center;

            color: #fff;

            font-weight: bolder;

            background-color: darkred;

            display: none;

        }

         div.box p.active{

             display: block;

         }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>新闻</li>

            <li>音乐</li>

            <li>体育</li>

        </ul>

        <p>新闻</p>

        <p>音乐</p>

        <p>体育</p>

    </div>

    <script>

        $('ul li').click(function () {

            console.log($(this).addClass('active'));

            $(this).addClass('active').siblings('li').removeClass('active');

            let index = $(this).index();

            $('.box p').eq(index).addClass('active').siblings('p').removeClass('active');

        })

    </script>

</body>

</html>

- jquery自定义动画

　　　- animate({动画队列属性},时间,fn)

.box{

            width: 200px;

            height: 200px;

            background-color:red;

            color: #fff;

            position: absolute;

            top: 30px;

            left: 0;

            line-height:200px;

            text-align: center;

        }

    </style>

</head>

<body>

<button>动画</button>

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

<script>

    //动画 在3秒时间 宽高 400px  变成圆，color:green

    $('button').click(function () {

        let animate1 = {

            "width":'400',

            "height":"400",

            "border-radius":'200',

            "top":"400",

            "left":"600",

        }

    // animate() 自定义动画

        $('.box').animate(animate1,3000,function () {

            $(this).hide();

        })

    })

</script>

音频

<audio src="./Beyond%20-%20情人.mp3" controls></audio>

- jquery的DOM操作
        - 样式操作
           - .css()
        - 对象属性操作
           # 如果有一个参数，表示获取值，两个参数，设置值
            prop()
           # 移除单个值或者多个值，多个值用空格隔开
            removeProp()
        - 标签属性操作
            # 如果有一个参数，表示获取值，两个参数，设置值
            attr()
            # 移除单个值或者多个值，多个值用空格隔开
            removeAttr()
        - 类操作
            - addClass('active xxx bbb ccc')
            - removeClass('active xxx')
            - toggleClass()

        - 值的操作
            # 如果没有参数，表示获取值，如果有一个参数，表示设置值
            - text()
            - html()
            - val()

 <style>

        .box{

            width: 200px;

            height: 200px;

            background-color:red;

            color: #fff;

            position: absolute;

            top: 30px;

            left: 0;

            line-height:200px;

            text-align: center;

        }

        div.hide{

            display: none;

        }

    </style>

</head>

<body>

<button>隐藏</button>

<div class="box hide">得劲</div>

<script>

    $('button').click(function () {

        $('.box').addClass('hide');

        // $('.box').removeClass('aa bb cc');

        // $('.box').toggleClass('hide');

    })

</script>

</body>

<body>

    <div class="box">

    </div>

    <input type="text" value="家辉">

    <script>

        // console.log($('.box').text());

       // $('.box').text('得劲');

        console.log($('.box').html());

       $('.box').html('<h2>得劲</h2>');

       console.log($('input[type=text]').val());

       $('input[type=text]').val('哈哈哈')

    </script>

</body>

<body>

<audio src="Beyond%20-%20情人.mp3" controls id="21" class="" title=""></audio>

<input type="radio" checked>男

<a href="">百度一下</a>

<script>

    console.log($('audio'));

    console.log($('audio').prop('src'));

    console.log($('audio').prop('id','mp3'));

    console.log($('input').prop('checked'));

    console.log($('input').attr('checked'));

    $('a').attr('href','http://www.baidu.com');

     $('a').prop('href','http://www.baiduxxx.com');

    $('a').attr('title','http://www.baidu.com');

    $('a').removeAttr('href title');

    console.log($('a'))

</script>

巴特西

day56 Pyhton 前端Jquery08

最新文章

热门文章