js文件在使用jquery jquery的js文件

转载

编程小匠人传奇 2024-07-03 07:38:47

文章标签 js文件在使用jquery javascript 选择器 jquery jQuery 文章分类 jQuery 前端开发

JQuery

1.Jquery的下载与安装

1.1下载

http://jquery.com/下载

1.2优点

（1）提供了强⼤的功能函数

（2）解决浏览器兼容性问题

（3）实现丰富的 UI 和插件

（4）纠正错误的脚本知识

1.3安装

在⻚⾯引⼊即可

<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

2. Jquery核心

$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。通过该对象可以获取jQuery对象，调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法。

3. Dom对象与 Jquery包装集对象

3.1Dom对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和⽅法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

3.2Jquery包装集对象

可以说是 Dom 对象的扩充。在 jQuery 的世界中将所有的对象，⽆论是⼀个还是⼀组，都封装成⼀个jQuery 包装集，⽐如获取包含⼀个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

3.3Dom对象转 Jquery对象

Dom 对象转为 jQuery 对象，只需要利⽤ $() ⽅法进⾏包装即可

var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv);

3.4Jquery对象转Dom对象

jQuery 对象转 Dom 对象，只需要取数组中的元素即可

// 第⼀种⽅式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第⼆种⽅式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过 $() 转为 jQuery 对象

$('#mydiv').each(function() {//遍历
    var jquery = $(this); 
});

<div id="mydiv">write less, do more</div> <script type="text/javascript">
    console.log("-------------获取dom对象------------------")
    // dom对象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);

    console.log("-------------获取jquery对象------------------")
    // 获取jquery对象
    // 第⼀种⽅式
    var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    // 第⼆种⽅式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);

    console.log("-------------dom转jquery------------------")
    // dom转jquery包装集/对象
    var obj = $(domDiv);
    console.log(obj);

    console.log("-------------jquery转dom------------------")
    // jquery对象转dom对象
    var dom = $('#mydiv')[0]; // 获取jquery对象转为dom
    // 或
    var dom2 = jqueryDiv[0]; // 将jquery对象转为dom
    console.log(dom);
    console.log(dom2);

    /* this代表了dom对象，不是jquery对象 */
    console.log("-------------dom转jquery------------------")
    $('#mydiv').each(function() {
        // 通过id选择器选择了id为mydiv的所有元素然后进⾏遍历
        // 那么遍历出的每个元素就是id为mydiv的标签元素
        // ⽽this就代表了当前的这个元素
        var jquery = $(this);
    });

    console.log("-------------jquery转dom------------------")
    $('#mydiv').each(function() {
        var dom3 = this; 
    });
</script>

4.Jquery选择器

4.1基础选择器

id选择器 #id

元素名称选择器 element

类选择器 .class

选择所有元素 *

组合选择器 selector1,selector2,selectorN

<style type="text/css">
    .blue{
        background: blue;
    }
</style> 
<body>
    <div id="mydiv1">id选择器1<span>span中的内容</span></div>
    <div id="mydiv2" class="blue">元素选择器</div>
    <span class="blue">样式选择器</span>
</body> 
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript">
    // id选择器
    console.log("======id====");
    var idSelecter = $('#mydiv1');
    console.log(idSelecter.html());
    console.log(idSelecter.text());
    // 元素选择器
    console.log("======name====");
    var nameSe = $('div'); // 有多个div元素
    nameSe.each(function(){
        // this是dom对象，$(this)是jquery对象
        console.log($(this).text());
    });
    // 类选择器，class
    console.log("======class====");
    var classSe = $('.blue'); // 有多个class=blue的元素
    classSe.each(function(){
        console.log($(this).text());
    });
    // 通⽤选择器：*
    console.log("======所有元素====");
    var all = $("*");
    console.log(all.length);
    // 组合选择器
    console.log("======组合====");
    var unionSe = $('span, .blue,div');
    unionSe.each(function(){ 
        console.log($(this).text());
    });
</script>

4.2 层次选择器

后代选择器 ancestor descendant

⼦代选择器 parent > child

相邻选择器 prev + next

同辈选择器 prev ~ sibling

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>层次选择器</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css">
            .testColor{
                background: green;
            }
            .gray{
                background: gray;
            }
        </style>
    </head>
    <body>
        <div id="parent">层次择器
            <div id="child" class="testColor">⽗选择器
                <div class="gray">⼦选择器</div>
                <img src="http://www.baidu.com/img/bd_logo1.png"
                     width="270" height="129" />
                <img src="http://www.baidu.com/img/bd_logo1.png"
                     width="270" height="129" />
            </div> 
            <div>
                选择器2<div>选择器2中的div</div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        console.log("=========后代选择器-选择所有后代=====");
        var ancestorS = $('#parent div');
        ancestorS.each(function(){
            console.log($(this).text());
        });

        console.log("=========⼦代选择器-选择⼉⼦辈=====");
        var child = $('#parent>div');
        child.each(function(){
            console.log($(this).text());
        });

        console.log("=========相邻选择器=====");
        var pre_next = $(".gray + img");
        console.log(pre_next.length);

        console.log("=========同辈选择器,其后，（弟弟）=====");
        var pre_siblings = $(".gray ~ img");
        console.log(pre_siblings.length);
    </script>
