前端开发:JQuery

Posted neozheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发:JQuery相关的知识,希望对你有一定的参考价值。

JQuery

DOM文档加载的步骤:

  1. 解析html结构;

  2. 加载外部脚本和样式;

  3. 解析并执行脚本代码;

  4. DOM树构建完成;

  5. 加载图片等外部文件;

  6. 页面加载完成;

JS和JQuery的区别:

1.执行时间不同:window.onload必须等到页面内包括图片展览在内的所有元素加载完成后才能执行;$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕

2. 编写个数不同: window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个;$(document).ready()可以同时编写多个,并且都可以执行

3. 简化方式不同: window.onload没有简写;$(document).ready(function(){})可以简写为: $(function(){})

JQuery的引入方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jqury文件的引入</title>

    <script type="text/javascript">
        // 如果不写window.onload() 代码的执行顺序是从上到下,写了之后浏览器会在所有元素加载完成后再执行window.onload()中的内容(即上面的第6步完成后再执行window.onload()中的内容)

    </script>
</head>
<body>

</body>
<script src="./jquery-3.3.1.slim.js"></script>
<!-- 在调用jQuery之前,必须要先把jQuery引入 -->
<script type="text/javascript">
    console.log($);  // 如果没有引入jQuery: $ is not defined
    // jquery是JS的一个库文件,这个库会抛出构造函数或者对象,如果是构造函数,那么使用new关键字创建对象,如果是对象直接调用属性和方法

    // 书写jquery的方式:入口函数(这是个回调函数)
    // $(document).ready()是DOM结构绘制完成后执行(即上面的第4步完成后)
    $(document).ready(function(){
        alert(1);
    })

    $(function(){
        alert(2);
    })
</script>
</html>

jquery基础选择器:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery基础选择器</title>
</head>
<body>
    <ul>
        <li id="brother">哈哈1</li>
        <li><a href="#">哈哈2</a></li>
        <li class="li3">哈哈3</li>
        <li>哈哈4</li>
        <li>哈哈5</li>
    </ul>

</body>
<script src="jquery-3.3.1.slim.js"></script>
<script type="text/javascript">
    
    // 使用JQuery的时候,要有入口函数
    $(document).ready(function(){
        // 基础选择器
        // 1.id选择器:  $("#id")
        $("#brother").css("color","red");

        // 2.标签选择器: $("标签")
        $("a").css({"color":"blue","font-size":"24px"}); // 设置多个值,使用对象 key:value的形式

        // 3.类选择器: $(".classname")
        $(".li3").css("background","green");
        // 通配符选择器: $("*")

    })
</script>
</html>

jquery的层级选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>层级选择器</title>
</head>
<body>
    <div id="box">
        <p id="brother">天王盖地虎</p>
        <p>提莫炖蘑菇</p>
        <p>宝塔镇河妖</p>
        <p>蘑菇放辣椒</p>
        <div id="box2">
            <p>我是你老母</p>
        </div>

    </div>

</body>
<script src="./jquery-3.3.1.slim.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 1. 后代选择器
        $("#box p").css("color","red");
        // 2. 子代选择器
        $("#box2>p").css("color","green");
        // 3. 毗邻选择器:匹配所有紧接着选定元素的下一个兄弟 +
        $("#brother+p").css("font-size","24px");
        // 4. 兄弟选择器 ~
        $("#brother~p").css("background","purple");

        // 5. 获取第一个元素
        $("p:first").css("font-size","50px");
        // 6. 获取最后一个元素
        $("p:last").css("font-size","40px");
        // 7. 获取索引为2的元素
        $("p:eq(2)").css("font-size","60px");

    })
</script>
</html>

基本过滤选择器:

<ul>
    <li>哈哈哈</li>
    <li>666</li>
    <li>天王盖地虎</li>
    <li>小鸡炖蘑菇</li>
</ul>

<script src="jquery-3.3.1.slim.js"></script>
<script type="text/javascript">
    // 1. 获取第一个: $("li:first")  -----  获取最后一个: $("li:last")
    $("li:first").text("真的吗?")
    $("li:last").html("我是最后一个元素?") // 相当于 innerText和innerHTML

    // 2. odd: 匹配所有索引值为奇数的元素,从0开始计数
    $("li:odd")
    // 3. even: 匹配所有索引值为偶数的元素,从0开始计数
    $("li:even")

    // 4. eq(index):获取给定索引值的元素,从0开始计数  (用的最多)
    $("li:eq(1)")

    // 5. gt(index): 匹配所有大于给定位索引值的元素
    $("li:gt(1)")
    // 6. lt(index):匹配所有小于给定索引值的元素

</script>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>
        <div id="box">
            <h2 class="title">属性元素器</h2>
            <p class="p1">我是一个段落</p>
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what" id="li2">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type=\'text\' value="1" checked="checked">
                <input name="username1111" type=\'text\' value="1">
                <input name="username2222" type=\'text\' value="1">
                <input name="username3333" type=\'text\' value="1">
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>
            </form>
        </div>

</body>
<script src="jquery-3.3.1.slim.js"></script>
<script type="text/javascript">
    $(function () {
    //    标签名[属性名]:查找所有含有指定属性名的标签元素
        $("li[id]").css("color","red");

    //    标签名[attr=value]:匹配给定的属性是某个特定值的元素
        $("li[class=what]").css("font-size","30px");
        // 标签名[attr!=value]:匹配所有不含有指定属性、或者属性不等于特定值的元素
        $("li[class!=what]").css("font-size","50px"); // 属性值不等于what的元素(没有class属性的li就是 class="")
    //  [attr^=what]:匹配给定的属性是以某些值开头的元素
        $("input[name^=username]").css("background","pink");
    //    [attr$=what]:匹配给定的属性是以某些值结尾的元素
        $("input[name$=222]").css("background","green");
    //    [attr*=what]:匹配给定的属性包含某些值的元素
        $("button[class*=btn]").css("background","blue");
    })
</script>
</html>

筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>筛选选择器</title>
</head>
<body>
    <div id="box">
        <p class="p1">
            <span>我是第一个span标签</span>
            <span>我是第二个span标签</span>
            <span>我是第三个span标签</span>
        </p>
        <button>按钮</button>
    </div>
    <ul>
        <li class="list">2</li>
        <li>3</li>
        <li>4</li25个可遇不可求的jQuery插件

常用的几个JQuery代码片段

高效Web开发的10个jQuery代码片段

前端开发常用代码片段(中篇)

前端开发常用js代码片段

高效Web开发的10个jQuery代码片段