1.简介
jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.JQuery的引入
根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
3.JQuery选择器
-
基本选择器
/* #id # id选择符 element # 元素选择符 .class # claw43ss选择符 selector1, selector2, selectorN # 同时获取多个元素的选择符 $("#id") $(".class") $("element") $(".class,p,div") */
-
组合选择器
/* ancestor descendant // 包含选择符 parent > child // 父子选择符 prev + next // 下一个兄弟选择符 prev ~ siblings // 兄弟选择符 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") */
-
属性选择器
/* [attribute=value] // 获取拥有指定数据attribute,并且置为value的元素 $('[type="checked"]') $('[class*="xxx"]') */
-
表单选择器
/* $("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked") 同样适用表单的以下属性 :enabled :disabled :checked :selected */
-
筛选器
/* // 筛选器 :first // 从已经获取的元素集合中提取第一个元素 :even // 从已经获取的元素集合中提取下标为偶数的元素 :odd // 从已经获取的元素集合中提取下标为奇数的元素 :eq(index) // 从已经获取的元素集合中提取指定下标index对应的元素 :gt(index) // 从已经获取的元素集合中提取下标大于index对应的元素 :last // 从已经获取的元素集合中提取最后一个元素 :lt(index) // 从已经获取的元素集合中提取下标小于index对应的元素 :first-child // 从已经获取的所有元素中提取他们的第一个子元素 :last-child // 从已经获取的所有元素中提取他们的最后一个子元素 :nth-child // 从已经获取的所有元素中提取他们的指定下标的子元素 // 筛选器方法 $().first() // 从已经获取的元素集合中提取第一个元素 $().last() // 从已经获取的元素集合中提取最后一个元素 $().eq() // 从已经获取的元素集合中提取指定下标index对应的元素 */
/*
// 查找子代标签：
$("div").children(".test")
$("div").find(".test")
// 向下查找兄弟标签
$(".test").next()
$(".test").nextAll()
$(".test").nextUntil()
// 向上查找兄弟标签
$("div").prev()
$("div").prevAll()
$("div").prevUntil()
// 查找所有兄弟标签
$("div").siblings()
// 查找父标签：
$(".test").parent()
$(".test").parents()
$(".test").parentUntil()
*/
4.绑定事件
/*
三种用法:
1. on 和 off
// 绑定事件
$().on("事件名",匿名函数)
// 解绑事件,给指定元素解除事件的绑定
$().off("事件名")
2. 直接通过事件名来进行调用
$().事件名(匿名函数)
3. 组合事件,模拟事件
$().ready(匿名函数) // 入口函数
$().hover(mouseover, mouseout) // 是onmouseover和 onmouseout的组合
$().trigger(事件名) // 用于让js自动触发指定元素身上已经绑定的事件
*/
5.操作标签
-
/* $("选择符").html() // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素 $("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容 $("选择符").text() // 效果同上,但是获取的内容是纯文本,不包含html代码 $("选择符").text(内容) // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码 */
-
value操作
$().val() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.6.js"></script> <script> $(function () { $("#i1").blur(function () { // 获取jquery对象的value属性值 console.log(this.value); console.log($(this).val()); // 设置value属性值 $(this).val("hello world") }); $("#i3").change(function () { console.log(this.value); console.log($(this).val()); $(this).val("guangdong"); }); console.log($("#i2").val()); console.log($("#i2").val("hello pig!")) }) </script> </head> <body> <input type="text" id="i1"> <select id="i3"> <option value="hebei">河北省</option> <option value="hubei">湖北省</option> <option value="guangdong">广东省</option> </select> <p> <textarea name="" id="i2" cols="30" rows="10">123</textarea></p> </body> </html>
-
属性操作
/* //读取属性值 $("选择符").attr("属性名"); // 获取非表单元素的属性值,只会提取第一个元素的属性值 $("选择符").prop("属性名"); // 表单元素的属性,只会提取第一个元素的属性值 //操作属性 $("选择符").attr("属性名","属性值"); // 修改非表单元素的属性值,如果元素有多个,则全部修改 $("选择符").prop("属性名","属性值"); // 修改表单元素的属性值,如果元素有多个,则全部修改 $("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....}) $("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....}) */<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.6.js"></script> </head> <body> <button class="select_all">全选</button> <button class="cancel">取消</button> <button class="reverse">反选</button> <hr> <table border="1"> <tr> <td>选择</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td><input type="checkbox"></td> <td>张三</td> <td>23</td> </tr> <tr> <td><input type="checkbox"></td> <td>李四</td> <td>23</td> </tr> <tr> <td><input type="checkbox"></td> <td>王五</td> <td>23</td> </tr> </table> <script> $(".select_all").click(function () { $("table input:checkbox").prop("checked",true); }); $(".cancel").click(function () { $("table input:checkbox").prop("checked",false); }); $(".reverse").click(function () { $("table input:checkbox").each(function () { $(this).prop("checked",!$(this).prop("checked")) }) }); </script> </body> </html>
-
css样式操作
/* 获取样式 $().css("样式属性"); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值 操作样式 $().css("样式属性","样式值").css("样式属性","样式值"); $().css({"样式属性1":"样式值1","样式属性2":"样式值2",....}) $().css("样式属性":function(){ // 其他代码操作 return "样式值"; }); */
-
class 属性操作
$().addClass("class1 class2 ... ...") // 给获取到的所有元素添加指定class样式 $().removeClass() // 给获取到的所有元素删除指定class样式 $().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加 - 节点操作
/* //创建一个jquery标签对象 $("<p>") //内部插入 $("").append(content|fn) // $("p").append("<b>Hello</b>"); $("").appendTo(content) // $("p").appendTo("div"); $("").prepend(content|fn) // $("p").prepend("<b>Hello</b>"); $("").prependTo(content) // $("p").prependTo("#foo"); //外部插入 $("").after(content|fn) // ("p").after("<b>Hello</b>"); $("").before(content|fn) // $("p").before("<b>Hello</b>"); $("").insertAfter(content) // $("p").insertAfter("#foo"); $("").insertBefore(content) // $("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]]) */
-
css尺寸
/* $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options]) */
-
css位置
/* $("").offset([coordinates]) // 获取匹配元素在当前视口的相对偏移。 $("").position() // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。 $("").scrollTop([val]) // 获取匹配元素相对滚动条顶部的偏移。 */
6.动画
6.1 基本方法
/*
//基本
show([s,[e],[fn]]) 显示元素
hide([s,[e],[fn]]) 隐藏元素
//滑动
slideDown([s],[e],[fn]) 向下滑动
slideUp([s,[e],[fn]]) 向上滑动
//淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],opacity,[e],[fn]]) 让元素的透明度调整到指定数值
//自定义
animate(p,[s],[e],[fn]) 自定义动画
stop([c],[j]) 暂停上一个动画效果,开始当前触发的动画效果
*/
6.2 自定义动画
$(".animate").click(function () {
$(".c1").animate({
"border-radius":"50%",
"top":340,
"left":200
},1000,function () {
$(".c1").animate({
"border-radius":"0",
"top":240,
"left":120
},1000,function () {
$(".animate").trigger("click")
})
})
})
7.发送ajax请求
$.ajax({ url: "/user/add", data: {name: 'jim'}, type: "POST",//或 “GET” dataType: "json", success: function(data) { //data为 后台传回的数据 json 格式 } });
