jQuery基础学习

最新推荐文章于 2024-04-25 07:00:00 发布

小廖同学

最新推荐文章于 2024-04-25 07:00:00 发布

阅读量159

点赞数

分类专栏： HTML 文章标签： jQuery基础学习 javaScript对象

本文链接：https://blog.csdn.net/weixin_45439324/article/details/100585167

版权

HTML 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

jQuery基础学习

1.jQuery的定义：

jQuery是对javaScipt的封装，他是免费，开源的javaScript函数库，jQuery极大的简化了JavaScript编程；

2.jQuery的作用：

jQuery和JavaScript作用一样，都是负责网络行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更好；

3.jQuery的优点：

jQuery兼容了现在主流的浏览器，增加了程序员的开发效率；

jQuery简化了JavaScript编程，代码编写更加简单；

4.jQuery的引用：

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

jQuery的入口函数：

我们知道使用js获取标签元素，需要页面加载完成以后在获取，我们通过使用onload事件来获取标签元素，而jQuery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的window.onload更快。

jQuery入口函数的两种写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入jQuery文件 -->
    <script src="./jquery-1.12.4.min.js"></script>
    <!-- 2.入口函数 -->
    <script>
        // // 原生写法的js
        // window.onload = function(){
        //     var oDiv = document.getElementById("mydiv");
        //     alert(oDiv);
        // }
        // jQuery获取标签的方式(完整写法)
        // $(document).ready(function(){
        //     // jQuery获取标签的方式和css中是一样的
        //     var $mydiv = $("#mydiv");
        //     alert($mydiv);
        // })
        // jQuery获取标签的方式(简化写法)
        $(function(){
            // jQuery获取标签的方式和css中是一样的
            var $mydiv = $("#mydiv");
            alert($mydiv);
        })
    </script>
</head>
<body>
    <div id = "mydiv">小廖同学</div>
</body>
</html>

5.jQuery选择器：

1.标签选择器：根据标签名来选择标签

2.类选择器：根据类名选择标签

3.id选择器：根据id选择标签

4.层级选择器：根据层级关系选择标签

5.属性选择器：根据属性名来选择标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- css标签选择器,既可以选择标签，还可以添加样式 -->
    <!-- <style>
        p{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style> -->
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        // 1.标签选择器,根据标签名来选择标签
        // $(function(){
        //     var $myp = $("p");
        //     // 验证是否选择标签
        //     alert($myp.length);

        // })
        // 2.类选择器，根据类名来选择标签
        // $(function(){
        //     var $mydiv = $(".mydiv");
        //     // 验证是否选择标签
        //     alert($mydiv.length);

        // })
        // 3.id选择器，根据id选择标签
        // $(function(){
        //     var $myid = $("#myid");
        //     // 验证是否选择标签
        //     alert($myid.length);
        // })
        //  4.层级选择器，根据层级关系来选择标签
        // $(function(){
        //     var $myc = $("div div p");
        //     // 验证是否选择标签
        //     alert($myc.length);
        // })
        // 5.属性选择器，根据属性名来选择标签
        $(function(){
            var $mylei = $("input[type=text]");
            // 验证是否选择标签
            alert($mylei.length);
        })
    </script>
</head>
<body>
    <p>小廖同学</p>
    <p>小廖同学</p>
    <div class="mydiv">小廖同学</div>
    <div id="myid">小廖同学</div>
    <div>
        <div>
            <p>小廖同学</p>
            <p>小廖同学</p>
        </div>
    </div>
    <input type="button" value="按钮">
    <input type="text" value="">
</body>
</html>

6.选择集过滤：

选择集过滤：选择标签的集合中过滤自己需要的标签；

方法：

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

2.eq(索引)方法，表示选取指定索引的标签；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取到标签
            var $mybtn = $("div");
            // 进行样式修改
            $mybtn.css({"height":"100px", background:"green"});
            // has方法
            $mybtn.has("#btn").css({background:"yellow"});
            // eq方法(从获取到的标签中选择)
            $mybtn.eq(1).css({background:"red"})
        })
    </script>
