jQuery

最新推荐文章于 2024-01-27 16:21:23 发布

weixin_34122548

最新推荐文章于 2024-01-27 16:21:23 发布

阅读量508

点赞数

原文链接：http://blog.51cto.com/10983441/2407074

版权

1.为什么使用jQuery

使用js写代码时，会遇到一些问题
1.window.onload事件有事件覆盖的问题，因此只能写一个事件。
2.代码容错性能差。
3.浏览器兼容性问题。
4.书写繁琐，代码量多。
5.代码很乱，各个页面到处都是。
6.动画效果很难实现。

2.jQuery对象

jquery是一个全局函数，当调用$()，内部会帮我们new jQuery(),创建一个jQuery对象
创建出对象后，可以使用对象的属性和方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //自执行函数--自动调用
        (function add() {
            return console.log(2);
        })();
        console.log("jQuery---",jQuery);
        console.log("$---",$);
        console.log("$('.box')---",$('.box'));
    </script>

</body>
</html>

jQuery

3.入口函数

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        console.log($(document));
        //1.文档资源加载完成后调用此方法
        $(document).ready(function () {
            console.log(1);
        });
        //2.jquery简便写法入口函数
        $(function () {
            console.log(2);
        });
        //3.图片资源加载完成后调用
        $(window).ready(function () {
            console.log(3);
        });
    </script>

</body>
</html>

jQuery

4.jquery对象和js对象转换

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box"></div>
<div id="box2"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //如果是js对象，更加希望转换为jquery对象才能更简便的操作dom
            //因为js包含jquery,jquery只是封装DOM事件、ajax动画。
            //总结：
            // 1.如果是jquery对象，一定要调用jquery的属性和方法
            //2.js对象要调用js的属性和方法
            //3.不要将两个对象混淆
            //4.在jquery中，大部分都是api(方法)，length和索引是它的属性。
            console.log("获取jquery对象-$('#box2')：",$('#box2'));
            var div2 = document.getElementById('box2');
            console.log("获取js对象-document.getElementById('box2')：",div2);
            console.log("jquery对象转为js对象-$('#box2')[0]：",$('#box2')[0]);
            console.log("jquery对象转为js对象-$('#box2').get(0)：",$('#box2').get(0));
            console.log("js对象转换为jquery对象-$(div2)",$(div2));
        });
    </script>

</body>
</html>

jQuery

5.jQuery如何操作DOM

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">vita</div>
<div id="box2">lili</div>
<div>chaochao</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            console.log("jquery的标签选择器-$('div')：",$('div'));
            console.log("jquery的类选择器-$('.box')：",$('.box'));
            console.log("jquery的id选择器-$('#box2')：",$('#box2'));

            $('div').click(function () {
                console.log("this.innerText---",this.innerText);
                console.log("$(this).text---",$(this).text);
            });
        });
    </script>

</body>
</html>

jQuery

6.jquery选择器

6.1层级选择器

jQuery

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul class="lists">
    <li>
        ul class='lists'--li
    </li>
    <li>
        ul class='lists'--li
    </li>

</ul>
<ul class="item">
    <li>
        ul class='item'--li
    </li>
</ul>
<ul class="item2">
    <li class="item2-li">
        ul class='item2'--li class='item2-li'
    </li>
    <li>
        ul class='item2'--li
    </li>
    <li>
        ul class='item2'--li
    </li>
</ul>
<ul class="item3">
    <li class="item3-li">
        ul class='item3'--li class='item3-li'
    </li>
    <li>
        ul class='item3'--li
    </li>
    <li>
        ul class='item3'--li
    </li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.后代选择器，修改样式属性
            $('.lists li').css('color','red');

            //2.子代选择器，亲儿子
            $('.item>li').css({
                'color':'yellow',
                'background-color':'red'
            });

            //3.+紧邻选择器，只选择最挨着的兄弟
            $('.item2-li+li').css('color','green');

            //4.~兄弟选择器，选择后面的所有兄弟
            $('.item3-li~li').css('color','blue');
        });

    </script>

</body>
</html>

jQuery

6.2基本过滤选择器

jQuery

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

<ul class="item">
    <li>
        $('.item li:eq(0)').css('background','red')
    </li>
