菜鸟的Jquery常用方法总结

说明

更新时间：2020/11/3 23:46，更新完基本内容

本文现对Jquery进行一次总结与记录，主要是基于自己的主观来进行总结，本文会持续更新，不断地扩充

注意：本文仅为记录学习轨迹，如有侵权,联系删除

保存一下参考jq常用方法链接：https://www.cnblogs.com/jpfss/p/8350839.html

一、请求

get

//请求 test.php 网页，忽略返回值。
$.get("test.php");

//请求 test.php 网页，传送2个参数，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );
 
//显示 test.php 返回值(HTML 或 XML，取决于返回值)。
$.get("test.php", function(data){
          alert("Data Loaded: " + data);
});

//显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。
$.get("test.cgi", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
});

post

//请求 test.php 网页，忽略返回值：
$.post("test.php");

//请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：
$.post("test.php", { name: "John", time: "2pm" } );

//向服务器传递数据数组（同时仍然忽略返回值）：
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

//输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）：
$.post("test.php", function(data){
          alert("Data Loaded: " + data);
          });

//向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）
$.post("test.php", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
          });


//获得 test.php 页面返回的 json 格式的内容：：
$.post("test.php", { "func": "getNameAndTime" },
          function(data){
          alert(data.name); // John
          console.log(data.time); //  2pm
          }, "json");

ajax

//发送请求
$.ajax({
    type:"get",    //请求方式
    async:true,    //是否异步
    url:"https://url",
    dataType:"jsonp",    //跨域json请求一定是jsonp
    jsonp: "callbackparam",    //跨域请求的参数名，默认是callback
    //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
    data:{"id":"123"},    //请求参数
    beforeSend: function() {
        //请求前的处理
    },
    success: function(data) {
        console.log(data)   
        //请求成功处理，和本地回调完全一样
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }



//点击发送请求同步请求
<button type="button" id="ajax" name="ajax">ajax请求</button>
 $("#ajax").on("click",function () {
        let url = "http://localhost:8080/user/";
        $.ajax({
            type: "get",    //请求方式
            async: false,    //是否异步
            url: url,
            // data: {"id": "123"},    //请求参数
            beforeSend: function () {
                alert("请求前的处理");
                //请求前的处理
            },
            success: function (data) {
                alert("请求成功处理，和本地回调完全一样");
                console.log(data)
                //请求成功处理，和本地回调完全一样
            },
            complete: function () {
                alert("请求完成的处理");
                //请求完成的处理
            },
            error: function () {
                alert("请求出错处理");
                //请求出错处理
            }
        });
    });



$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
   var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
 

   if ( /Whip It/.test( data ) ) {
 

   alert( "We got what we came for!" );
 

   }
 

  });
 

二、选择器

id选择器

<!--id选择器-->
<div>
    <h2>id选择器</h2>
    <button type="button" id="myDiv1" name="myDiv1">id选择器</button>
</div>
<div>
    <form>
        <span>下拉框</span>
        <select id="fruit">
            <option value="0">苹果</option>
            <option value="1">香蕉</option>
            <option value="2">菠萝</option>
            <option value="3">草莓</option>
        </select>
    </form>
    <button type="button" id="btn1">确认</button>
</div>



    //id选择器
    $("#myDiv1").on("click",function(){
        alert("hello world");
    });
    $("#fruit").on("change",function () {
        console.log("值已经改变了");
    });
    $("#btn1").on("click",function () {
        //获取下拉框的值
        alert($("#fruit").val());
        console.log($("#fruit:selected"))
    });

类选择器

//类选择器
<div>
    <h2>class选择器</h2>
    <button type="button" id="myDiv2" name="myDiv2">class选择器:修改背景</button>
    <ul>
        <li class="myClass">(可以点击我)li-01</li>
        <li class="myClass">(可以点击我)li-02</li>
        <li class="myClass">(可以点击我)li-03</li>
        <li class="myClass">(可以点击我)li-04</li>
    </ul>
</div>


//class选择器
$("#myDiv2").on('click',function () {
    //设置背景颜色
   $(".myClass").css("background-color","#C50210");

   //获取每一个值
    $(".myClass").each(function (index,element) {
        alert($(this).text());
    });
});

标签选择器

 //标签选择器
 <div>
    <h2>标签选择器</h2>
    <button type="button" id="myDiv3" name="myDiv3">标签选择器</button>
    <form>
        篮球:<input type="checkbox" name="hobby" value="篮球">
        足球:<input type="checkbox" name="hobby" value="足球">
        羽毛球:<input type="checkbox" name="hobby" value="羽毛球">
    </form>
</div>

//标签选择器
$("#myDiv3").on('click',function () {
   $("input").each(function (index,element) {
       console.log(index);//循环的下标
       console.log(element);//元素

       alert($(this).val());

   });
});

[attribute=value]

匹配给定的属性是某个特定值的元素，这个可以跟标签选择器一起使用

