目录
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.操作元素的属性
主要是对各种标签的属性进行操作，如获取属性值，修改属性，增加属性，删除属性等等。
- 元素对象.attr("属性名")：返回的是源码中定义的默认值
输出的是img元素的属性值### console.log($("#img").attr("src")); <img src="###" alt="" id="img" >元素对象.attr("属性名","新的属性值")：设置，修改元素的属性
1.设置多属性，为所有图像设置src和alt属性。 $("img").attr({ src: "test.jpg", alt: "Test Image" }); 2.设置单属性，为所有图像设置src属性。 $("img").attr("src","test.jpg");- 删除元素的属性
删除img元素的src属性 $("img").removeAttr("src");- 元素对象.val()：返回的是用户在网页中录入的属性值
元素对象.val("设置的值")：设定录入的属性值获取文本框中的值 $("input").val(); 设定文本框的值 $("input").val("hello world!");- 增加和删除类名
为p标签增加类名，也可以增加多个 $("p").addClass("selected"); $("p").addClass("selected1 selected2"); 删除p标签的指定类名 $("p").removeClass("selected"); 删除p标签的全部类名 $("p").removeClass();
3.操作元素的内容
对标签里的内容进行各种操作
- 元素对象.html()：返回元素的所有内容，包括HTML子标签
元素对象.html("新的内容")：新的内容会覆盖旧的内容，HTML标签会被解析得到p元素的内容（text不能识别标签，用法一样） $('p').html(); 设置p标签的内容为指定内容，可以识别标签 $("p").html("Hello <b>world</b>!");元素对象.append("要追加的内容")：将指定的内容追加当前内容后
元素对象.prepend("要追加的内容"):将指定的内容追加当前内容前
元素对象.appendTo("要将标签移到标签位置")：将指定标签内容移到另一个标签中向p元素标签中新增加一些内容，能够识别标签 $("p").append("<b>Hello</b>"); 连同p标签一同转移到div标签中 $("p").appendTo("div");元素对象.empty()：清空内容
清空指定标签里的内容 $("p").empty();元素对象.remove()：删除元素
将p标签删除（连同里面的内容） $("p").remove();
4.操作元素的样式
主要是对元素的css样式进行操作；
- 元素对象.css("样式名称","样式值")：单个样式的修改
将p标签里面的内容字体颜色变成红色 $("p").css("color","red");- 元素对象.css({"样式名称":"样式值","样式名称":"样式值",....})：多个样式的修改
将p标签里的字体颜色变成红色，且背景颜色变成蓝色 $("p").css({ color: "red", background: "blue" });
5.Jquery的事件机制
根据指定的事件触发某一函数的执行。如鼠标事件，点击事件等等。
页面加载事件：可以声明N多个，当页面被浏览器加载成功后触发里面的函数执行
$(function(){ 函数体 });给选定的HTML元素添加指定的事件
$("选择器").事件名(function(){ 函数体 }) 常用的事件： 1.单击 click 2.失去焦点 blur 3.鼠标放在上面 hover 4.锁定焦点 focus 如：$("input").focus();锁定input标签的焦点一般来说，上面的两个事件组合使用，页面加载完成过后，触发指定的事件执行函数。
6.Ajax的使用
概念
- Ajax 可以使网页实现异步更新。你可以在不重新加载整个网页的情况下，对网页的部分内容进行更新。（对网页的局部更新）
- 而非ajax请求每次都要加载整个页面
执行流程
浏览器使用Ajax的方式发送的请求，在接收到后端的响应后会触发回调函数的执行，按照回调函数中定义的逻辑，将响应数据填充到页面的指定位置！
使用
- 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- 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); });- 发送任意格式的异步请求
$.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 格式
