JQuery

triumph_421

已于 2023-12-12 20:20:12 修改

阅读量116

点赞数

文章标签： jquery 前端 javascript

于 2023-12-12 19:58:17 首次发布

本文链接：https://blog.csdn.net/triumph_421/article/details/134957539

版权

文章目录

1.主要内容
2.jQuery对象
3.jQuery中的选择器
4.jQuery Dom操作
5.Jquery事件
- 5.1 ready加载事件
- 5.2 bind()绑定事件
6.Ajax

1.主要内容

2.jQuery对象

2.1 Dom对象

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

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

2.2 Jquery包装集对象

在 jQuery 的世界中将所有的对象，无论是⼀个还是⼀组，都封装成⼀个 jQuery 包装集，比如获取包含⼀个元素的 jQuery 包装集：

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

2.3 Dom对象转 Jquery对象

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

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

2.4 Jquery对象转 Dom对象

获取包装集对象当中指定下标的元素，即可将jquery对象转换成dom对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom对象与Jquery包装集对象</title>

</head>
<body>

<div id="mydiv">文本</div>
<!--
    Dom对象
      通过js方式获取的元素对象(document)
    Jquery对象
      通过jquery方法获取的元素对象， 返回的是jquery包装集
-->
<!--引入jquery的核心js文件 (如果未引入jquery，则报错：$ is not defined)-->
<script src = "js/jquery-3.7.1.js" type = "text/javascript" charset="UTF-8"></script>
<script type = "text/javascript">
     //Dom对象
     var divDom = document.getElementById("mydiv");    //获取dom对象时id属性值不加"#"
     console.log(divDom);                     //输出dom对象是有颜色的，把标签全部打印了出来
     var divsDom = document.getElementsByTagName("div");    //多个
     console.log(divsDom);                    //输出的是dom数组对象

     //js获取不存在的元素
     var spanDom = document.getElementsByTagName("span");   //使用标签选择器获取
     console.log(spanDom);                                  //输出是空数组
     var spanDom2 = document.getElementById("myspan");      //使用id选择器获取
     console.log(spanDom2);                                 //null
     console.log("==================================");

     //jquery对象
     //通过id选择器获取元素对象 $("#id属性值")
     var divJquery = $("#mydiv");
     console.log(divJquery);
     //jquery获取不存在的元素
    var spanJquery = $("myspan");
    console.log(spanJquery);          //返回的还是一个集合（没有数据的集合）

    console.log("===========================");

    //Dom对象转Jquery对象
    //Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
    var divDomToJquery = $(divDom);
    console.log(divDomToJquery);

    //Jquery对象 转 Dom对象
    //获取包装集对象当中指定下标的元素，将jquery对象转换成dom对象。
    var divJqueryToDom = divJquery[0];
    console.log(divJqueryToDom);

</script>
</body>
</html>

3.jQuery中的选择器

和使用JS 操作Dom⼀样，获取文档中的节点对象是很频繁的⼀个操作，在jQuery中提供了简便的方式供我们查找和定位元素，称为jQuery选择器，选择器可以说是最考验⼀个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"⼀个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。

3.1 基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>

</head>
<body>
<!-- 基础选择器
       id选择器         #属性值           $('#属性值')        选择id为指定值的元素对象（如果有多个，选择的是第一个）
       类选择器         .class属性值      $('.class属性值')   选择class为指定值的元素对象(如果有多个，选择的就是多个)
       元素选择器       标签名/元素名      $('标签名/元素名')  选择所有指定标签的元素对象

       通配符选择器     *                 $('*')
       组合选择器       选择器1,选择器2,...  $('选择器1, 选择器2, ...')   选择指定选择器选中的元素对象
 -->
<div id="mydiv1" class="blue">元素选择器</div>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div class="blue">样式选择器</div>