</html>

4.3表单选择器

表单选择器 :input

⽂本框选择器 :text

密码框选择器 :password

单选按钮选择器 :radio

复选框选择器 :checkbox

提交按钮选择器 :submit

图像域选择器 :image

重置按钮选择器 :reset

按钮选择器 :button

⽂件域选择器 :file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单验证</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <form id='myform' name="myform" method="post"> 
            <input type="hidden" name="uno" value="9999" disabled="disabled"/>
            姓名:<input type="text" id="uname" name="uname" /><br />
            密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
            年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
            <input type="radio" name="uage" value="1"/>你懂得 <br />
            爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
            <input type="checkbox" name="ufav" value="爬床"/>爬床
            <input type="checkbox" name="ufav" value="代码"/>代码<br />
            来⾃:<select id="ufrom" name="ufrom">
            <option value="-1" selected="selected">请选择</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            </select><br />
            简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
            头像:<input type="file" /><br />
            <input type="image" src="http://www.baidu.com/img/bd_logo1.png"
                   width="20" height="20"/>
            <button type="submit" onclick="return checkForm();">提交</button>
            <button type="reset" >重置</button> 

        </form></body>
</html> <script type="text/javascript">
    function checkForm(){
        // 获取 所有的表单元素
        $(":input").each(function(){
            // console.log($(this)[0]);
            console.log($(this)[0].tagName);
        })
        console.log("------+++++++++++++++++++++--------")
        // 获取 text
        console.log("text-->" + $(":text").length); // 1
        // 获取 password
        console.log("password-->" + $(":password").length); // 1
        // 获取radio
        console.log("radio-->" + $(":radio").length); // 2
        // 获取checkbox
        console.log("checkbox-->" + $(":checkbox").length); // 3
        // 获取file
        console.log("file-->" + $(":file").length); // 1
        // 获取按钮
        console.log("button-->" + $(":button").length); // 2
        // 获取submit按钮
        console.log("submit-->" + $(":submit").length); // 1
        // 获取image按钮
        console.log("image-->" + $(":image").length); // 1
        // 获取reset按钮
        console.log("reset-->" + $(":reset").length); // 1
        return false; 
    }
</script>

5.Jquery Dom操作

5.1操作元素的属性

5.1.1获取属性

attr(属性名称) 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。

prop(属性名称) 获取具有true和false两个属性的属性值

<form action="" id="myform">
    <input type="checkbox" name="ch" checked="checked"/> aa
    <input type="checkbox" name="ch" /> bb
</form>

<script type="text/javascript">
    var ch = $("input[type='checkbox']")
    console.log(ch)
    ch.each(function(idx, em){
        console.log(idx + "-" + $(em) + "=" + this)
        console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
        console.log('--------------')
    })
</script>

5.1.2设置属性

attr(属性名称，属性值) 设置指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。

prop(属性名称，属性值) 设置具有true和false的属性值

5.1.3移除属性

removeAttr(属性名) 移除指定的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性操作</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <pre>
 <h5>1.attr()</h5>
 设置或者返回元素的属性 ;
 <h5>2.prop()</h5>
 设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
 </pre>
        <hr />
        <a href="http://www.baidu.com" id="a1">百度</a>
        <a href="http://www.sina.com" id="a2">新浪</a>
        <input type="checkbox" name="all" checked="checked"/>全选
    </body>
    <script type="text/javascript">
        // 获取属性值：attr
        console.log($('#a1').attr('href'));
        console.log($(':checkbox').attr('name'));
        // 若未选中显示undefined，选中显示 checked
        console.log($(':checkbox').attr('checked')); 
        // 获取属性值：prop
        // 若未选中显示false，选中显示 true
        console.log($(":checkbox").prop('checked')); 
        console.log($('#a2').prop('href'))
        // 设置属性值
        $('#a1').attr('href','https://jquery.com');
        $(":checkbox").prop("checked",false);
        // 移除属性
        $('#a2').removeAttr('href');
    </script>
</html>

5.2操作元素的样式

attr(“class”) 获取class属性的值，即样式名称

attr(“class”,“样式名”) 修改class属性的值，修改样式

addClass(“样式名”) 添加样式名称

css() 添加具体的样式