</ul>
<ul class="item2">
    <li class="item2-li">
        $('.item2 li:lt(1)').css('color','red');
    </li>
    <li>
        ul class='item2'--li
    </li>
    <li>
        $('.item2 li:gt(1)').css('color','green');
    </li>
</ul>
<ul class="item3">
    <li class="item3-li">
        $('.item3 li:even').css('color','blue')
    </li>
    <li>
        $('.item3 li:odd').css('color','yellow');
    </li>
    <li>
        $('.item3 li:even').css('color','blue')
    </li>
</ul>
<ul class="item4">
    <li class="item4-li">
        $('.item4 li:first').css('background','yellow')
    </li>
    <li>
        ul class='item4'--li
    </li>
    <li>
        $('.item4 li:last').css('background','green')
    </li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.item li:eq(0)').css('background','red');
            $('.item2 li:gt(1)').css('color','green');
            $('.item2 li:lt(1)').css('color','red');
            $('.item3 li:odd').css('color','yellow');
            $('.item3 li:even').css('color','blue');
            $('.item4 li:first').css('background','yellow');
            $('.item4 li:last').css('background','green');
        });

    </script>

</body>
</html>

jQuery

6.3属性选择器

jQuery

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="">
    <input type="text">
    <input type="password">
</form>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //属性选择器中最常用的方式
        $(function () {
            $('input[type=text]').css('background-color','green');
            $('input[type=password]').css('background-color','red');
        });

    </script>

</body>
</html>

jQuery

6.4筛选选择器

jQuery

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    <div><span class="item1">vita</span></div>
    <div><span class="item2">vita1</span></div>
    <p class="item3">vita3</p>
    <p class="item4"><span class="item4-child">vita4</span></p>
    <p class="item5">
        <span class="item5-child">vita5</span>
    </p>
    <div class="itemt6">vita6</div>
    <div class="itemt7">vita7</div>
</div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //筛选选择器
        $(function () {
            $('.box').find('span').css('color','red');
            $('.box').find('.item3').css('color','blue');
            $('.box').find('p>.item4-child').css('color','green').click(function () {
                console.log('item3-child');
            });
            $('.box').children('.item5').css('background-color','yellow');
            $('.box').children('.item6').eq(1).css('background-color','green');
            $('.box').parent().css('background-color','purple');
        });

    </script>

</body>
</html>

jQuery

6.5sibling

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //筛选选择器
        $(function () {
            $('button').click(function () {
                //链式编程
                $(this).css('background','red').siblings('button').css('background','yellow');
            });

        });

    </script>

</body>
</html>

jQuery

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .parent{
            width: 100%;
            height: 100px;
        }
        .box{
            background-color: red;
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            margin-right: 20px;
            position: relative;
        }
        .box-child{
            height: 60px;
            width: 100px;
            position: absolute;
            top: 20px;
            left: 0;
        }
        a{

            text-decoration: none;
            color: white;
            line-height: 60px;
        }
        .list{
            display: none;
        }
        .list.active{
            display: block;
        }
    </style>
</head>

<body>
<div class="parent">
    <div class="box">
        <div class="box-child"><a >vita1</a></div>
    </div>
    <div class="box">
        <div class="box-child"><a >vita2</a></div>
    </div>
    <div class="box">
        <div class="box-child"><a >vita3</a></div>
    </div>
</div>

<div class="list">vita1</div>
<div class="list">vita2</div>
<div class="list">vita3</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
        //我这里是点击div，不是点击a，如果点击a标签，会出现闪烁的情况，需要点击a旁边
            $('.box-child').click(function () {
                $(this).css('background-color','green').parent('.box').siblings('div').children('div').css('background-color','yellow');
                var list_index = $(this).parent('.box').index();
                $('.list').eq(list_index).addClass('active').siblings('.list').removeClass('active');
            });

        });

    </script>

</body>
</html>

jQuery

7.动画

"动画最重要的要记得，要先stop,然后运行动画方法，否则多次鼠标移动，，页面中会出现动画持续的效果"

7.1基本动画

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>

</head>

