jquery内容文本值+遍历对象each方法+ajax初识

335 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情

jquery内容文本值

主要针对元素的内容还有表单的值操作

1.普通元素内容html()

html()//获取元素的内容

html("")//设置元素的内容

2.普通元素文本内容text()

text()//获取元素文本内容

text("")//设置元素文本内容

3.表单的值val()

代码展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.6.0.js"></script>
    <title>Document</title>
</head>
<body>
    <div>
    <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        //1.获取设置元素的内容
        console.log($("div").html());
        //2.获取设置元素文本内容
        console.log($("div").text());
        $("div").text("123");
        //3.获取设置表单值
        console.log($("input").val());
        $("input").val("123")
    </script>
</body>
</html>

jquery遍历对象each方法

遍历元素

jquery隐式迭代时对同一类元素做了相同的操作。如果想要给同一类元素左不同的操作,就需要用到遍历

一.语法

$("div").each(function(index,domEle) {xxx;})

  1. each()方法遍历匹配的每一个元素。主要用DOM处理。
  2. 里面的回调函数有两个参数:index是每一个元素的索引号;demEle是每个DOM元素对象,不是jquery对象
  3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象$(domEle)
接下来是代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.6.0.js"></script>
    <title>Document</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            var arr=["red","green","blue"]
            //1.each方法遍历元素
            $("div").each(function(index,domEle){
                //回调函数第一个参数一定是索引号,可以自己指定索引号名称
                console.log(index);
                //回调函数第二个参数一定是dom元素对象
                $(domEle).css("color","blue")
            })
        })
    </script>
</body>
</html>

Ajax

Ajax是实现局部刷新的一种技术

在局部刷新中,需要创建一个对象,代替浏览器发起请求的行为,这个对象存在内存中。代替浏览器发起请求并接受响应数据。这个对象就叫做异步请求对象。这个异步对象用于在后台与服务器交换数据。XMLHttpRequest就是我们所说的异步对象。我们通常使用javascript语法创建和使用XMLHttpRequest对象。

异步对象能够
  1. 在不重新加载页面的情况下更新网页
  2. 在页面已加载后向服务器请求数据
  3. 在页面已加载后从服务器接收数据
创建XMLHttpRequest对象的语法:

var xmlhttp=new XMLHttpRequest()