<script src="js/jquery-3.7.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
    //id选择器
    var mydiv = $('#mydiv1');
    console.log(mydiv);

    //类选择器  .class属性值
    var clas = $('.blue');
    console.log(clas);

    //元素选择器
    var spans = $('span');
    console.log(spans);
    //通配符选择器 (实际中用的不多) (实际中用的不多)
    var all = $('*');
    console.log(all); //结果为11，(html、head、meta、title、body、div#mydiv1.blue、div#mydiv1、span、div.blue、script、script)


    //组合选择器
    var group = $('#mydiv1, div, .blue');
    console.log(group);    //jQuery.fn.init {0: div#mydiv1.blue, 1: div#mydiv1, 2: div.blue, length: 3, prevObject: j…y.fn.init}
</script>
</body>


</html>

3.2 层次选择器

后代选择器

  格式： 父元素   指定元素  （空格隔开）
   示例： $("父元素   指定元素")
   选择父元素的所有指定元素（包含第一代、第二代等）

子代选择器

  格式： 父元素   >   指定元素  (大于号隔开)
   示例： $("父元素   >  指定元素")
   选择父元素的所有第一代指定元素

相邻选择器

  格式： 元素 +  指定元素 (加号隔开)
   示例： $("元素  +  指定元素")
   选择元素的下一个指定元素 (只会查找下一个元素， 如果元素不存在， 则获取不到)

同辈选择器

  格式： 元素 ~ 指定元素 （波浪号隔开）
  示例： $("元素  ~  指定元素")
  选择元素的下面的所有同辈指定元素，只会往下找，不会往上找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script src="js/jquery-3.7.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"
             3.3. 表单选择器
             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 type="text/javascript">
    //后代选择器     格式：$("#parent div")
    var hd = $("#parent div")         //id为parent的div有四个div后代(包含第一代、第二代....)
    console.log(hd);                 //jQuery.fn.init {0: div#child.testColor, 1: div.gray, 2: div, 3: div, length: 4, prevObject: j…y.fn.init}

    //子代选择器
    var zd = $("#parent > div");     //id为parent的div有两个子代(直接div子元素,只包含第一代)
    console.log(zd);            //jQuery.fn.init {0: div#child.testColor, 1: div, length: 2, prevObject: j…y.fn.init}

    //相邻选择器
    var xl = $("#child + div");      //选择id为child的div元素的下一个div（下一个同辈元素，如果下一个同辈元素不是指定的div，则什么也获取不到）
    console.log(xl);                //jQuery.fn.init {0: div, length: 1, prevObject: j…y.fn.init}

    //同辈选择器
    var imgs = $(".gray ~ img");     //class属性值为gray的div容器有两个相邻的img标签 (只会往后找，不会往前面找)
    console.log(imgs);               //jQuery.fn.init {0: img, 1: img, length: 2, prevObject: j…y.fn.init}

</script>

</body>
</html>

运行结果：

3.3 表单选择器

//引入一个表单做验证
<form id='myform' name="myform" method="post">
    <input type="hidden" name="uno" value="9999" disabled="disabled"/>
    姓名:<input type="text" id="uname" name="uname" />

    密码:<input type="password" id="upwd" name="upwd" value="123456" />

    年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
    <input type="radio" name="uage" value="1"/>你懂得 

    爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
    <input type="checkbox" name="ufav" value="爬床"/>爬床
    <input type="checkbox" name="ufav" value="代码"/>代码

    来⾃:<select id="ufrom" name="ufrom">
    <option value="-1" selected="selected">请选择</option>
    <option value="0">北京</option>
    <option value="1">上海</option>
       </select>

    简介:<textarea rows="10" cols="30" name="uintro"></textarea>

    头像:<input type="file" />

    <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>

表单选择器

 //表单选择器   :input
       var inputs = $(":input");
        console.log(inputs);

总共输出了14个，包括了所有的input、select、textarea、button
对比一下和"元素选择器"的区别

var inputs2 = $("input");
console.log(inputs2);

从运行结果可以看出，元素选择器只会找出所有的input

4.jQuery Dom操作

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

常用的从几个方面来操作：

创建节点对象；
访问和设置节点对象的值，以及属性；
添加节点；
删除节点；
查找元素（选择器已经实现）；
添加、修改、设定节点的CSS样式等。

4.1 操作元素的属性

元素属性分类：

