编程语言
首页 > 编程语言> > JavaScript小汇(10)—— JQuery

JavaScript小汇(10)—— JQuery

作者:互联网

文章目录

JQuery

公式:$(selector).action()

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <a href="#" id="cli">点击</a>
    <script type="text/javascript">
        $('#cli').click(function(){
            alert('成功弹出');
        })
    </script>
</body>
选择器
$('p')//标签选择器
$('#d1')//id选择器
$('.c1')//类选择器
....
事件

移动

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .d1{
            width: 200px;
            height: 200px;
            border: 1px solid rosybrown;
        }
    </style>
</head>
<body>
    mouse:<span id="s"></span>
    <div class="d1">
        移动看看
    </div>
    <script type="text/javascript">
        //元素加载完毕后相应事件,也可以省略直接写function(){}
        $(document).ready(function(){
            $('.d1').mousemove(function(e){
                $('#s').text('x:'+e.pageX+',y:'+e.pageY)
            })
        });

    </script>
</body>
操作DOM

节点文本操作

<body>
    <ul class="u">
        <li id="li1">red</li>
        <li id="li2">yellow</li>
    </ul>
    <script type="text/javascript">
        //$('.u').text('haha');设置值
        $('.u').text();//获得值
        //$('.u').html('haha');设置值
        //$('.u').html();//获得值
        //$('.u').append('<li>brown</li>');	追加li
    </script>
</body>


$('.u li[id="li1"]').text();
>"red"
操作css
<script type="text/javascript">
    $('.u li[name="li1"]').css({'color':'red','fontSize':'30px'});
</script>
显示和隐藏元素
$('.u li[name="li1"]').hide();
$('.u li[name="li1"]').show();
window
$(window).height();
>335
$(window).width();
>1536

如有不对的地方欢迎大家指出,共同进步!

标签:JQuery,10,小汇,text,li,window,li1,function,选择器
来源: https://blog.csdn.net/weixin_45734378/article/details/113539573