</head>
<body>
    <div>
        <input type="button" value="小廖同学" id = "btn">
    </div>
    <div>
        <input type="button" value="xlz" class = "btn">
    </div>
</body>
</html>

8.选择集转移：

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

选择集转移操作：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签对象
            var $mydiv = $("#div");
            // prev(); 表示选择id是box元素的上一个的同级元素
            // $mydiv.prev().css({color:"red"});
            // $('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
            // $mydiv.prevAll().css({color:"green"});
            //  $('#box').next(); 表示选择id是box元素的下一个的同级元素
            // $mydiv.next().css({color:"red"});
            //  $('#box').nextall(); 表示选择id是box元素的下面所有的同级元素
            // $mydiv.nextAll().css({color:"green"});
            // $('#box').parent(); 表示选择id是box元素的父元素
            // $mydiv.parent().css({color:"red"});
            // $('#box').children(); 表示选择id是box元素的所有子元素
            // $mydiv.children().css({color:"red"});
            // $('#box').siblings(); 表示选择id是box元素的其它同级元素
            // 不包括它自己
            // $mydiv.siblings().css({color:"red"});
            // $('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
            $mydiv.find('#btn').css({color:"red"});
        })
    </script>
</head>
<body>
    <h2>这是第一个h2标签</h2>
    <p>这是一个段落</p>
    <div id ="div">
        这是一个容器
        <span class="span">小廖同学</span>
        <h2 id = "btn">这是第二个h2标签</h2>
        <p>这是第二个段落标签</p>
    </div> 
    <p>小廖同学1</p>
    <p>小廖同学2</p>     
</body>
</html>

9.获取和设置元素内容：

html方法可以获取和设置元素内容；

append方法可以追加元素内容；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签
            var $myp = $("p");
            alert($myp);
            // 获取标签中的内容
            var $result = $myp.html();
            alert($result);
            // 修改标签中的内容
            $myp.html("小廖子");
            // 追加新的内容：
            $myp.append("是个优秀的程序员")
        })
    </script>
</head>
<body>
    <p>小廖同学</p>
</body>
</html>

10.获取和修改元素属性：

获取和修改标签样式：使用css方法；

获取和设置标签属性：使用prop方法；

获取和设置元素的value属性：使用val方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 标签样式 -->
    <style>
        p{
            width: 100px;
            height: 100px;
            background: red;
            font-size: 20px;
        }
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签对象
            var $myp = $("p");
            // 获取标签样式
            var $mypx = $myp.css("font-size");
            alert($mypx);
            // 设置标签样式
            $myp.css({"font-size":"30px"});
            // 获取标签对象
            var $mybtn = $("input");
            // 获取标签属性
            var $mytype = $mybtn.prop("type");
            alert($mytype);
            // 设置标签属性
            // $mybtn.prop({"value":"name"});
            $mybtn.val("小廖同学");
        })
    </script>
</head>
<body>
    <p>小廖同学</p> 
    <!-- 标签属性 -->
    <input type="button" value="按钮" id = "mybtn">
</body>
</html>

11.jQuery事件：

常用的jQuer事件：

click()：鼠标单击；

blur()：元素失去焦点；

focus()：元素获取焦点；

mouseover()：鼠标进入；

mouseout()：鼠标离开；

ready()：DOM加载完成；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        // ready()：DOM加载完成;
        // $(document).ready(function(){

        // })
        // 简化写法
        $(function(){
            // 获取标签对象
            var $mytext = $("#text1");
            var $mybtn = $("#btn");
            // click()：鼠标单击
            // $mybtn.click(function(){
            //     alert("小廖同学");
            // });
            // focus()：元素获取焦点；
            $mytext.focus(function(){
                // 原生ji写法
                // this.style.background="red";
                // jQuery写法
                $(this).css({"background":"red"});
            });
            // blur()：元素失去焦点；
            $mytext.blur(function(){
                $(this).css({"background":"white"})
            });
            // mouseover()：鼠标进入；
            var $mydiv = $("div #text2");
            $mydiv.mousemove(function(){
                $(this).css({"background":"red"});
            }); 
            // mouseout()：鼠标离开；
            $mydiv.mouseout(function(){
                $(this).css({"background":"white"});
            });
        })
    </script>
