【Jquery】jquery的简单使用

目录

1.常用的选择器学习

2.操作元素的属性

3.操作元素的内容

4.操作元素的样式

5.Jquery的事件机制

6.Ajax的使用

---

1.常用的选择器学习

获取要操作的HTML元素对象，jquery会将符合要求的HTML元素放入到数组中返回。

（1）ID选择器

$(" #HTML的标签ID ")

（2）标签选择器

$(" 标签名 ")

（3）类选择器

$(" .类样式名称 ")

（4）组合选择器

匹配选择器1下的选择器2元素对象

$(" 选择器1 选择器2 ...")

（5）寻找第一个和最后一个元素

$('li:first')：获取第一个li元素

$('li:last')：获取最后一个li元素

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

（6）查找所有未选中的 和选中的input 元素 

1.查找所有未选中的 input 元素
    $("input:not(:checked)")
2.查找所有选中的复选框元素
    $("input:checked")

（7）寻找偶元素和奇元素

$("tr:even)；查找表格的1、3、5...行（即索引值0、2、4...）
$("tr:odd")；查找表格的2、4、6行（即索引值1、3、5...）

（8）触发焦点事件

当页面加载后将 id 为 'login' 的元素设置焦点:

$("#login:focus");

（9）匹配其父元素下的第N个子或奇偶元素

在 ul 查找第 2 个li

$("ul li:nth-child(2)")

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>

寻找第一个或者最后一个li

1.在每个 ul 中查找第一个 li
    $("ul li:first-child")
2.在每个 ul 中查找最后一个 li
    $("ul li:last-child")

【注意】会把ul中的所有子元素都算进去，在ul中查找第二个元素，如果第二个不是li，不起作用。

2.操作元素的属性

主要是对各种标签的属性进行操作，如获取属性值，修改属性，增加属性，删除属性等等。

1. 元素对象.attr("属性名")：返回的是源码中定义的默认值

2.  输出的是img元素的属性值###
   console.log($("#img").attr("src"));
    <img src="###" alt="" id="img" >

3. 元素对象.attr("属性名","新的属性值")：设置，修改元素的属性
    

   1.设置多属性，为所有图像设置src和alt属性。
       $("img").attr({ src: "test.jpg", alt: "Test Image" });
   2.设置单属性，为所有图像设置src属性。
       $("img").attr("src","test.jpg");

4. 删除元素的属性

   删除img元素的src属性
       $("img").removeAttr("src");

5. 元素对象.val()：返回的是用户在网页中录入的属性值
   元素对象.val("设置的值")：设定录入的属性值

   获取文本框中的值
       $("input").val();
   设定文本框的值
       $("input").val("hello world!");

6. 增加和删除类名

   为p标签增加类名，也可以增加多个
       $("p").addClass("selected");
       $("p").addClass("selected1 selected2");
   删除p标签的指定类名
       $("p").removeClass("selected");
   删除p标签的全部类名
       $("p").removeClass();
   

3.操作元素的内容

对标签里的内容进行各种操作

1. 元素对象.html()：返回元素的所有内容，包括HTML子标签
   元素对象.html("新的内容")：新的内容会覆盖旧的内容，HTML标签会被解析

   得到p元素的内容（text不能识别标签，用法一样）
       $('p').html();
   设置p标签的内容为指定内容，可以识别标签
       $("p").html("Hello <b>world</b>!");
   

2. 元素对象.append("要追加的内容")：将指定的内容追加当前内容后
   元素对象.prepend("要追加的内容"):将指定的内容追加当前内容前
   元素对象.appendTo("要将标签移到标签位置")：将指定标签内容移到另一个标签中

   向p元素标签中新增加一些内容，能够识别标签
       $("p").append("<b>Hello</b>");
   连同p标签一同转移到div标签中
       $("p").appendTo("div");

3. 元素对象.empty()：清空内容

   清空指定标签里的内容
   $("p").empty();

4. 元素对象.remove()：删除元素

   将p标签删除（连同里面的内容）
   $("p").remove();

4.操作元素的样式

主要是对元素的css样式进行操作；

• 元素对象.css("样式名称","样式值")：单个样式的修改

  将p标签里面的内容字体颜色变成红色
  $("p").css("color","red");

• 元素对象.css({"样式名称":"样式值","样式名称":"样式值",....})：多个样式的修改

  将p标签里的字体颜色变成红色，且背景颜色变成蓝色
  $("p").css({ color: "red", background: "blue" });

5.Jquery的事件机制

根据指定的事件触发某一函数的执行。如鼠标事件，点击事件等等。

1. 页面加载事件：可以声明N多个，当页面被浏览器加载成功后触发里面的函数执行

   $(function(){   函数体  });

2. 给选定的HTML元素添加指定的事件
    

   $("选择器").事件名(function(){ 函数体 })
   常用的事件：
   1.单击 click
   2.失去焦点 blur
   3.鼠标放在上面 hover
   4.锁定焦点 focus 如：$("input").focus();锁定input标签的焦点

3. 一般来说，上面的两个事件组合使用，页面加载完成过后，触发指定的事件执行函数。

6.Ajax的使用

概念

• Ajax 可以使网页实现异步更新。你可以在不重新加载整个网页的情况下，对网页的部分内容进行更新。（对网页的局部更新）
• 而非ajax请求每次都要加载整个页面

执行流程

浏览器使用Ajax的方式发送的请求，在接收到后端的响应后会触发回调函数的执行，按照回调函数中定义的逻辑，将响应数据填充到页面的指定位置！

使用

1. get方式的请求

   参数1：请求地址
   参数2：请求数据，一般前后端要统一数据格式，主要用json
   参数3：回调函数：response为后端响应的数据
   var data = { key: "value" }; // JavaScript 对象
   var jsonData = JSON.stringify(data); // 序列化为 JSON 字符串
   
   $.get("请求地址", jsonData, function(response) {
       console.log("请求成功:", response);
   }, "json"); // 指定期望接收的数据类型为 JSON

2. post方式的请求

   var data = { key: "value" }; // JavaScript 对象
   var jsonData = JSON.stringify(data); // 序列化为 JSON 字符串
   
   $.post("请求地址", jsonData, function(response) {
       console.log("请求成功:", response);
   }, "json") // 指定期望接收的数据类型为 JSON
     .fail(function(error) {
       console.error("请求失败:", error);
     });

3. 发送任意格式的异步请求

   $.ajax({
       url: "请求地址",
       type: "POST",
       data: JSON.stringify({ key: "value" }), // JSON.stringify将对象转换为 JSON 字符串
       contentType: "application/json; charset=utf-8", // 设置 Content-Type 头，告诉服务器发送的数据类型
       dataType: "json", // 告诉 jQuery 预期接收的数据类型
       success: function(response) {
           console.log("请求成功:", response);
       },
       error: function(error) {
           console.error("请求失败:", error);
       }
   });

注意：前后端的请求数据和响应数据的格式一定要一致，一般为 JSON 格式