固有属性：元素本身就有的属性 (id、name、class、style)
返回值为boolean的属性： checked、selected、disabled
自定义属性：用户自己定义的属性

4.1.1 获取属性

attr(“属性名”)
prop(“属性名”)

区别：

如果是固有属性， attr()和prop()方法均可获取
如果是自定义属性， atrr()可获取，prop()不可获取

如果是返回值为boolean类型的属性, 则：

     若设置了属性， attr()返回具体的值, prop()返回true;
     若未设置属性， attr()返回undefined, prop()返回false;

以下面的元素属性为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的属性</title>
</head>
<body>

    <input type="checkbox" name = "ch" checked="checked" id="aa" abc="abc"/> aa
    <input type="checkbox" name = "ch"  id="bb"/> bb
</body>
</html>

获取固有属性：

var name = $("#aa").attr("name");
console.log(name);
var name2 = $("#aa").prop("name");
console.log(name2);

可见，attr()方法和prop()方法均可获取
获取返回值是boolean的属性
元素设置了属性值

var ck1 = $("#aa").attr("checked");     //attr方法返回的是所设置的属性值：checked
console.log(ck1);
var ck2 = $("#aa").prop("checked");    //prop返回的是：true 
console.log(ck2);

元素未设置属性值

var ck3 = $("#bb").attr("checked");     //attr方法返回的是undefined
console.log(ck3);
var ck4 = $("#bb").prop("checked");    //prop返回的是：false
console.log(ck4);

自定义属性

var abc1 = $("#aa").attr("abc");  //abc
console.log(abc1);
var abc2 = $("#aa").prop("abc");  //undefined
console.log(abc2);

4.1.2 设置属性

固有属性

//value本就是<input>的固有属性
$("#aa").attr("value", "1");
$("#bb").prop("value", "2");

设置结果如下：

可见，固有属性两种方法都是可以设置
返回值是boolean的属性

$("#bb").attr("checked", "checked");

可见，bb已被选中。
要想使bb不被选中，需要使用prop()方法把checked设置为false

$("#bb").attr("checked", false);

自定义属性

$("#aa").attr("uname", "admin");
$("#aa").prop("uage", "18");        //prop()操作不了自定义属性

由于prop()方法操作不了自定义属性，所以uage属性不会被设置。

4.1.3 移除属性

 $("#aa").removeAttr("checked");

结果显示，aa就被移除“选中”了，而且Elements中的checked属性也没有了。
总结：如果属性的类型是boolean（checked、selected、disabled），则使用prop()方法; 否则使用attr()方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的属性</title>
    <!--
    操作元素的属性
        属性的分类：
          固有属性： 元素本身就有的属性 (id、name、class、style)
          返回值为boolean的属性： checked、selected、disabled
          自定义属性： 用户自己定义的属性


      1. 获取属性
         attr("属性名")
         prop("属性名")
         区别：
             1.如果是固有属性， attr()和prop()方法均可获取
             2.如果是自定义属性， atrr()可获取，prop()不可获取
             3.如果是返回值为boolean类型的属性
                 若设置了属性， attr()返回具体的值, prop()返回true;
                 若未设置属性， attr()返回undefined, prop()返回false;
      2. 设置属性
         attr("属性名", "属性值")
         prop("属性名", "属性值")

         prop操作不了自定义属性
      3. 移除属性
         removeAttr("属性名")

      总结：
        如果属性的类型是boolean（checked、selected、disabled）, 则使用prop()方法;  否则使用attr()方法。
   -->
</head>
<body>


    <!--type为多选框， checked表示有没有被选中 -->
    <input type="checkbox" name = "ch" checked="checked" id="aa" abc="abc"/> aa
    <input type="checkbox" name = "ch"  id="bb"/> bb