<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //展示
            $('#show').click(function () {
                //show(动画时间，fn)
                //默认是normal 400ms  slow  600ms  fast  200ms
                $('.box').show(2000,function () {
                    $(this).text('vita');
                });
            });

            //隐藏
            $('#hide').click(function () {
                $('.box').hide('slow');
            });

            //开关式的显示隐藏动画
            $('#toggle').click(function () {
                //动画就像定时器一样，先关动画，再开动画
                $('.box').stop().toggle(2000);
            });
        });

    </script>

</body>
</html>

jQuery

7.2卷帘门动画

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>

</head>

<body>
<button id="slideDown">卷帘门下拉</button>
<button id="slideUp">卷帘门上拉</button>
<button id="slideToggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //展示
            $('#slideDown').click(function () {
                //show(动画时间，fn)
                //默认是normal 400ms  slow  600ms  fast  200ms
                $('.box').slideDown(2000,function () {
                    $(this).text('vita');
                });
            });

            //隐藏
            $('#slideUp').click(function () {
                $('.box').slideUp('slow');
            });

            //开关式的显示隐藏动画
            $('#slideToggle').click(function () {
                $('.box').stop().slideToggle(2000);
            });
        });

    </script>

</body>
</html>

jQuery

7.3淡入淡出

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>

</head>

<body>
<button id="fadeIn">淡入动画</button>
<button id="fadeOut">淡出动画</button>
<button id="fadeToggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //展示
            $('#fadeIn').click(function () {
                //show(动画时间，fn)
                //默认是normal 400ms  slow  600ms  fast  200ms
                $('.box').fadeIn(2000,function () {
                    $(this).text('vita');
                });
            });

            //隐藏
            $('#fadeOut').click(function () {
                $('.box').fadeOut('slow');
            });

            //开关式的显示隐藏动画
            $('#fadeToggle').click(function () {
                $('.box').stop().fadeToggle(2000);
            });
        });

    </script>

</body>
</html>

jQuery

7.4自定义动画

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>

</head>

<body>
<div></div>
<button>动画吧</button>

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

        $(function () {
            var json = {
                width:200,
                height:200,
                top:200,
                left:500,
                "border-radius":200
            };
            var json2 = {
                width:0,
                height:0,
                top:10,
                left:1000
            };
            $('button').click(function () {
                $('div').stop().animate(json,2000,function () {
                    $('div').stop().animate(json2,1000,function () {
                        alert('已经添加到购物车');
                    })
            })
            });

        });

    </script>

</body>
</html>

jQuery

7.5下拉菜单小案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .parent-menu{
            width: 298px;
            height: 50px;
            background-color: pink;
            margin: 30px auto 0;
        }
        .first-menu{
            margin-left: 7px;
            width: 90px;
            position: relative;
            float: left;
        }
        .first-menu p{
            background-color: yellowgreen;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        .second-menu{
            background-color: yellowgreen;
            position: absolute;
            width: 90px;
            top: 50px;
            text-align: center;
            display: none;
        }
    </style>

</head>

<body>
<div>
    <ul class="parent-menu">
        <li class="first-menu">
            <p>一级菜单</p>
            <ul class="second-menu">
                <li>一级菜单1</li>
                <li>一级菜单2</li>
                <li>一级菜单3</li>
            </ul>
        </li>
        <li class="first-menu">
            <p>二级菜单</p>
            <ul class="second-menu">
                <li>二级菜单1</li>
                <li>二级菜单2</li>
                <li>二级菜单3</li>
            </ul>
        </li>
        <li class="first-menu">
            <p>三级菜单</p>
            <ul class="second-menu">
                <li>三级菜单1</li>
                <li>三级菜单2</li>
                <li>三级菜单3</li>
            </ul>
        </li>
    </ul>
</div>

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

        $(function () {
            $('.first-menu p').mouseenter(function () {
                $(this).siblings('ul').stop().slideDown();
            });
        $('.first-menu p').mouseleave(function () {
                $(this).siblings('ul').stop().slideUp();
            });
        });

    </script>

</body>
</html>

jQuery

8.jquery的属性操作

jquery的属性操作分为四部分
1.html-标签属性操作，如attr()、removeAttr()
2.dom属性操作，如prop()、removeProp()，仅用于input单选框中，获取checked值为true或false。
3.类样式属性操作，如addClass()、removeClass()、toggleClass()
4.值操作，如html()、text()、val()

8.1标签的属性操作

jquery中标签的属性操作：
attr(key) 获取属性值
attr(key,value) 设置单个值
attr({key1:value1,key2:value2});设置多个值

js中的标签属性操作：
 setAttribute(key,value)
 getAttribute()
 removeAttribute(name: DOMString)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box" title="title-box"></div>
<a class="box1"></a>
<p title="title-p"></p>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.获取标签属性
            console.log("$('div').attr('title'):",$('div').attr('title'));
            console.log("$('.box').attr('title'):",$('.box').attr('title'));

            //2.设置标签属性
            $('div').attr('id','div-id');
            console.log("$('div').attr('id'):",$('div').attr('id'));

            //3.设置多个标签属性
            $('a').attr({
                href:'http:www.vita.com',
                title:'title-a'
            });

            //4.移除标签属性
            $('p').removeAttr('title');
        });

    </script>

