jQuery 基础

最新推荐文章于 2025-04-20 17:56:16 发布

苦涩2020

最新推荐文章于 2025-04-20 17:56:16 发布

阅读量256

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/105798499

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

jQuery

8 篇文章

订阅专栏

jQuery中文开发文档

jQuery简介

jQuery是一个快速、简洁的JavaScript框架（JavaScript代码库）
jQuery就是把JavaScript常用的功能代码进行封装，开发者可以直接使用
写更少的代码，做更多的事情
jQuery的优点
a、兼容各种主流浏览器
b、体积小加载快，100k左右
c、高效灵活的选择器
d、独特的链式语法
e、简捷的文档操作和事件处理
f、强大的动画效果
g、方便的AJAX交互
h、成熟的插件可供选择
i、说明文档全面，简单易学
j、jQuery开源免费

jQuery引入

本地引入
百度线上引入
官网线上引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery引入</title>
    <!-- 本地引入 -->
    <!-- <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script> -->
    <!-- 百度远程引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 官网远程引入 -->
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
</head>
<body>
    <script>
        $(function(){
            alert("引用JQuery文件");
        })
    </script>
</body>
</html>

jQuery语法

语法：$(selector).action()

美元符号定义：jQuery
1、$就是jQuery对象

2、$是jQuery中选取元素的符号

3、$是jQuery中功能函数的前缀
选择符（selector）“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery语法</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="button" value="Test button">
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>
    <p id="p3">段落3</p>
    <p id="p4">段落4</p>
    <script>
        alert($ === jQuery);//true;

        //给元素添加事件
        // $("input").click(function(){
        //     alert("jQuery就是这么简单");
        // })
        // $("p").click(function(){
        //     $(this).hide();
        // })
        jQuery("input").click(function(){
            alert("jQuery就是这么简单");
        })
        jQuery("p").click(function(){
            $(this).hide();
        })

        // 改变元素的css样式
        $("#p2").css("color", "red").css("font-size", "24px").css("background", "green"); 
    </script>
</body>
</html>

$(document).ready(function () {}) 和 $(function () {}) 及 window.onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件；页面加载完成有两种事件

一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成

$(function(){})) 是 $(document).ready(function(){})) 的简写，两者等价
window.onload：必须等到页面所有图像，脚本，链接和子框架都已完成加载后才能执行
window.onload：不能同时编写多个，一次只能保存对一个函数的引用，它会自动用最后面的函数覆盖前面的函数，$(function(){})可以同时编写多个，并且都可以执行

jQuery链式语法

调用时，方法用完毕之后继续使用点语法调用别的方法；在每一个方法内部返回this
针对上一次选中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        span{display: block; font-size: 30px;}
    </style>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#box span").click(function(){
                // 获取正在操作的元素索引
                var index = $(this).index();
                // alert(index);
                
                $(this).css("color", "red").siblings().css("color", "blue")
                .parent().siblings().children().eq(index).css("color", "red")
                .siblings().css("color", "blue");
            })
        })
    </script>
</head>
<body>
    <div id="box">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>
    <br>
    <div id="bbb">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>
</body>
</html>

DOM对象和jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // $(".box").style.color = "blue";//错误
            // document.getElementsByClassName("bbb").css("color", "red");//错误
            // -----------------------------------------------------------------

            // DOM对象：用原生JavaScript方法获得的对象
            document.getElementsByClassName("bbb");

            // jquery对象：用jquery方法获得的对象
            $(".boc");
            // 以上两种方法获属性不能混用
            // ------------------------------------------------------------------

            var a = $(".box");  //jQuery对象
            var b = document.getElementsByClassName("bbb");//DOM对象

            // 1、DOM对象转成jQuery对象：用$()把DOM对象包起来
            $(b).css("color", "red");

            // 2、jQuery对象转成DOM对象：用.get(index)方法
            var domA = a.get();
            for (var i = 0; i < domA.length; i++){
                domA[i].style.color = "blue";
            }

            a.get(1).style.color = "orange";
        })
    </script>
</head>
<body>
    <div class="box">div1111</div>
    <div class="box">div1111</div>
    <div class="box">div1111</div>
    <br>
    <div class="bbb">div2222</div>
    <div class="bbb">div2222</div>
    <div class="bbb">div2222</div>
</body>
</html>