</body>


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

      /*获取属性*/
      //固有属性 : attr()和prop()方法均可获取
      var name = $("#aa").attr("name");
      console.log(name);                 //ch
      var name2 = $("#aa").prop("name");
      console.log(name2);                //ch

      //返回值是boolean的属性 (元素设置了属性)
      var ck1 = $("#aa").attr("checked");     //attr方法返回的是所设置的属性值：checked
      console.log(ck1);
      var ck2 = $("#aa").prop("checked");    //prop返回的是：true (由于checked属性被设置过)
      console.log(ck2);                    //checked

      //返回值是boolean的属性 (元素未设置属性)
      var ck3 = $("#bb").attr("checked");     //attr方法返回的是undefined
      console.log(ck3);
      var ck4 = $("#bb").prop("checked");    //prop返回的是：false
      console.log(ck4);


      //自定义属性  :  atrr()可获取，prop()不可获取
      var abc1 = $("#aa").attr("abc");  //abc
      console.log(abc1);
      var abc2 = $("#aa").prop("abc");  //undefined
      console.log(abc2);


      /*设置属性*/
      //设置固有属性
      $("#aa").attr("value", "1");
      $("#bb").prop("value", "2");

      //设置返回值是boolean的属性
      $("#bb").attr("checked", "checked");  //如果使用attr()方法设置id为bb的input元素为“不选中”，则需要把这一属性移除。
      $("#bb").prop("checked", false);     //prop()方法设置是否选中只需设置"true"or"false"即可

      //自定义属性
      $("#aa").attr("uname", "admin");
      $("#aa").prop("uage", "18");      //prop()方法操作不了自定义属性。


      /*removeAttr*/
      $("#aa").removeAttr("checked");
  </script>
</html>

4.2 操作元素的样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 操作元素的样式</title>
    <style type="text/css">
        div{
            padding: 8px;
            width:180px;
        }
        .blue{
            background:blue;
        }
        .larger{
            font-size:30px;
        }
        .green{
            background:green;
        }
        .pink{
            background:pink;
        }

    </style>
</head>
<body>

<!--
   操作元素的样式
      attr("class")               获取元素的样式名
      attr("class", "样式名")     设置元素的样式
      addClass("样式名")          添加样式
      css()                       添加具体的样式
      removeClass("样式名")        移除样式

-->
  
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed" class="red">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
  
</body>
</html>

获取元素的样式名

//attr("class")       获取元素的样式名
var cla = $("#conBlue").attr("class");
console.log(cla);

设置元素的样式

//attr("class", "样式名")   设置元素的样式
$("#conBlue").attr("class", "green");

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

//addClass("样式名")      添加样式
$("#conBlue").addClass("larger");
$("#conBlue").addClass("pink");

在原来的样式基础上添加样式，原来的样式会保留，如果出现相同样式，则以样式中后定义的为准。
css() ：添加具体的样式

// css()                       添加具体的样式（添加具体的样式）
$("conBlue").css("font-size", "40px");   //设置单个样式
$("conBlue").css({"font-family":"微软雅黑", "color":"green"});  //设置多个样式

移除样式

//removeClass("样式名")   移除样式
$("#remove").removeClass("larger");

4.3 操作元素的内容

html() : 获取元素的内容，包含html标签（非表单元素）
html(“内容”) ：设置元素的内容，包含html标签 (非表单元素)
text() : 获取元素的纯文本内容，不识别HTML标签（非表单元素）
text(“内容”) ：设置元素的纯文本内容，不识别HTML标签（非表单元素）
val() : 获取元素的值（表单元素）
val(“值”) : 设置元素的值（表单元素）

总结：html()、text()是针对于非表单元素使用的， val()是针对于表单元素使用的。

表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素：
div、span、p、h1~h6、table、tr、td、ol、li等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素的内容</title>

</head>

<body>
    <h3><span>html()和text()⽅法设置元素内容</span></h3>
    <div id="html"></div>
    <div id="html2"></div>
    <div id="text"></div>
    <div id="text2"></div>
    <input type="text" name="uname" id="op" value="oop" />

</body>

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