</body>
</html>

jQuery
jQuery

8.2DOM属性操作

1.DOM属性操作中,prop()，removeProp()只用于单选框中获取checked值，值为true或false
2.atr对input单选按钮checked获取的属性值默认是"checked"
3.但在实际使用中，我们希望使用true或false

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<input type="radio" name="sex" checked > 男
<input type="radio" name="sex"> 女
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //DOM属性操作中,prop()，removeProp()只用于单选框中获取checked值，值为true或false

        //但在实际使用中，我们希望使用true或false
        $(function () {
            //atr对input单选按钮checked获取的属性值默认是"checked"
            console.log("$('input[type=radio]').eq(0).attr('checked'):",$('input[type=radio]').eq(0).attr('checked'));
            //dom对象获取的checked值是true或false
            console.log("$('input[type=radio]').eq(0).prop('checked'):",$('input[type=radio]').eq(0).prop('checked'));
            //设置属性
            $('input[type=radio]').eq(0).prop('aaatitle','input-title');
            //移除属性
            $('input[type=radio]').eq(0).removeProp('aaatitle');
            $('input[type=radio]').eq(0).prop('aaa','aaa-value');
            //查看dom对象的属性，console.dir()方法查看
            console.dir($('input[type=radio]').get(0));
        });

    </script>

</body>
</html>

jQuery
jQuery

8.3对类样式操作

1.通过控制类样式属性来进行隐藏
2.控制类名addClass() removeClass()来操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        button{
            display: block;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
        }
        .box1{
            width: 40px;
            height: 40px;
            background-color: green;
        }
        .hidden{
            display: none;
        }
    </style>

</head>
<body>
<button id="btn">隐藏</button>
<div class="box"></div>

<button id="btn1">隐藏</button>
<div class="box1"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.通过控制类样式属性来进行隐藏
            var isShow = true;
            $('#btn').click(function () {
                if(isShow){
                    $('.box').css('display','none');
                    isShow=false;
                    $(this).text('显示');
                }else {
                    $('.box').css('display','block');
                    isShow=true;
                    $(this).text('隐藏');
                }
            });

            //2.控制类名addClass() removeClass()来操作
            var isShowClass = true;
            $('#btn1').click(function () {
                if(isShowClass){
                    $('.box1').addClass('hidden active');
                    isShowClass=false;
                    $(this).text('显示')
                }else{
                    $('.box1').removeClass('hidden active');
                    isShowClass=true;
                    $(this).text('隐藏');
                }
            });

        });

    </script>

</body>
</html>

jQuery

8.4对值操作

这里我们需要注意
1.input标签，jquery是通过val()来获取value属性值，不能通过text()获取到input标签外的值。因为标签外的值不再input标签内。
2.其他的标签通过text(),html()来获取标签中的文本内容。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

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

<div class="box1"></div>
<input type="text" value="input-value">

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

        $(function () {
            //1.设置文本的内容text()
            $('.box').text('  <h2>text()方法</h2>  ');
            //2.获取文本的内容，jquery方法：text()《---》js属性：innerText
            console.log("jquery对象获取文本值-$('.box').text().trim()      :",$('.box').text().trim());
            console.log("js对象获取文本值-$('.box').get(0).innerText.trim():",$('.box').get(0).innerText.trim());

            //3.设置文本的内容
            $('.box1').html('<h2>html()方法</h2>');
            //4.获取文本内容，jquery方法：html()《---》js属性：innerHTML
            console.log("jquery对象获取文本值-$('.box1').html()            :",$('.box1').html());
            console.log("js对象获取文本值-$('.box1').get(0).innerHTML      :",$('.box1').get(0).innerHTML);

            //5.input标签获取value属性值，jquery方法val()《---》ja属性：value
            console.log("jquery对象获取文本值-$('input').val()             :",$('input').val());
            console.log("js对象获取文本值-$('input').value                 :",$('input').get(0).value);
        });

    </script>

