jQuery的简单介绍和用法与json 和 ajax 的简单使用介绍

最新推荐文章于 2023-01-05 16:37:58 发布

长安白猫

最新推荐文章于 2023-01-05 16:37:58 发布

阅读量245

点赞数

分类专栏：系统学习python

本文链接：https://blog.csdn.net/weixin_44074810/article/details/90349938

版权

系统学习python 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

JS定时器
js 定时器有两种创建方式：

1.setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
2.setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout函数的参数说明:

1.第一个参数 func , 表示定时器要执行的函数名
2.第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
3.三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

setInterval函数的参数说明:

1.第一个参数 func , 表示定时器要执行的函数名
2.第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
3.第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

清除定时器

js 清除定时器分别是:

1.clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
2.clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

1.timeoutID 为调用 setTimeout 函数时所获得的返回值，
使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。

clearInterval函数的参数说明:

timeoutID 为调用 setInterval 函数时所获得的返回值，
使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

1.定时器的创建
    1.1 只执行一次函数的定时器, 对应的代码是setTimeout函数
    1.2 反复执行函数的定时器, 对应的代码是setInterval函数
2.清除定时器
    2.1 清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
    2.2 清除清除反复执行的定时器, 对应的代码是clearInterval函数

jQuery
1.jQuery的介绍
jQuery是对JavaScript的封装，它是免费、
开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

2.jQuery的作用
jQuery和JavaScript它们的作用一样，都是负责网页行为操作，
增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。
3.jQuery的优点

1.jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
2.jQuery简化了 JavaScript 编程，代码编写更加简单。

jQuery是一个免费、开源的JavaScript函数库
jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
jQuery的优点就是兼容主流浏览器，代码编写更加简单。

jQuery的用法

jQuery的引入

jQuery的入口函数
第一种
// 第一种方式,使用原生js来做为程序入口
window.onload = function(){
var d = document.getElementById(‘d1’);
alert(d);
}

// 第二种方式,使用 jquery 的ready 函数做为程序入口
// $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots获取到标签对象时,前缀使用一个$
// var $d = $(’#d1’);
// alert(‘juqery’ + $d);

    // });
    //结论: jquery 的入口函数 ready 要比原生的js入口函数 onload 事件要快