<script type="text/javascript">
      //html("内容") : 设置元素的内容，包含html标签 (非表单元素)
      $("#html").html("<h2>大冰</h2>");
      $("#html2").html("上海");
      //html():  获取元素的内容，包含html标签（非表单元素）
      var html = $("html").html();
      var html2 = $("html2").html();
      console.log(html);           //<h2>大冰</h2>
      console.log(html2);         //上海

     // text("内容")  设置元素的纯文本内容，不识别HTML标签（非表单元素）
      $("text").text("北京");              //北京
      $("text2").text("<h2>北京</h2>");     //<h2>北京</h2>

      //text():   获取元素的纯文本内容，不识别HTML标签（非表单元素）
      var txt = $("#text").text();
      var txt2 = $("#text2").text();
      console.log(txt);           //北京
      console.log(txt2);          //<h2>北京</h2>

      //val()         获取元素的值（表单元素）
      var val = $("#op").val();
      console.log(val);
      //val("值")      设置元素的值（表单元素）
      $("#op").val("凯旋");
</script>

</html>

4.4 创建和添加元素

直接使用核心函数即可在jQuery中创建元素

创建元素
$(“内容”)
添加元素
1.前追加子元素
指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串，html元素或jQuery对象。
$(内容).prependTo(指定元素) 把内容追加到指定元素内部的最前面，内容可以是字符串，html元素或jQuery对象。
2.后追加子元素
指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串，html元素或jQuery对象。
$(内容).appendTo(指定元素) 把内容追加到指定元素内部的最后面，内容可以是字符串，html元素或jQuery对象。
** 3.前追加同级元素**
before() 在指定元素的前面追加内容。
**4.后追加同级元素 **
** **after() 在指定元素的后面追加内容。
注：在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定的位置；如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建元素和添加元素</title>
    <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;
        }
        .pink{
            background-color: pink;
        }
        .gray{
            background-color: gray;
        }
    </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>
<!--
      创建元素和添加元素
         创建元素
             $("内容")
         添加元素
             1.前追加子元素
               指定元素.prepend(内容)        在指定元素内部的最前面追加内容，内容可以是字符串，html元素或jQuery对象。
               $(内容).prependTo(指定元素)   把内容追加到指定元素内部的最前面，内容可以是字符串，html元素或jQuery对象。

             2.后追加子元素
               指定元素.append(内容)         在指定元素内部的最后面追加内容，内容可以是字符串，html元素或jQuery对象。
               $(内容).appendTo(指定元素)    把内容追加到指定元素内部的最后面，内容可以是字符串，html元素或jQuery对象。

             3.前追加同级元素
               before()              在指定元素的前面追加内容。
             4.后追加同级元素
               after()               在指定元素的后面追加内容。

              注：
                在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定的位置；
                如果元素本身存在（已有元素），会将原来元素直接剪切并设置到指定位置。

-->

<script src="js/jquery-3.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
     //创建元素
    var p = "<p>这是一个p标签</p>"
    console.log(p);
    console.log($(p));

    /*添加元素*/
    //1.前追加子元素
    //创建元素
    var span = "<span>小奶狗</span>";
    //得到指定元素，并在元素的内部最前面追加内容
     $(".green").prepend(span);
   // console.log(span);
     var span2 = "<span>小狼狗</span>"
    $(span2).prependTo($(".green"));

     //2.后追加子元素
    var span3 = "<span>小奶狗1</span>";
    var span4 = "<span>小奶狗2</span>";     //此时的span4只是个字符串
    $(".green").append(span3);
    $(span4).appendTo($(".green"));

    //将已存在的元素追加到指定元素中
    $(".green").append($(".red"));

    /*同级追加*/
    var sp1 = "<span class='pink'>凯旋</span>";
    var sp2 = "<span class='gray'>大冰</span>";
    $(".blue").before(sp1);
    $(".blue").after(sp2);

</script>
</html>

4.5 删除元素

<!DOCTYPE html>
<html lang="en">
<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>
</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>


<!--
   删除元素
      remove()
           删除元素及其对应的子元素，标签和内容一起删除
           指定元素.remove();
      empty()
           清空元素内容，保留标签
           指定元素.empty();

    -->

</body>
  <script src="js/jquery-3.7.1.js" type="text/javascript"></script>
  <script type="text/javascript">
      //删除元素
      $(".green").remove();     //remove在实际中使用的更多
      $(".blue").empty();
  </script>