</body>
</html>

jQuery

8.5操作input的值

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<form action="">
<!--    单选-->
    <input type="radio" name="sex" value="boy" >男
    <input type="radio" name="sex" value="girl">女
<!--多选-->
    <input type="checkbox" value="eat">吃饭
    <input type="checkbox" value="sleep">睡觉
    <input type="checkbox" value="play">玩

<!--    单选下拉框-->
    <select name="" id="select-id">
        <option value="BeiJing">北京</option>
        <option value="ShangHai">上海</option>
        <option value="GuangZhou">广州</option>
    </select>

<!--    输入框-->
    <input type="text" value="text-value">
</form>

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

        $(function () {
            //单选框
            //1.页面加载时，默认设置单选框选中第一个
            $('input[type=radio]').eq(0).attr('checked',true);
            //或 $('input[type=radio]').eq(0).prop('checked',true);

            //2.获取单选框中被选中的value值
            console.log("加载页面时，获取单选框中默认被选中的value属性值--,$('input[type=radio]:checked').val()         ：",$('input[type=radio]:checked').val());
            console.log("加载页面时，获取单选框外的值(获取不到外面的值)--,$('input[type=radio]:checked').text()         ：",$('input[type=radio]:checked').text());
            //3.单选框change事件中获取被选中的value值
            $('input[type=radio]').change(function () {
                console.log("单选框change事件中获取value属性值--$(this).val()                                               ：",$(this).val());
                console.log("单选框change事件中获取value属性值--$('input[type=radio]:checked').val()                        ：",$('input[type=radio]:checked').val());
            });

            //复选框
            //1.页面加载时，设置复选框的默认选项
            $('input[type=checkbox]').eq(0).attr('checked',true);
            $('input[type=checkbox]').eq(1).attr('checked',true);
            //2.复选框获取第一个被选中的值
            console.log("加载页面时，获取复选框中默认被选中的value属性值--$('input[type=checkbox]:checked').val()       ：",$('input[type=checkbox]:checked').val());
            //3.复选框change事件中获取被选中的value值
            $('input[type=checkbox]').change(function () {
                console.log("复选框change事件中获取value属性值--$(this).val()                                               ：",$(this).val());
                console.log("复选框change事件中获取第一个被选中的value属性值--$('input[type=checkbox]:checked').val()       ：",$('input[type=checkbox]:checked').val());
            });

            //下拉列表
            //1.加载页面时，设置默认选项
            $('select option').eq(1).attr('selected',true);
            //或 js属性设置方式$('select option').get(1).selected = true;
            //2.获取被选中项的索引
            console.log("加载页面时，下拉框获取被选中项的索引--$('select option:selected').index()                      ：",$('select option:selected').index());
            console.log("加载页面时，下拉框获取被选中项的value属性值--$('select option:selected').val()                 ：",$('select option:selected').val());
            console.log("加载页面时，下拉框获取被选中项的标签中文本内容--$('select option:selected').text()             ：",$('select option:selected').text());
            //3.下拉列表change事件中获取值
            $('select').change(function () {
                //这里不能使用$(this),这里的this是select标签，不是option标签
                console.log("下拉框change事件中获取选中项索引--$('select option:selected').index()                          ：",$('select option:selected').index());
                console.log("下拉框change事件中获取选中项索引--$('select').get(0).selectedIndex                          ：",$('select').get(0).selectedIndex);
                console.log("下拉框change事件中获取选中项value属性值--$('select option:selected').val()                   ：",$('select option:selected').val());
                console.log("下拉框change事件中获取选中项value属性值--$('select option:selected').text()                  ：",$('select option:selected').text());
            });

            //input输入框
            //1.获取input输入框中内容
            //实时获取input输入框中内容，要使用js对象的oninput()方法，即$('input[type=text]')[0].oninput()
            console.log("加载页面时，input输入框获取value属性值--$('input[type=text]').val()                            ：",$('input[type=text]').val());
            $('input[type=text]').change(function () {
                console.log("input输入框change事件获取框中内容--$(this).val()                                               ：",$(this).val());
            });
        });

    </script>

