JQuery和Ajax学习

cracker_03

已于 2023-06-30 16:35:38 修改

阅读量263

点赞数

文章标签： jquery ajax 学习

于 2023-06-30 16:34:23 首次发布

本文链接：https://blog.csdn.net/shan_03/article/details/131475215

版权

JQuery介绍

学习视频：Jquery和ajax

Jquery的下载与安装

下载

http://jquery.com/ 下载

优点

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

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

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

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

安装

在页面引入即可

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

获取JQuery对象

$ 符号在 jQuery 中代表对 jQuery 对象的引用。只有jQuery对象才能调用jQuery提供的方法。

var box = $("#box");

原理

Dom对象转Jquery对象

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

Jquery选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器。

基础选择器

选择器	名称	举例
id选择器	#id	$(‘#test’)：选择id为test的元素
标签（元素）选择器	element	$(‘div’)：选择所有div元素
类选择器	class	$(‘.box’)：选择class=box的所有元素
通用选择器	*	$(‘*’)：选择所有元素
组合选择器	/	$(“#test,span,.blue”)：同时选中多个选择器匹配的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blue {
            background: blue;
        }
    </style>
</head>

<body>
    <div id="mydiv1">id选择器1 <span>span中的内容</span></div>
    <div id="mydiv2" class="blue">元素选择器</div>
    <span class="blue">样式选择器</span>
    <script src="../js/JQuery.js"></script>
    <script>
        // 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)
        // 组合选择器
        console.log("======组合======");
        var unionSe = $('span, .blue,div');
        unionSe.each(function () {
            console.log($(this).text());
        });
    </script>
</body>

</html>

层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$(“#parent div”)选择id为parent的元素的所有div子元素
子代选择器	parent > child	$(“#parent>div”)选择id为parent的直接div子元素
相邻选择器	prev + next	$(“.blue + img”)选择css类为blue的下一个img元素
同辈选择器	prev ~ sibling	$(“.blue ~ img”)选择css类为blue的之后的img元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #parent{
            width: 300px;
            height: fit-content;
            border: 5px solid salmon;
            text-align: center;
            margin: 0 auto;
            box-sizing: border-box;
        }
        #parent>div{
            border: 3px solid seagreen;
        }
        #parent>div>div{
            color: blue;
        }
    </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>
    <script src="../js/JQuery.js"></script>
    <script>
        console.log("=========后代选择器-选择所有后代=====");
        var ancestorS = $('#parent div');
        console.log(ancestorS)
    
        console.log("=========子代选择器-选择儿子辈=====");
        var child = $('#parent>div');
        console.log(child)

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

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

</html>

表单选择器

表单选择器通过表单元素的类型来进行选择，具体实现格式如下：

:input--->查找所有的input元素，会匹配所有的input、textarea、select和button元素。
:text---->匹配所有文本框
:password--->匹配所有密码输入框
:radio--->匹配所有单选框
:checkbox--->匹配复选框
:submit--->匹配所有具有submit属性的按钮
……

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单选择器</title>
</head>

<body>
    <form id="myform">
        <table>
            <tr>
                <td>用户姓名：<input type="text"></td>
            </tr>
            <tr>
                <td>用户密码：<input type="password"></td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="sex">男 <input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td>
                    爱好<input type="checkbox">游泳 <input type="checkbox">打篮球 <input type="checkbox">题主求 <input type="checkbox">看书 
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>
    <script src="../js/JQuery.js"></script>
    <script>
        var inputs = $(':input');
        inputs.each(function () {
            console.log($(this).get(0))
        })

        console.log("------+++++++++++++++++++++--------")
        // 获取 text
        console.log($(":text")); // 1
        // 获取 password
        console.log( $(":password")); // 1
        // 获取radio
        console.log( $(":radio")); // 2
        // 获取checkbox
        console.log($(":checkbox"));
    </script>
</body>

</html>

Jquery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。

操作元素的属性

获取属性

在这里插入图片描述

设置属性

在这里插入图片描述

移除属性

<script>
    $('#myform').css("text-align","center")
    // 设置（添加）属性
    console.log($(":text").attr('id'))
    $(":text").attr('id','uname');
    console.log($(":text").attr('id'))

    // 两种获取属性方法:attr和prop
    var sex = $(':radio');
    sex.each((index,item)=>{
        console.log($(item).attr('value'))
        console.log($(item).prop('value'))
    })
    var hobby = $(":checkbox");
    hobby.each((index,item)=>{
        console.log($(item).attr('checked'))
        console.log($(item).prop('checked'))
    })

    // 删除属性
    console.log($('#swimming').prop('checked'))
    $('#swimming').removeAttr('checked')
    console.log($('#swimming').prop('checked'))
</script>

操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

在这里插入图片描述

增加元素的具体样式，格式：

//多个样式设置
1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})

例：css({"background-color":"red","color":"#fff"});
//单个样式设置
2）css(“样式名”,”样式值”)

例：css('color','white')

//设置内容居中
$('#myform').css("text-align","center")

操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是html。

在这里插入图片描述

