首页 > 编程语言> > JavaScript小汇（10）—— JQuery

JavaScript小汇（10）—— JQuery

2021-02-03 09:32:51 作者：互联网

文章目录

- 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