</body>
</html>

jQuery

9.jquery文档操作

9.1父元素.append(子元素)--父元素中添加新元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>

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

        $(function () {
            var new_ele_p = document.createElement('p');
            new_ele_p.innerText='new_ele_p';
            new_ele_p.id='new_ele_p_id';
            //1.插入普通文本
            $('.box').append('  append text');
            //2.插入标签+文本
            $('.box').append('<h2>append h2</h2>');
            //3.插入一个js DOM对象
            $('.box').append(new_ele_p);
            //4.插入jquery对象
            $('.box').append($('.box1'));
            //5.为新加的标签添加事件
            $('#new_ele_p_id').click(function () {
                console.log("为新加的标签添加事件--$(this).text()：",$(this).text());
            });
        });

    </script>

</body>
</html>

jQuery

9.2子元素.aapend(父元素)--子元素追加到父元素中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>

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

        $(function () {
            //1.追加子元素到父元素中
            $('<h2>new element</h2>').appendTo($('.box')).css('background-color','yellow');
        });

    </script>

</body>
</html>

jQuery

9.3父元素.prepend(子元素)--父元素前插入一个元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>

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

        $(function () {
            new_ele_p = document.createElement('p');
            new_ele_p.innerText='prepend new_ele_p';
            new_ele_p.id='new_ele_p_id';
            //1.父元素前添加文本内容
            $('.box').prepend(' prepend text ');
            //2.父元素前添加标签内容
            $('.box').prepend('<h2>prepend h2</h2>');
            //3.父元素前添加js对象
            $('.box').prepend(new_ele_p);
            //4.父元素前添加jquery对象
            $('.box').prepend($('.box1'));
        });

    </script>

</body>
</html>

jQuery

9.4子元素.prependTo(父元素)--子元素插入到父元素前

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">vita</div>
<div class="box1">lili</div>

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

        $(function () {
            //prependTo()
            $('<h2>new element</h2>').prependTo($('.box')).css('background-color','yellow');
        });

    </script>

</body>
</html>

jQuery

9.5父.after(子)----子.insertAfter(父)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">source vita</div>
<div class="box1">source lili</div>

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

        $(function () {
            //after()
            $('.box').after(`<h2>after h2</h2>`);//tab上的反引号,即使内容中有空格，也没关系
            $('.box').after('<h3>after h3</h3>');
            //insertAfter()
            $('<h3>insertAfter h3</h3>').insertAfter($('.box1'));
        });

    </script>

</body>
</html>

jQuery

9.6父.before(子)----子.insertBefore(父)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">source vita</div>
<div class="box1">source lili</div>

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

        $(function () {
            var before_title = "before_title";
            var insert_before_title = "insert_before_title";
            //before()
            $('.box').before(
            `<li>
                <a href="#">${before_title}</a>
            </li>`
            );
            //insertBefore()
            $('<a href="#">${insert_before_title}</a>').insertBefore($('.box1'));
        });
    </script>
</body>
</html>

jQuery

9.7替换操作--replaceWith(),replaceAll()

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
<div class="box">source vita</div>
<div class="box1">source lili</div>
<p>pppp</p>
<p class="replace_all">pppp</p>
<span>$('span').replaceAll($('p'))</span>

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

        $(function () {
            //1.replaceWith()
            $('div').replaceWith('<h2>replaceWith h2</h2>');
            //2.replaceAll()
            $('span').replaceAll($('p'));

        });
    </script>
</body>
</html>

jQuery

9.8删除操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body>
    <div class="remove">
        <p style="font-size: 20px;font-weight: 600;">remove</p>
    </div>
<button  class="remove-button">remove</button>

<div class="detach">
    <p style="font-size: 20px;font-weight: 600;">detach</p>
</div>
<button class="detach-button">detach</button>

<div class="empty">
    <p style="font-size: 20px;font-weight: 600;">empty</p>