removeClass(class) 移除样式名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置元素样式</title>
        <script src="jquery-3.4.1.js" type="text/javascript" ></script>
        <style type="text/css">
            div{
                padding: 8px;
                width: 180px;
            }
            .blue{
                background: blue;
            }
            .larger{
                font-size: 30px;
            }
            .green {
                background : green;
            }
        </style>
    </head>
    <body>
        <h3>css()⽅法设置元素样式</h3>
        <div id="conBlue" class="blue larger">天蓝⾊</div>
        <div id="conRed">⼤红⾊</div>
        <div id="remove" class="blue larger">天蓝⾊</div>
    </body>
    <script type="text/javascript">
        // 获取样式名称
        console.log($("#remove").attr("class"));
        // 修改样式，那么id为remove的元素样式class只有green
        // $('#remove').attr("class","green")
        // 添加样式名称，class名称 --叠加
        // $('#conBlue').addClass("blue larger");
        // 添加元素具体样式
        // { "":"" , "":"" } 名:值 对
        $('#conRed').css({"background-color":"red","color":"#fff"});
        $('#remove').css('color','red');
        // 移除样式
        // $("#remove").removeClass("blue larger");
    </script>
</html>

5.3操作元素的内容

html() 获取元素的html内容

html(“html, 内容”) 设定元素的html内容

text() 获取元素的⽂本内容，不包含html

text(“text 内容”) 设置元素的⽂本内容，不包含html

val() 获取元素value值

val(“值”) 设定元素的value值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>操作内容</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <h3><span>html()和text()⽅法设置元素内容</span></h3>
        <div id="html"></div>
        <div id="text"></div>
        <input type="text" name="uname" value="oop" />
    </body>
    <script type="text/javascript">
        // 获取HTML内容，包括HTML标签
        console.log($('h3').html());
        // 获取⽂本内容，不包括HTML标签
        console.log($('h3').text());
        // 获取value值
        console.log($('[name=uname]').val());
        // 设置
        $('#html').html("<p>使⽤html设置,看不到标签</p>");
        $('#text').text("<p>使⽤text设置,能看到标签</p>");
        $('[name=uname]').val("哈哈哈");
        // console.info("abc");
        // console.log("abc");
        // console.warn("abc")
        // console.error("abc");
    </script>
</html>

5.4创建元素

在jQuery中创建元素很简单，直接使⽤核⼼函数即可

$('元素内容');

$('<p>this is a paragraph!!!</p>');

5.5 添加元素

prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头

append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部

before() 在元素前插⼊指定的元素或内容:$(selector).before(content)