</head>
<body>
    <input type="text" id="text1">
    <input type="button" value="按钮" id="btn">
    <div>
        <input type="text" id="text2">
        <input type="button" value="按钮" id="btn">
    </div>    
</body>
</html>

事件代理：事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向它的父级一级一级传递），把事件加在父级上通过判断事件来源，执行相应的子元素的操作；

事件代理的好处：事件代理首先可以极大减少事件绑定次数，提高性能，其次可以让新加入的子元素也可以拥有相同的操作；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签对象
            var $mydiv1 = $("#div1");
            var $mydiv2 = $("#div2");
            // 绑定对象
            $mydiv1.click(function(){
                alert("div1 父标签");
            });
            $mydiv2.click(function(){
                alert("div2 子标签");
            });
        })
    </script>
</head>
<body>
    <div id="div1" style="width: 1oopx;height: 100px; background: red;">
        小廖同学
        <div id="div2" style="background: green">
            小廖同学
        </div>
    </div>    
</body>
</html>

事件代理的使用：

delegate方法参数说明:

delegate(childSelector,event,function)

childSelector: 子元素的选择器
event: 事件名称，比如: ‘click’
function: 当事件触发执行的函数

事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能；

使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理；

事件代理使用是使用delegate方法来完成；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 没有事件代理的写法
            // 获取所有的li标签对象
            // var $mylist = $("ul li");
            // alert($mylist.length);
            // 绑定5次事件
            // $mylist.click(function(){
            //     $(this).css({"background":"red"});
            // });
            // 事件代理的使用
            // 获取父标签对象
            var $mylist = $("#ul");
            alert($mylist.length);
            $mylist.delegate("#li","click",function(){
                // this指的是触发事件的子标签
                $(this).css({"background":"red"});
            });
        })
    </script>
</head>
<body>
    <ul id="ul">
        <li id="li">小廖同学1</li>
        <li id="li">小廖同学2</li>
        <li id="li">小廖同学3</li>
        <li>小廖同学4</li>
        <li>小廖同学5</li>
    </ul>   
</body>
</html>

12.JavaScript对象：

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 通过顶级Object类型来实例化一个对象
        var oPersion = new Object();
        // 添加属性
        oPersion.age = 20;
        oPersion.name = "小廖同学";
        // 添加方法
        oPersion.show = function(){
            alert("小廖同学是一个优秀的程序员");
        };
        // 调用方法和属性
        alert(oPersion.name + oPersion.age);
        oPersion.show();
        // 通过对象字面量创建一个对象
        var oStudent = {
            name:"小廖同学",
            age:20,
            show:function(){
                alert("小廖同学是一个优秀的程序员");
            }
        }
        //调用方法和属性
        alert(oStudent.name + oStudent.age);
        oStudent.show();
    </script>
</head>
<body>
</body>
</html>

13.josn（重点）:

json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种轻量级的数据交换格式，采用完全独立于编程，易于人阅读和编写，同于也易于机器解析和生成，并有效地提升网络传输效率，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

json有两种格式：

对象格式
数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，key
和value必须用双引号引起来，用单引号或者不用引号会导致数据错误，多个键值对使用逗号分隔。

数组格式：

数组格式的JSON数据，使用一对中括号（[]）,中括号里面的数据用逗号隔开；

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 对象格式的json数据
        var sJson1 = '{"name":"小廖子", "age":20}'
        // 数组格式的json数据
        var sJson2 = '[{"name":"小廖子", "age":20},{"name":"小廖同学","age":20}]'
        // 浏览器获取对象格式的json数据转换成JavaScript对象
        var oPersion = JSON.parse(sJson1);
        console.log(oPersion);
        // 浏览器获取数组格式的json数据转换为数组
        var aArray = JSON.parse(sJson2);
        console.log(aArray);
        // 服务器获取对象格式的json数据转换为字典，数组格式的json数据转换为列表
    </script>