</div>
<button  class="empty-button">empty</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.remove()删除节点后，事件也会删除
            //所以执行完click后，再点击，不会输出remove了，因为事件被删除了
            $('.remove-button').click(function () {
                console.log('remove');
                var remove_button = $(this).remove();
                $('.remove').prepend(remove_button);
            });

            //2.detach()删除节点后，事件不会删除
            //所以执行完click后，再点击，还会输出detach，因为事件没有被删除了
            $('.detach-button').click(function () {
                console.log('detach');
                var detach_button = $(this).detach();
                $('.detach').prepend(detach_button);
            });

            //3.empty()清空元素中所有的后代节点
            $('.empty-button').click(function () {
                console.log('empty');
                $('.empty').empty();
            });
        });
    </script>
</body>
</html>

jQuery

10.jquery的位置信息

1.offset()
获取匹配元素在当前浏览器窗口的相对偏移，返回的对象包含两个属性：top和left
与父子的绝对定位没有任何关系
不管页面是否滚动，偏移量都不改变

2.scrollTop
获取匹配元素相对滚动条顶部的偏移

3.scrollLeft()
获取匹配元素相对滚动条左侧的偏移

jQuery

4.innerHeight()
获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,不包括border）

5.innerWidth()
/获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,不包括border）

6.outerHeight()
获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,包括border）

7.outerWidth()
/获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,包括border）

8.width(),height()获取匹配元素的宽和高，(不包括padding和border)

9.设置宽和高
$('.box').width(100);
$('.box').height(100);

jQuery

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            position: relative;
            top: 10px;
        }

        .box{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 1px solid red;
            position: absolute;
            top: 100px;
            left: 200px;
        }
    </style>

</head>
<body style="height: 2000px">
    <div class="father">
        <div class="box"></div>
    </div>

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

        $(function () {
            //1.offset()
            //  获取匹配元素在当前浏览器窗口的相对偏移，返回的对象包含两个属性：top和left
            // 与父子的绝对定位没有任何关系
            // 不管页面是否滚动，偏移量都不改变
            console.log("$('.box').offset().top：",$('.box').offset().top);
            console.log("$('.box').offset().left：",$('.box').offset().left);

            //2.scrollTop
            //获取匹配元素相对滚动条顶部的距离
            //越往下滚动，值越大
            $(document).scroll(function () {
                console.log("$(this).scrollTop()：",$(this).scrollTop());
                var scrollTopHeight = $(this).scrollTop();
                var boxOffsetHeight = $('.box').offset().top;
                //向下滚动鼠标，隐藏内容
                if(scrollTopHeight>boxOffsetHeight){
                    $('.box').stop.hide(1000);
                }
            });

            //3.scrollLeft()
            //获取匹配元素相对滚动条左侧的偏移

            //4.innerHeight()
            //获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,不包括border）
            console.log("$('.box').innerHeight()：",$('.box').innerHeight());

            //5.innerWidth()
            //获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,不包括border）
            console.log("$('.box').innerWidth()：",$('.box').innerWidth());

            //6.outerHeight()
            //获取第一个匹配元素内部区域高度--上下边框之间的距离（包括padding,包括border）
            console.log("$('.box').outerHeight()：",$('.box').outerHeight());

            //7.outerWidth()
            //获取第一个匹配元素内部区域宽度--左右边框之间的距离（包括padding,包括border）
            console.log("$('.box').outerWidth()：",$('.box').outerWidth());

            //8.width,height获取匹配元素的宽和高，(不包括padding和border)
            console.log("$('.box').width()：",$('.box').width());
            console.log("$('.box').height()：",$('.box').height());

        });
    </script>
</body>
</html>

jQuery

转载于:https://blog.51cto.com/10983441/2407074

weixin_34122548

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

1.为什么使用jQuery使用js写代码时，会遇到一些问题1.window.onload事件有事件覆盖的问题，因此只能写一个事件。2.代码容错性能差。3.浏览器兼容性问题。4.书写繁琐，代码量多。5.代码很乱，各个页面到处都是。6.动画效果很难实现。2.jQuery对象jquery是一个全局函数，当调用$()，内部会帮我们new jQuery(),创建一个jQuery对象创建出...
复制链接

扫一扫