// jquery 的入口函数简化形式
$(function(){
var $d = $(’#d1’);
alert(‘juqery-simple:’ + $d);
});

jQuery选择器

jQuery选择器的种类

1. 标签选择器
2. 类选择器
3. id选择器
4. 层级选择器
5. 属性选择器

<script>
    $(function(){
    // 标签选择器
    var $mk1 = $('h1');
    $mk1.css({background:'red'});
    // 类选择器
    var $mk2 = $('.mp');
    $mk2.css({color:'blue'});
    // id选择器
    var $mk3 = $('#d1');
    // 如果在jquery当中设置css样式时,如果key的字符串中包含 - ,那么key要使用引号包裹 
    $mk3.css({"font-size":'30px'});
    // 层级选择器
    var $mk4 = $('div a');
    $mk4.css({background:'red'});

    // 属性选择器
    var $mk5 = $('input[type=text]');
    $mk5.css({background:'blue'});

    var $mk5 = $('input[type=password]');
    $mk5.css({background:'green'});

    });


    

</script>

<h1>AAAA</h1>
<p class='mp'> BBBB </p>
<div id='d1'>CCCC</div>

<div>
    <a href="#">AAA</a>
</div>

<input type="text" name="" id="" value="XXX">
<input type="password" name="" id="" value="XXX">
<input type="text" name="" id="" value="XXX">

或者：
$(’#myId’) //选择id为myId的标签
$(’.myClass’) // 选择class为myClass的标签
$(‘li’) //选择所有的li标签
$(’#ul1 li span’) //选择id为ul1标签下的所有li标签下的span标签
$(‘input[name=first]’) // 选择name属性等于first的input标签

可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。
$(function(){
result = $(“div”).length;
alert(result);
});

选择集过滤

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

1. has(选择器名称)方法，表示选取包含指定选择器的标签
2. eq(索引)方法，表示选取指定索引的标签

has方法的示例代码:

这是第一个div

这是第二个div

eq方法的示例代码:

这是第一个div

这是第二个div

<script>
    // 入口
    $(function(){

        var $divs = $('div');
        // alert($divs.length);
        console.log($divs);

        // has 过滤
        var $mk1 = $divs.has('#p1');
        $mk1.css({background:"red"});

        // var $mk2 = $divs.last();  // 获取集合中的最后一个标签
        // var $mk2 = $divs.first();   // 获取集合中的第一个标签
        var $mk2 = $divs.eq(1);
        $mk2.css({background:"blue"});

        

    });
</script>

<div>
    <p>AAA</p>
</div>

<div>
    BBB
</div>

<div>
    <p id="p1"> DDD</p>
</div>

选择集转移

选择集转移就是以选择的标签为参照，然后获取转移后的标签

择集转移操作

1. $('#box').prev(); 表示选择id是box元素的上一个的同级元素
2. ('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
3. $('#box').next(); 表示选择id是box元素的下一个的同级元素
4. $('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
5. $('#box').parent(); 表示选择id是box元素的父元素
6. $('#box').children(); 表示选择id是box元素的所有子元素
7. $('#box').siblings(); 表示选择id是box元素的其它同级元素
8. $('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素

这是第一个h2标签

这是第一个段落

这是一个 div 第二个span

这是第二个h2标签

这是第二个段落

-----------------------------------------------------------------

<script>

    $(function(){
        // 取到参考标签
        var $mkp = $('p');

        // 当前标签的上一个标签
        var $prev = $mkp.prev();
        $prev.css({background:'red'});

        // 当前标签的所有上一级的同级标签
        var $priva = $mkp.prevAll();
        $priva.css({background:'green'});

        // 当前标签的下一个标签
        var $next = $mkp.next()
        $next.css({background:'blue'});

        // 当前标签的下面的所有标签
        var $nexta = $mkp.nextAll();
        $nexta.css({background:'yellow'});

        // 除当前标签以外的所有同级标签
        var $sibl = $mkp.siblings();
        $sibl.css({background:'red'});

        // 当前标签的父标签
        var $mkpp = $mkp.parent();
        $mkpp.css({background:'purple'});

        // 当前标签的所有子标签
        var $cmkp = $mkp.children();
        $cmkp.css({'font-size':'30px'});


        // 找到当前标签中,类名为指定选择器的标签
        var $fp = $mkp.find('#s');
        $fp.css({color:'red'});

        var $fp = $mkp.find('.sn');
        $fp.css({color:'red','font-size':'50px'});

    });

</script>

这是高一级的大标题

一号标签

二号标签

三号标签

A 参考标签 B

四号标签

五号标签

六号标签

获取和设置元素内容

html方法的使用

jquery中的html方法可以获取和设置标签的html内容

hello

给指定标签追加html内容使用append方法

读取和设置标签内容

<script src="js/jquery-1.12.4.min.js"></script>

<script>
    // 入口
    $(function(){
        // 获取div 标签
        var $mkd = $('div');
        alert($mkd);

        // 通过 html() 方法获取标签里的内容
        var mkp = $mkd.html();
        alert(mkp);

        // 通过 html() 方法设置标签里的内容
        $mkd.html('<a href="http://www.baidu.com">百度1</a>');


        // 向标签中追回一个新标签, 通过 append() 方法
        $mkd.append('<hr>');
        $mkd.append('<a href="http://www.baidu.com">百度2</a>');
    });
</script>

AAAA

获取和设置元素属性

prop方法的使用
之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

这是一个链接

获取value属性和设置value属性还可以通过val方法来完成。

读取和设置标签属性

<script src="js/jquery-1.12.4.min.js"></script>

<script>
    $(function(){
        // 获取两个对象
        var $inp = $('[type="text"]');
        var $a = $('a');

        // 通过 prop() 方法读取属性
        // alert($inp.prop('type'));
        // alert($inp.prop('name'));
        // alert($inp.prop('value'));
        // alert($inp.prop('class'));
        // alert($inp.prop('id'));

        // getAttrib();

        // 通过 prop()给属性改值
        $inp.prop({'value':'KKKKK'});
        $inp.prop({'class':'inccccc'});

        $a.prop({'href':'http://www.baidu.com'});


        // val 方法,可以设置和获取 value 属性的值
        alert($inp.val());
        $inp.val('TTTTT');
    });

    function getAttrib(){
        var $inp = $('[type="text"]');
        alert($inp.prop('type'));
        alert($inp.prop('name'));
        alert($inp.prop('value'));
        alert($inp.prop('class'));
        alert($inp.prop('id'));
    }

<input type="text" name='username' value="xxx" class="cin" id="inid">
<a>百度</a>

jQuery事件

常用事件

1. click() 鼠标单击
2. blur() 元素失去焦点
3. focus() 元素获得焦点
4. mouseover() 鼠标进入（进入子元素也触发）
5. mouseout() 鼠标离开（离开子元素也触发）
6. ready() DOM加载完成

列表文字
列表文字
列表文字

<input type="text" id="text1">
<input type="button" id="button1" value="点击">

1. this指的是当前发生事件的对象，但是它是一个原生js对象
2. $(this) 指的是当前发生事件的jquery对象

事件

<script src="js/jquery-1.12.4.min.js"></script>

<script>
    $(function(){
        // 获取三个标签对象
        var $div = $('div');
        var $btn = $('#inb');
        var $text = $('#in1');
        var $lis = $('ol li');

        // 给按钮绑定点击事件
        $btn.click(function(){
            alert('按钮被点击');
        });

        // 给列表项绑定点击事件
        $lis.click(function(){
            // 更改发生事件的列表项的颜色
            $(this).css({color:"red"})
            // 将列表项的内容弹出
            alert($(this).html());
        });

        // 获取焦点
        $text.focus(function(){
            // 给自己改颜色 
            $(this).css({background:'blue'});
            // 当发生该事件时,给其它 标签改颜色 
            $div.css({background:'yellow'});
        });

        // 失去焦点
        $text.blur(function(){
            // 给自己改颜色 
            $(this).css({background:'white'});
            // 当发生该事件时,给其它 标签改颜色 
            $div.css({background:'white'});
        });

        // 鼠标进入和鼠标移出
        $div.mouseover(function(){
            $(this).css({width:'200px',height:"200px", background:"red"})
        });

        $div.mouseout(function(){
            $(this).css({width:'100%',height:"20px", background:"white"})
        });


    });

</script>

<div>AA</div>
<hr>
<input type="text" id="in1">
<hr>
<input type="button" id="inb" value="OK">
<hr>
<ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>

事件代理

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，
通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，
提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件冒泡代码:

哈哈

当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。

事件冒泡

<style>
    #fd{
        width: 300px;
        height: 300px;
        background: red;
    }
    #cd{
        width: 100px;
        height: 100px;
        background: blue;
    }

</style>

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        var $fd = $('#fd');
        var $cd = $('div').eq(1);
        // alert($cd.html())

        $cd.click(function(){
            alert('子标签被点击');
        });

        $fd.click(function(){
            alert('父标签被点击..');
        });



    });
</script>

<div id='fd'>
    <div id='cd'>
            AAAA
    </div>
</div>

一般绑定事件的写法:

$(function(){
$ali = $(’#list li’);
$ali.click(function() {
$(this).css({background:‘red’});
});
})

事件代理的写法

$(function(){
$list = $(’#list’);
// 父元素ul 来代理子元素li的点击事件
$list.delegate(‘li’, ‘click’, function() {
// $(this)表示当前点击的子元素对象
$(this).css({background:‘red’});
});
})

delegate方法参数说明:

delegate(childSelector,event,function)

1. childSelector: 子元素的选择器
2. event: 事件名称，比如: 'click'
3. function: 当事件触发执行的函数

事件代理

<ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>

JavaScript对象

JavaScript对象的介绍

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

JavaScript创建对象操作

创建自定义javascript对象有两种方式:

1. 通过顶级Object类型来实例化一个对象
2. 通过对象字面量创建一个对象

Object类创建对象的示例代码:

对象字面量创建对象的示例代码:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

JavaScript对象

<script>
    // 使用根类 Object 类来实例对象
    // 这里只是在内存中开辟了一块对象空间,保存了对象的引用,对象里没有实际内容
    var oCar = new Object();

    // 给对象绑定属性和方法(类似python中的动态绑定)
    oCar.brand = 'Benz';
    oCar.number = '京A00001';
    oCar.speed = 200;
    oCar.driver = function(){
        // this 是js中表示对象本身的一个关键字,类似 python对象中的 self
        console.log('车牌为' + this.number + this.brand + '以' + this.speed + 'KM/h');
    };

    // 使用属性, 对象名.属性名
    console.log(oCar.number);

    // 使用方法 对象名.方法名()
    oCar.driver()


    // 第二种试,使用字面量形式
    var oTom = {
        name: 'Tom',
        age: 21,
        sing: function(){
            console.log(this.name + this.age);
        }
    };

    console.log('name:' + oTom.name);
    oTom.sing();
    
</script>

json

json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，
它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

json的格式

json有两种格式：

对象格式
数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

{
“name”:“tom”,
“age”:18
}
格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

[“tom”,18,“programmer”]

实际开发的json格式比较复杂,例如:

{
“name”:“jack”,
“age”:29,
“hobby”:[“reading”,“travel”,“photography”]
“school”:{
“name”:“Merrimack College”,
“location”:“North Andover, MA”
}
}

json数据转换成JavaScript对象

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

示例代码:

var sJson = ‘{“name”:“tom”,“age”:18}’;
var oPerson = JSON.parse(sJson);

// 操作属性
alert(oPerson.name);
alert(oPerson.age);

JSON数据

<script src="js/jquery-1.12.4.min.js"></script>


<script>
    // 定义一个json数据,数组格式
    var sjson1 = '[1,2,3,4,5,"a"]';
    // 将json数据解析成js的数组
    var jArray = JSON.parse(sjson1);
    console.log(jArray);

    // 第二种形式,json字符串描述js对象形式
    var sjson2 = '{"name":"tom", "age":21}'
    var tom = JSON.parse(sjson2);
    console.log(tom);
    console.log(tom.name);
    console.log(tom.age);


    // json 是一种数据格式
    // 是一种字符串描述的
    // json 中的数据如果是字符串,必须要使用 双引号 包裹
    // 解析使用: JSON.parse(json字符串);


</script>

ajax

ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，
在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

ajax方法的参数说明:

1. url 请求地址
2. type 请求方式，默认是'GET'，常用的还有'POST'
3. dataType 设置返回的数据格式，常用的是'json'格式
4. data 设置发送给服务器的数据，没有参数不需要设置
5. success 设置请求成功后的回调函数
6. error 设置请求失败后的回调函数
7. async 设置是否异步，默认值是'true'，表示异步，一般不用写
8. 同步和异步说明
    8.1 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
    8.2 异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。

ajax的简写方式:

$. a j a x 按照请求方式可以简写成$ .get或者$.post方式

ajax简写方式的示例代码:

$. g e t 和$ .post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

1. url 请求地址
2. data 设置发送给服务器的数据，没有参数不需要设置
3. success 设置请求成功后的回调函数
    3.1 data 请求的结果数据
    3.2 status 请求的状态信息, 比如: "success"
    3.3 xhr 底层发送http请求XMLHttpRequest对象
4. dataType 设置返回的数据格式
    4.1 "xml"
    4.2 "html"
    4.3 "text"
    4.4 "json"
5. error 表示错误异常处理
    5.1 func 错误异常回调函数

AjaxGet请求方式

<Script src="js/jquery-1.12.4.min.js"></Script>

<script>
    // ajax 的方法是 $.ajax();
    // 这个方法传入的参数是一个js对象
    $.ajax({
        // 1. 请求地址
        url:'data.json',
        // 2. 请求方式
        type:'get',
        // 3. 请求后的数据,使用什么格式解析
        dataType:'JSON',
        // 4. 用户请求的数据,如果没有,可以不写
        data:{page:1,count:20},
        // 5. 如果请求成功,做什么
        // 成功后,服务器会返回数据,数据要接收一下,放到匿名函数中
        success:function(data){
            // 实现刷的的动作写在这里
            // alert(data.name);
            // alert(data.price);

            // 利用jquery,找到页面中的标签对象,然后将接收的数据,刷新上去显示出来
            var $ln = $('#ln').next();
            $ln.html(data.name);

            var $lp = $('#lp').next();
            $lp.html(data.price);


        },
        // 6. 如果请求失败,那么做什么
        error:function(){
            alert('请求失败');
        },
        // 7. 是否进行异步请求
        async: true
    });

这个可以和上面的代码分开两次运行

    // $.get().error(); 是get请求的简化格式
    // $.post().error(); 是post请求的简化格式
    $.get('data.json',function(data){
            var $ln = $('#ln').next();
            $ln.html(data.name);

            var $lp = $('#lp').next();
            $lp.html(data.price);
    },'json').error(function(){
        alert('请求失败');
    });

</script>

商品名: A

价格: 0

AjaxGet请求方式

<Script src="js/jquery-1.12.4.min.js"></Script>

<script>
    // ajax 的方法是 $.ajax();
    // 这个方法传入的参数是一个js对象
    $.ajax({
        // 1. 请求地址
        url:'data.json',
        // 2. 请求方式
        type:'get',
        // 3. 请求后的数据,使用什么格式解析
        dataType:'JSON',
        // 4. 用户请求的数据,如果没有,可以不写
        data:{page:1,count:20},
        // 5. 如果请求成功,做什么
        // 成功后,服务器会返回数据,数据要接收一下,放到匿名函数中
        success:function(data){
            // 实现刷的的动作写在这里
            // alert(data.name);
            // alert(data.price);

            // 利用jquery,找到页面中的标签对象,然后将接收的数据,刷新上去显示出来
            var $ln = $('#ln').next();
            $ln.html(data.name);

            var $lp = $('#lp').next();
            $lp.html(data.price);


        },
        // 6. 如果请求失败,那么做什么
        error:function(){
            alert('请求失败');
        },
        // 7. 是否进行异步请求
        async: true
    });
</script>

商品名: A

价格: 0

长安白猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的简单介绍和用法与json 和 ajax 的简单使用介绍

JS定时器js 定时器有两种创建方式：1.setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器2.setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器setTimeout函数的参数说明:1.第一个参...
复制链接

扫一扫