</html>

4.6 遍历元素

使用each()函数实现

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

参数 function 为遍历时的回调函数，
index为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。

<!DOCTYPE html>
  <html lang="en">
  <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>
  </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>

  <!--
  each()
$(selector).each(function(index,element)) :遍历元素
                 参数 function 为遍历时的回调函数，
index为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
-->

  <script src="js/jquery-3.7.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  //获取指定元素并遍历
  $(".green").each(function(index, element){
    console.log(index);
    console.log(element);
    console.log(this);
    console.log($(this));
  });
//如果用不到参数的话，就不用写funciton的参数了，也能通过this完成遍历
//    $(".green").each(function(){
//       console.log(this);
//    });

</script>



  </html>

5.Jquery事件

5.1 ready加载事件

ready()类似于onLoad()事件
ready()可以写多个，按顺序执行
作用：当页面的dom结构加载完毕后执行。

语法： $document).ready(function(){ }); 也可以简写为：$ (function(){});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ready加载事件</title>
    <script src="js/jquery-3.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //作用就是等页面的dom结构加载完毕后执行，如果没有写在这个ready里面，则打印的jquery对象为空
        $(document).ready(function () {
            //获取元素
            console.log($("#p1"));
        });
        //简写模式
        $(function () {
            console.log("ready加载事件");
        });
    </script>
</head>
<!--
   ready加载事件
      预加载事件
      当页面的dom结构加载完毕后执行
      类似于js中的load事件
      ready事件可以写多个
      语法：
         $(document).ready(function(){

         });
       简写：
         $(function(){

         });
-->
<body>

    <p id="p1">文本</p>

</body>

</html>

5.2 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)：该事件触发执⾏的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>

</head>
<!--
    绑定事件：
        bind绑定事件
          为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
          语法：
            $(selector).bind(eventType [, eventData], handler(eventObject));

                   eventType: 是一个字符串类型的事件类型，就是你需要绑定的事件。
                   [, eventData]：传递的参数，格式：{名:值,名2:值2}
                   handler(eventObject)：该事件触发执行的函数
           绑定单个事件
              bind绑定
                  $("元素").bind("事件类型", function(){
                  });
              直接绑定：
                  $("元素").事件名(function(){
                  });
           绑定多个事件
              bind绑定
                 1.同时为多个事件绑定同一个函数
                  指定元素.bind("事件类型1 事件类型2 ...", function(){

                  });
                 2.为元素绑定多个事件，并设置对应的函数
                  指定元素.bind("事件类型", function(){

                  }).bind("事件类型", function(){

                  });
                 3.为元素绑定多个事件，并设置对应的函数
                  指定元素.bind({
                        "事件类型":function(){

                        },
                        "事件类型":function(){

                        }
                    });
                直接绑定
                  指定元素.事件名(function(){

                  })

-->
<body>
    <h3>bind()方简单的绑定事件</h3>
    <!--style="cursor:pointer" 设置鼠标图标  -->
    <div id="test" style="cursor:pointer">点击查看名言</div>
    <input id="btntest" type="button" value="点击就不可用了"/>
    <hr>
    <button type="button" id="btn1">按钮1</button>
    <button type="button" id="btn2">按钮2</button>
    <button type="button" id="btn3">按钮3</button>
    <button type="button" id="btn4">按钮4</button>

</body>

<script src="js/jquery-3.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
     1.确定为哪些元素绑定事件
     获取元素
     2.绑定什么事件（事件类型）
     第⼀个参数：事件的类型
     3.相应事件触发的，执⾏的操作
     第⼆个参数：函数
     * */
    /*绑定单个事件*/
    $("#test").bind("click", function(){
        console.log("悠悠岁月，尘封了那个金戈铁马，英雄浪漫的时代。");
    });
    //原生js绑定事件