</head>
<body>
</body>
</html>

14.ajax（重点）：

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

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行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)

url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
type 请求方式，默认是"get"，常用的还有"post"
success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: “success”
- xhr 底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式

“xml”，“html”，“text”，“json”
error 表示请求失败后的回调函数

func 错误异常回调函数

7.async 设置是否异步，默认值是“true”，表示异步，一般不用写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>天气查询</h1>
    <h3>请输入要查询的城市</h3>
    <input type="text" id="input-text">
    <input type="button" value="查询" onclick="searchWeather()">
    <h3>查询结果：</h3>
    <ul>
        <li>城市：<span id="city"></span></li>
        <li>天气：<span id="weather"></span></li>
    </ul>   
        <!-- 
        接口参考网址：'http://doc.tianqiapi.com/603579'
        查询天气网址: 'https://www.tianqiapi.com/api/'  
    -->
    <!-- ajax -->
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        function searchWeather(){
            var city = $("#input-text").val();
            // alert(city)
            $.ajax({
                // url 请求地址
                url:'https://www.tianqiapi.com/api/',
                // type 请求方式，默认是"get"，常用的还有"post"
                type:"get",
                // dataType 设置返回的数据格式
                dataType:"json",
                // data 设置发送给服务器的数据，没有参数不需要设置
                data:"version=v1&appid=[24253253]&appsecret=[1vb4nCMk]&city="+ city,
                // success 设置请求成功后的回调函数
                // resp服务器返回的数据
                success:function(resp){
                    $("#city").text(resp.city);
                    $("#weather").text(resp.data[0].wea);
                },
                // error 表示请求失败后的回调函数
                error:function(){
                    alert("网络异常")
                },
                // async 设置是否异步，默认值是“true”，表示异步，一般不用写 
                async:true
            });
        };
    </script>
</body>
</html>

实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 实现页面元素布局 -->
    <h3>天气查询</h3>
    <input type="text" name="city" id="city-in">
    <input type="button" onclick="searchWeather()" value="查询">
    <hr>
    <h3>查询结果</h3>
    <ul>
        <li>所在城市: <span id="city"></span> </li>
        <li>城市天气: <span id="wea"></span></li>
        <li>城市温度: <span id="tem"></span></li>
        <li>空气级别: <span id="airlev"></span></li>
        <li>风力级别: <span id="wins"></span></li>
        <li>出行提示: <span id="tips"></span></li>
    </ul>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        // 接收数据,为页面更新内容
        function setPageData(city,wea,tem,airlev,wins,tips){
            $('#city').text(city);
            $('#wea').text(wea);
            $('#tem').text(tem);
            $('#airlev').text(airlev);
            $('#wins').text(wins);
            $('#tips').text(tips);
        };
        // 按钮的响应函数,用来发送ajax请求,获取天气信息
        function searchWeather(){
            var city = $("#city-in").val();
            $.ajax({
                // url 请求地址
                url:'https://www.tianqiapi.com/api/',
                // type 请求方式，默认是"get"，常用的还有"post"
                type:"get",
                // dataType 设置返回的数据格式
                dataType:"json",
                // data 设置发送给服务器的数据，没有参数不需要设置
                data:"version=v1&appid=[24253253]&appsecret=[1vb4nCMk]&city="+ city,
                success:function(response){
                    // 通过返回的解析后的json数据,提取页面需要的数据
                    var city = response.city;
                    var wea = response.data[0].wea;
                    var tem = response.data[0].tem2 + ' ~ ' + response.data[0].tem1;
                    var airlev = response.data[0].air_level;
                    var wins = response.data[0].win_speed;
                    var tips = response.data[0].air_tips; 
                    // 调用函数为页面添加数据
                    setPageData(city, wea, tem, airlev, wins, tips)
                },
                error:function(){
                    alert("网络异常")
                    // 如果请求失败,页面显示无信息
                    setPageData('无', '无', '无', '无', '无', '无');},
                async:true
            });
        };
    </script>
</body>
</html>