after() 在元素后插⼊指定的元素或内容:$(selector).after(content)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>追加</title>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div {
                margin: 10px 0px;
            }
            span{
                color: white;
                padding: 8px
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h3>prepend()⽅法前追加内容</h3>
        <h3>prependTo()⽅法前追加内容</h3>
        <h3>append()⽅法后追加内容</h3>
        <h3>appendTo()⽅法后追加内容</h3>
        <span class="red">男神</span>
        <span class="blue">偶像</span>
        <div class="green">
            <span >⼩鲜⾁</span>
        </div>
    </body>
</html> <script type="text/javascript">
    var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-color:#ADFF2F;'>动态创建span</span>";
    // 1、使⽤prepend前加内容
    $("body").prepend(str);

    // 2、使⽤prependTo前加内容
    $("<b>开头</b>").prependTo('body');

    // 3、使⽤append后加内容
    $("body").append(str);
    // $("div").append($('.red')); // 当把已存在的元素添加到另⼀处的时候相当于移动

    // 4、使⽤appendTo后追加内容
    $(str).appendTo('body');
    // $('.blue').appendTo("div"); 
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插⼊元素</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h3>before() 和 after()⽅法在元素之前后插⼊内容</h3>
        <span class="green">财⼤⽓粗</span>
    </body>
</html> <script type="text/javascript">
    var str1 = "<span class='red'>⼟豪</span>";
    var str2 = "<span class='blue'>暴发户</span>";
    $(".green").before(str1); // 前置元素
    $(".green").after(str2); // 后存元素
</script>

5.6删除元素

remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。

empty() 清空所选元素的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>删除元素</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{
                background-color: green;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h3>删除元素</h3>
        <span class="green">jquery<a>删除</a></span>
        <span class="blue">javase</span>
        <span class="green">http协议</span>
        <span class="blue">servlet</span>
    </body>
</html> <script type="text/javascript">
    // 删除所选元素 或指定的⼦元素
    // $("span").remove();
    // 删除样式为blue的span
    // $("span.blue").remove();
    // 清空元素
    // $("span").empty();
    // $(".green").empty();
</script>

5.7遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>遍历元素</title>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{
                background-color: green;
            }
            .blue{
                background-color: blue;
            }
        </style>
        <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h3>遍历元素 each()</h3>
        <span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http协议</span>
        <span class="green">servlet</span>
    </body>
    <script type="text/javascript">
        $('span').each(function (idx , e) {
            console.log(idx + " ---> " + $(e).text());
        })
    </script>
</html>

6.Jquery事件

6.1ready加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执⾏

$js文件在使用jquery jquery的js文件_jQuery$ (function(){})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ready事件</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            // ⽂档载⼊完便触发ready⽅法
            $(document).ready(function(){
                $("div").html("ready go...");
            })
            // $(document).ready(function(){}) == $(function(){})
            $(function(){
                $("p").click( function () {
                    $(this).hide();
                });
            });
            $(function(){
                $("#btntest").bind("click",function(){
                    $("div").html("剁吧...");
                });
            });
        </script>
    </head>
    <body>
        <h3>⻚⾯载⼊时触发ready()事件</h3>
        <div></div>
        <input id="btntest" type="button" value="剁⼿" />
        <p>aaa</p>
        <p>bbbb</p>
        <p>ccc</p>
        <p>dddd</p>
    </body>
</html>

6.2 bind()绑定事件

为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是⼀个字符串类型的事件类型，就是你所需要绑定的事件。

6.2.1简单的bind()事件

<script type="text/javascript">
    $(function(){
        /*$("#test").bind("click",function(){
        alert("世界会向那些有⽬标和远⻅的⼈让路！！");
        });*/
        /*
          js的事件绑定
            ele.οnclick=function(){};
        */
        // 等同于上⾯的放⽅法
        $("#test").click(function(){
            alert("世界会向那些有⽬标和远⻅的⼈让路！！");
        });
        /*
         1.确定为哪些元素绑定事件
         获取元素
         2.绑定什么事件（事件类型）
         第⼀个参数：事件的类型
         3.相应事件触发的，执⾏的操作
         第⼆个参数：函数
        */
        $("#btntest").bind('click',function(){
            // $(this).attr('disabled',true);
            $(this).prop("disabled",true);
            })
	});
</script> 

<body>
    <h3>bind()⽅简单的绑定事件</h3>
	<div id="test" style="cursor:pointer">点击查看名⾔</div>
	<input id="btntest" type="button" value="点击就不可⽤了" />
    </body>

6.2.2 绑定多个事件

<script type="text/javascript">
    $(function(){
        // 绑定click 和 mouseout事件
        /*$("h3").bind('click mouseout',function(){
 			console.log("绑多个事件");
 		});*/
        // 链式编程
        $("h3").bind('click',function(){
            alert("链式编程1");
        }).bind('mouseout',function(){
            $("#slowDiv").show("slow");//让slowDiv显示
        });
        /*$("#test").click(function(){
 			console.log("点击⿏标了....");
 		}).mouseout(function () {
 			console.log("移出⿏标了...");
 		});*/
        $("#test").bind({
            click:function(){
                alert("链式编程1");
            },
            mouseout:function(){
                $("#slowDiv").show("slow");
            }
        });
    });
</script> 
<body>
    <h3>bind()⽅法绑多个事件</h3>
    <div id="test" style="cursor:pointer">点击查看名⾔</div>
    <div id="slowDiv"style=" width:200px; height:200px; display:none; ">⼈之所以能，是相信能</div>
</body>

7.Jquery Ajax

7.1 $.ajax

jquery 调⽤ ajax ⽅法：

格式：$.ajax({});

参数：

type：请求⽅式 GET/POST

url：请求地址 url

async：是否异步，默认是 true 表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调⽤此函数

error：请求失败时调⽤此函数

get请求

$.ajax({
    type:"get",
    url:"js/cuisine_area.json",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText);
    }
});

post请求

$.ajax({
    type:"post",
    data:"name=tom",
    url:"js/cuisine_area.json",
    contentType: "application/x-www-form-urlencoded",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str); $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText)
    }
});

7.2$.get

这是⼀个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 1.请求json⽂件，忽略返回值
$.get('js/cuisine_area.json');

// 2.请求json⽂件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
    console.log(data);
});

// 4.请求json⽂件,传递参数,拿到返回值 
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

7.3$.post

这是⼀个简单的 POST 请求功能以取代复杂 $.ajax 。

请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 1.请求json⽂件，忽略返回值
$.post('../js/cuisine_area.json');

// 2.请求json⽂件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
    console.log(data);
});

// 4.请求json⽂件,传递参数,拿到返回值 
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

7.4$.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data); // 要求返回的数据格式是JSON格式
});

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Android 外部陀螺仪安卓陀螺仪传感器下载

下一篇：QtQuick串口编程Demo qt串口开发

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