<body>
    <div id="box">
        <span>点击连接：</span><a href="../js/object.json">json文件</a>
        <button value="按钮" type="submit">button</button>
    </div>
    <script src="../js/JQuery.js"></script>
    <script>
        // 获取元素
        var $box = $("#box");
        var span = $box.children('span');
        var a = $box.children('a')
        var btn = $box.children('button')
        // 打印html内容和text内容
        console.log($box.html())
        console.log($box.text())
        // 打印val内容
        console.log(btn.val())
        
        // 设置html内容
        $box.html('<h1>点击</h1>')

        // 设置text内容
        $box.text('点击跳转')
        $box.text('<h1>点击</h1>')

        // 设置val内容
        btn.val('提交')
        console.log(btn.val())
    </script>
</body>

创建和添加元素

创建元素

在jQuery中创建元素很简单，直接使用$()函数即可。

$(‘元素内容’);

$('<p>这是一个段落</p>');

添加元素

方法	说明
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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建和添加元素</title>
    <style>
        #box{
            background-color: seagreen;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="box">这是一个diva</div>
    <script src="../js/JQuery.js"></script>
    <script>
        var $body = $('body')
        var $box = $('#box')
        // 生成的元素只能被一个结点添加，不能重复添加
        var p = $('<p>这是一个段落</p>')
        var h1 = $('<h1>H1</h1>')
        // append方法：在body元素内部尾部加入一个h1元素
        $body.append(h1)
        // prepend方法:在box元素内部开头加入一个p元素
        $box.prepend(p)
        // $().prependTo(''):在body内部开头加入一个div元素
        $('<div style="background-color:red"> $().prependTo("body")</div>').prependTo('body')


        // before()方法，新增元素位置在指定元素的前面，而非内部
        var a = $('')
        $box.before('<a href="../js/object.json">这是一个a标签</a>')
        // after()方法
        $box.after('<h2>h2</h2>')
    </script>
</body>
</html>

删除和遍历元素

删除元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除元素</title>
    <style>
        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">java</span>
    <span class="green">ajax</span>
    <span class="blue">servlet</span>

    <script src="../js/JQuery.js"></script>
    <script>
        // 删除所有元素
        // $("span").remove();
        // 删除样式为blue的span
        // $("span.blue").remove();
        // 清空元素内容
        // $("span").empty();
        // 清空样式为green的元素内容
        // $(".green").empty();
    </script>
</body>

</html>

遍历元素

each()

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

参数 function 为遍历时的回调函数，index 为遍历元素的序列号，从 0 开始。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        遍历元素
    </title>
    <style>
        span {
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }

        .green {
            background-color: green;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>

<body>
    <h3>each()：遍历元素</h3>
    <span class="green">jquery<a>删除</a></span>
    <span class="blue">java</span>
    <span class="green">ajax</span>
    <span class="blue">servlet</span>


    <script src="../js/JQuery.js"></script>
    <script>
        $('span').each(function (index, e) {
            console.log(index + " ---> " + $(e).text());
        })
    </script>
</body>

</html>

JQuery事件

bind()绑定事件

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

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

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

这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格式：{名:值,名2:值2}

handler(eventObject)：该事件触发执行的函数

简单的bind()事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>

    <script src="../js/JQuery.js"></script>
    <script>
        // $('button').bind('click',function(){
        //     console.log($(this).text())
        //     alert('触发了点击事件')
        // })
        $('button').click(function () {
            console.log($(this).text())
            alert("被点击了！")
        })

    </script>
</body>

</html>

ready加载事件

ready()类似于 onLoad()事件

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

$(document).ready(function(){})等价于$(function(){})

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ready事件</title>
    <style>
        p{
            border: 3px solid slateblue;
            width: fit-content;
        }
    </style>
</head>

<body>

    <h1></h1>
    <input id="btntest" type="button" value="砍一刀" />
    <p>aaa</p>
    <p>bbbb</p>
    <p>ccc</p>
    <p>dddd</p>
</body>
<script src="../js/JQuery.js"></script>
<script>
    // 文档载入完便触发ready方法
    $(document).ready(function () {
        $("h1").text("ready go...");
    })
    // $(document).ready(function(){}) == $(function(){}) 
    $(function () {
        $("p").click(function () {
            // 隐藏
            $(this).hide();
        });
    });
    $(function () {
        $("#btntest").bind("click", function () {
            $("h1").text("马上就成功了，再砍一刀");
        });
    });
</script>

</html>

json格式文件

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

结构

对象和数组

注意点：

对象的每个属性都要有双引号，否则json数据不能正常加载

{"name":"lily","age":18}

多对象范例（数组+对象）
- 数组中可以嵌套数组也可以嵌套对象

{
    "users":[
        {
            "uname":"Mary",
            "age":18,
            "gender":"女"
        },
        {
            "uname":"Lily",
            "age":20,
            "gender":"女"
        },
        {
            "uname":"Mike",
            "age":22,
            "gender":"男"
        },
        {
            "uname":"Joy",
            "age":22,
            "gender":"男"
        }
    ]
}

JQuery Ajax

$.ajax

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

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

data：发送到服务器的数据（是一个json对象）

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);
 }
});

$.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);
});

$.post

$. p os t 方法和$ .get方法相同

$.getJSON

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

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

cracker_03

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery和Ajax学习

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器。对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。// before()方法，新增元素位置在指定元素的前面，而非内部。"=========同辈选择器,其后，（弟弟）=====""=========后代选择器-选择所有后代=====""=========子代选择器-选择儿子辈====="
复制链接

扫一扫