JQuery教程之入门基础

作者: 手指乐 | 来源:发表于2019-08-20 09:35 被阅读5次

JQuery教程之入门基础
jQuery图书总结
JQuery
jQuery 简介
jQuery 简介
Flet教程之 09 NavigationRail 基础入门（教
jQuery基础入门
jQuery基础入门
jQuery基础入门
2020版本Java300集资料免费分享福利

语法

$(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">
        </div>
        <div class="flex-item">
        </div>
        <div class="flex-item">
        </div>
    </div>

</body>

</html>

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