<!-- [attribute=value] -->
<div>
    <form>
        <span>请选择您的爱好:</span>
        游戏:<input type="checkbox" id="game" name="aiHao" value="游戏">
        游泳:<input type="checkbox" id="swing" name="aiHao" value="游泳">
        读书:<input type="checkbox" id="read" name="aiHao" value="读书">
    </form>

    <button type="button" id="aiHaoBtn">确定</button>

</div>


//[attribute=value]
$("#aiHaoBtn").on("click",function () {
    $("input[name='aiHao']").each(function (index,element) {
        console.log(index);
        console.log(element);
        if($(this).is(":checked") == true){
            let a = $(this).val();
            alert(a+"已选");
        }else {
            let a = $(this).val();
            alert(a+"未选");
        }
    });
});

:check

<!--:checked-->
<div>
    <form>
        <span>请选择您的爱好:</span>
        游戏:<input type="checkbox" id="game1" name="aiHao1" value="游戏">
        游泳:<input type="checkbox" id="swing1" name="aiHao1" value="游泳">
        读书:<input type="checkbox" id="read1" name="aiHao1" value="读书">
    </form>

    <button type="button" id="aiHaoBtn1">确定</button>
</div>

//:checked
$("#aiHaoBtn1").on("click",function () {
    //获取多选框已选
    $("input[name='aiHao1']:checked").each(function (index,element) {
        console.log(index);
        console.log(element);

        //输出所有已选
        alert($(this).val());
    });
});

三、属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        .red{
            background-color: red;
        }
        .myFront{
            color: yellow;
            text-align: center;
        }
    </style>
</head>
<body>

<!--属性的增加与移除-->
<div>
    <div id="text1" style="background-color: red">hello world</div>
    <button type="button" id="btn1">隐藏</button>
    <button type="button" id="btn2">修改背景色</button>
    <button type="button" id="btn3">移除样式</button>
</div>
<br><br><br><hr>


<!--类样式的添加与移除-->
<div>
    <div id="text2" class="red">hello world</div>
    <button type="button" id="btn4">增加myFront类样式</button>
    <button type="button" id="btn5">移除red类样式</button>
</div>
<br><br><br><hr>



<script>

    //属性的增加与移除
    $("#btn1").on("click",function () {
        //批量添加属性
        $("#text1").attr({name:"hello",hidden:"true"});
    });

    $("#btn2").on("click",function () {
        // 通过attr给对应的标签加上属性
        $("#text1").attr("style","background-color: yellow");
    });

    $("#btn3").on("click",function () {
        // 移除样式
        $("#text1").removeAttr("style");
    });


    //类样式的添加与移除
    $("#btn4").on("click",function () {
        // 添加类样式
        $("#text2").addClass("myFront");
    });

    $("#btn5").on("click",function () {
        // 移除类样式
        $("#text2").removeClass("red");
    });

</script>
</body>
</html>

四、html添加

js动态添加html片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html添加</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>

<!--appendTo-->
<div>
    <p id="world1">你好!世界</p>
    <p id="world2">是的呢</p>
    <p id="world3">这是一个美好的世界</p>
    <hr>

    <div id="content" style="background-color: red">文章标题</div>
    <button type="button" id="btn1">添加html</button>
</div>
<br><br><br><hr>

<!--append-->
<div id="div1">
    <button type="button" id="btn2">添加html</button>
</div>

<script>
    //appendTo
    $("#btn1").on("click",function () {
        //将world1标签的内容加入content标签里面
        // $("#world1").appendTo("#content");
        
        
        //直接添加自定义表单
        let form = "        <span>用户：</span><input type=\"text\" id=\"username\" name=\"username\">\n" +
            "        <span>密码：</span><input type=\"password\" id=\"password\" name=\"password\">\n" +
            "        <input type=\"submit\" value=\"确定\" name=\"submit\" id=\"submit\">";

        $(form).appendTo("#content");
    });

    //append
    $("#btn2").on("click",function () {
        let add = "<div>it is a lucky day,sir</div>";

        //div1标签里面插入自定义的html片段
        $("#div1").append(add);
    });


</script>
</body>
</html>

五、计时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

</head>
<body>

<h2>
    <span id="time"></span>s
</h2>

<script>

    //等待 只执行一次
    // setTimeout();

    //重复 可执行多次
    // setInterval();


    let count = 10;
    let timing = setInterval(function (){
        // alert("等待就能看见我")
        if(count<=0){
            clearInterval(timing);
        }
        $("#time").html(count);
        count--;

    },1000)
</script>
</body>
</html>

六、常用方法

取值和赋值

$("#ID").val(); //取value值

$("#ID").val("xxx"); //赋值

$("#ID").text(); //相当于取innerText

$("#ID").text(""); //相当于赋值给innerText

$("#ID").html(); //相当于取innerHTML

$("#ID").html(""); //相当于赋值给innerHTML

隐藏与显示

$("#ID").hide(); //隐藏
$("#ID").show(); //显示

页面加载后立刻执行

$(document).ready(function () { });

遍历

var arr1=['aa','bb','cc','dd'];
 $.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+"->"+val);