JQuery教程之入门基础

  • 语法

 $(selector).action()

selector：选择器，类似css中的选择器

比如：

$('.buttons-tab a') --class为buttons-tab下的子元素a

action:执行动作，比如hide($('.content').hide())

 

  • 事件

$(document).ready(function(){ ... }) 或 $(function(){ ... });--文档加载完后执行

 

$("p").dblclick(function(){ $(this).hide(); });--p元素的点击事件

 

 

  • $(this)

当前元素的jquery对象

this表示当前元素

$(this)表示当前元素的jquery对象

<div id="test1" onclick="test(this)">click to test</div>
function test(e) {
alert(e.id); //显示test1
$(e).hide();//隐藏元素
}
不能用e.hide()，因为hide是jquery对象的方法，只有jquery对象才能调用，使用$(e)把this转成jquery对象
 
this初始值为window对象
$(this)初始值为window对象转化而来的jquery对象
 
<div id="test1" onclick="test()">click to test</div>
function test() {//两个alert的值是一个意思，都是窗口的高度
alert(window.innerHeight)
alert($(this).innerHeight());
}
 

 

  • 实例

jquery可以方便对查询出来的多个结果批量操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
    <script>
        $(function() {
            $(".flex-item").click(function() {
                $(".flex-item").removeClass("sel")
                $(this).addClass("sel")
            })
        })
    </script>
    <style>
        .flex-container {
            display: flex;
            color: white;
        }
        
        .flex-container .flex-item {
            background-color: red;
            width: 100px;
        }
        
        .flex-item.sel {
            background-color: black;
        }
    </style>

</head>


<body style="width: 100%">

    <div class="flex-container">
        <div class="flex-item sel">
            1
        </div>
        <div class="flex-item">
            2
        </div>
        <div class="flex-item">
            3
        </div>
    </div>

</body>

</html>

此处$(this)代表多个查询到的元素中当前选中的元素

 

posted @ 2019-07-03 15:58  手指乐  阅读(151)  评论(0)  编辑  收藏  举报