//    document.getElementById("test").onclick = function(){
//        console.log("test.....");
//    }
    //直接绑定
    $("#btntest").click(function(){
        //禁用按钮
        console.log(this);  //this指的是这个按钮
        $(this).prop("disabled", true);
    });

    /*绑定多个事件*/
    //1.同时为多个事件绑定同一个函数
    $("#btn1").bind("click mouseout", function(){
        console.log("大冰还是小黄");
    });

    //2.为元素绑定多个事件，并设置对应的函数
    $("#btn2").bind("click", function(){
        console.log("点击了按钮2");
    }).bind("mouseout",function(){
        console.log("光标移开了按钮2");
    });

    //3.为元素绑定多个事件，并设置对应的函数
    $("#btn3").bind({
        "click": function(){
            console.log("按钮3被点击");
        },
        "mouseout": function(){
            console.log("光标移开按钮3");
        }
    })

    //4.直接绑定
    $("#btn4").click(function(){
        console.log("按钮4被点击了");
    }).mouseout(function(){
        console.log("按钮4移开了");
    });
</script>
</html>

6.Ajax

6.1. $.ajax

jquery 调用 ajax 方法：
格式：$.ajax({});

参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$ajaxhtml</title>

</head>
<body>

<!--
 jquery 调⽤ ajax ⽅法：
         格式：$.ajax({});
         参数：
         type：请求⽅式 GET/POST
         url：请求地址 url
         async：是否异步，默认是 true 表示异步
         data：发送到服务器的数据
         dataType：预期服务器返回的数据类型
         contentType：设置请求头
         success：请求成功时调⽤此函数
         error：请求失败时调⽤此函数

 -->

</body>


<script src="js/jquery-3.7.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
        $.ajax({
            type:"get",     //请求方式
            url: "js/data.txt",   //请求地址
            data:{         //请求数据，json对象
                uname:"zhangsan"  //如果没有参数，则不需要设置

            },
            //请求成功时调用的函数
            success:function(data) {
                console.log(data);

                //将字符串转化成json对象
                var obj = JSON.parse(data);
                console.log(obj);
            }
        });


    $.ajax({
        type:"get",     //请求方式
        url: "js/data.txt",   //请求地址
        data:{         //请求数据，json对象
           // uname:"zhangsan"  //如果没有参数，则不需要设置

        },
        dataType:"json",         //预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象。
        //请求成功时调用的函数
        success:function(data) {
            console.log(data);   //字符串

            //将字符串转化成json对象
//            var obj = JSON.parse(data);
//            console.log(obj);

            //Dom操作
            //创建ul
            var ul = $("<ul></ul>");
            //遍历返回的数据数组
            for (var i = 0; i < data.length; i++){
                //得到数组中的每一个元素
                var user = data[i];
                //创建li元素
                var li = "<li>" + user.userName + "</li>";
                //将li元素设置到ul元素中
                ul.append(li);
            }
            console.log(ul);
            //将ul设置到body标签中
            $("body").append(ul);
        }
    });


</script>
</html>

6.2 $. g e t 和$ .post方式

这是一个简单的get或post请求功能以取代复杂的$.ajax。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.get和$.post</title>

</head>
<body>
<!--
    $.get();
        语法：
           $.get("请求地址", "请求参数", function(形参){

           });
-->

</body>

<script src="js/jquery-3.7.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
    $.get("js/data.json",{}, function(data){
        console.log(data);
    });

    $.post("js/data.json",{}, function(data){
        console.log(data);
    });
</script>
</html>

6.3 $.getJSON

$.getJSON

语法：
$.getJSON(“请求地址”, “请求参数”, function(形参){
});
注：getJSON方式要求返回的数据格式满足json格式(json字符串)

<script src="js/jquery-3.7.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
     $.getJSON("js/data.json", {}, function(data){
          console.log(data);
     });
</script>

和$.get的区别：

如果请求地址文件的内容不是json格式的(满足json格式的字符串)，那么getJSON方式是不能够返回的，而$get可以

如下所示：引入内容为字符串"凯旋"的test.txt文件
$.get

$.get("js/test.txt",{}, function(data){
    console.log(data);
});

$.getJSON

$.getJSON("js/test.txt", {}, function(data){
    console.log(data);
});

(可见，$.getJSON方式要求返回的数据格式满足json格式(json字符串))