JQuery

jQuery 是一个 JavaScript 函数库。无需编写大量繁琐的原生JavaScript代码。JavaScript是楼梯，JQuery是电梯。

JQuery语法

基础语法： $(*selector*).*action*()

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有

    元素

  • $("p.test").hide() - 隐藏所有 class="test" 的

    元素

  • $("#test").hide() - 隐藏 id="test" 的元素

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

jQuery 中所有选择器都以美元符号开头：$()。

属性说明
$(button)元素选择器
$("#id")id选择器
$(".cls")类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery </title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>

</head>

<body>
    <input type="button" id="app" value="单击">
    <input type="button" class="cls" value="双击">
    <div>我是一个盒子</div>
    <div>我是第二个盒子</div>
    <script>
          //#app id选择器
          //div 元素选择器
          //.cls 类选择器
        $("#app").click(function(){
            $("div").hide(); // 当我单击以后 div会全部隐藏
        })

        $(".cls").dblclick(function (){
            alert("双击提示")
        })
        
    </script>
</body>
</html>

JQuery事件

鼠标事件键盘事件表单事件文档/窗口事件
click（单击）keypresssubmitload（加载）
dbclick（双击）keydownchangeresize
mouseenter（鼠标输入）keyupfocus（获得焦点）scroll
hover blur（失去焦点）unload

在jQuery中，事件是指在网页上发生的动作或交互，比如点击按钮、移动鼠标、键盘按键等。jQuery允许你轻松地捕捉和处理这些动作，以便在用户与网页交互时执行相应的操作。事件可以是用户触发的，也可以是页面自身状态变化触发的，例如当页面加载完成时也可以算作一个事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>如果你点我 我就消失</p>
    <p>点我我也就消失</p>
    <p>点我一下</p>
    <p>点我 点我</p>
    <p>还有我呢</p>


    
    <script>
        $("p").click(function(){
            $(this).hide();
        });
    </script>
</body>
</html>

JQyery操作DOM

操作文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    <div id="div">我是一个div</div>
    <input type="button" id="btn1" value="获取div的文字">
    <input type="button" id="btn2" value="设置div的文字">
    <br> <br>
    <input type="text" id="t" value="文本"> <br>
    <input type="button" id="bt" value="获取text">

    <script>
        //获取div的文字
        $("#btn1").click(function(){
            var value = $("#div").html();
            alert(value);
        })

        //设置div的文字
        $("#btn2").click(function(){
            var value = $("#div").html("测试");
            alert(value);
        })

        //获取文本
        $("#bt").click(function(){
            var value = $("#t").val();
            alert(value);
        })
    </script>
</body>
</html>

操作对象

属性说明
$("元素")创建指定元素
append(element)添加最后一个子元素 由添加者对象调用
appendto(element)添加最后一个子元素 由被添加者对象调用
prepend(element)添加第一个子元素 由添加者对象调用
prependto(element)添加第一个子元素 由被添加者对象调用
Before(element)添加到当前元素的前面 两者之间是兄弟关系 由添加者对象调用
After(element)添加到当前元素的后面 两者之间是兄弟关系 由添加者对象调用
remove()删除指定元素
empty()清空指定元素的所有子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery操作对象</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="div">

    </div>

    <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>

    <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul> <br> <br> <br>

    <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="将描述列表全部删除">&nbsp;&nbsp;&nbsp;




    <script>
        //添加span到div中
        $("#btn1").click(function(){
            var span = $("<span>span</span>")
            $("#div").append(span);
        })

        //删除加油和雄起
        $("#btn7").click(function(){
            $("#desc").empty();
        })

        //加油添加到城市列表下方
        $("#btn2").click(function(){
            $("#city").append($("#jy"));
        })

        //加油添加到城市列表上方
        $("#btn3").click(function(){
            $("#city").prepend($("#jy"));
        })

        // 将雄起添加到上海下方
        $("#btn4").click(function(){
            $("#sh").after($("#xq"));
        })

        //将雄起添加到上海上方
        $("#btn5").click(function(){
            $("#sh").before($("#xq"));
        })

        //将雄起删除
        $("#btn6").click(function(){
            $("#xq").empty();
        })

        //将描述列表全部删除
        $("#btn6").click(function(){
            $("#desc").empty();
        })
    </script>
</body>
</html>

操作样式

属性说明
css(name)根据样式名称获取css样式
css(name,value)设置css样式
addClass(value)给指定的对象添加样式类名
removeClass(value)给指定的对象删除样式类名
toggleClass(value)如果没有样式类名，则添加。如果有，则删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div点样式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="设置div的背景色为蓝色"> &nbsp; &nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp; &nbsp;
    <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;

    <script>
        //获取div的样式
        $("#btn1").click(function(){
            alert($("div").css("border")) // 1px solid rgb(255, 0, 0)
        })

        //设置div的背景色为蓝色
        $("#btn2").click(function(){
            $("div").css("background","blue ");
        })

        //给div设置cls1样式
        $("#btn3").click(function(){
            $("div").addClass("cls1"); //触发按钮后 div会多一个类选择器为class="cls1"
        })

        //给div删除cls1样式
        $("#btn4").click(function(){
            $("div").removeClass("cls1"); 
        })

        //给div设置或删除cls1样式
        $("#btn5").click(function(){
            $("div").toggleClass("cls1"); //如果有类选择器就删除 没有就添加
        })

    </script>

</body>
</html>

操作属性

属性说明
attr(name,[value])获得/设置属性的值
prop(name,[value])获得/设置属性的值(checked,selected)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

    <input type="text" id=username>
    <br>
    <input type="button" id="btn1" value="获取输入框的id属性">
    <input type="button" id="btn2" value="给输入框设置value属性">
    <br><br>
    <input type="radio" id="gender1" name="gender"> 男
    <input type="radio" id="gender2" name="gender"> 女
    <br>
    <input type="button" id="btn3" value="选中女">
    <br> <br>

    <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select>
    <br>
    <input type="button" id="btn4" value="选中本科">
    <script>
        //获取输入框的id属性 username
        $("#btn1").click(function(){
            alert($("#username").attr("id"));    //username
        })

        //给输入框设置value属性为hello
        $("#btn2").click(function(){
            $("#username").attr("value","hello")
        })
 
        //选中女
        $("#btn3").click(function(){
            $("#gender2").prop("checked",true);
        })

        //选中本科
        $("#btn4").click(function(){
            $("#bk").prop("selected",true);
        })
    </script>
    
</body>
</html>

DOM和JQuery区别

  1. DOM对象： 是原生JavaScript提供的，用于表示网页中的元素和节点的对象。你可以使用原生的JavaScript方法来获取和操作这些对象，但操作可能较为繁琐，需要处理兼容性和语法差异。原生JS获取来的就是DOM对象
  2. jQuery对象： 是由jQuery库提供的，它是一种特殊的封装，包含一个或多个DOM元素以及方便的方法来操作它们。jQuery对象的语法更简洁，通常跨浏览器兼容，同时支持链式操作，使代码更具可读性。jQuery方法获取的元素就是jQuery对象

简而言之，DOM对象是原生的，而jQuery对象是通过jQuery库创建的，它们提供了不同的方式来处理和操作网页中的元素。

最后修改：2023 年 08 月 08 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