jQuery基础```jsp <%-- “<%@”是一个完整符号，中间不要有空格 charset=UTF-8" 可以解决

参考文章

总结

引入jQuery

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

$等价于jQuery对象

//底层源码:
window.jQuery = window.$ = jQuery;

注意区分dom元素和jQuery对象, 两者的属性和方法不互通
jQuery对象和dom元素互相转换

***
1,jQuery对象是个伪数组对象, 数组中的第一个对象就是dom元素
2,使用$(参数)函数, 传入dom元素,就把dom元素转化为了jQuery对象
***
//dom元素转jQuery对象
var div = dom.getElementById("#div1");
$(div).html(); 

//jquery对象转dom元素的两种方式(jquery对象的)
var jqueryDiv = $("#div1")
jqueryDiv.get(0)
jqueryDiv[0]

$('span',this)相当于$(this).find($('span'))
不要把p标签当容器使用,层级会发生变化

1.1 选择器

基本选择器：

$("*") // 选中所有元素 
$("#ceshi"); // 选中id为ceshi的元素
$(".ceshi"); // 选中class为ceshi的元素
$("div"); // 选中所有div元素
$("#ceshi > div:first"); // 选中id为ceshi下的第一个div元素
$("#ceshi, div"); // 选中id为ceshi的元素和所有div元素
$("div:first"); // 选中第一个div
$("div:last"); // 选中最后一个div
$("div:even"); // 选中索引为偶数的div（从0开始）
$("div:odd"); // 选中索引为奇数的div（从0开始）
$("div:eq(1)"); // 选中索引为1的div元素
$("div:gt(3)"); // 选中索引值大于3的div元素（不包括索引值为3的div元素）
$("div:lt(3)"); // 选中索引值小于3的div元素（不包括索引值为3的div元素）
$("input:focus"); // 选中当前聚焦的input元素
$("div:animated"); // 选中当前正在执行动画的div元素
$("div:hidden"); // 选中所有隐藏的div元素
$("div:visible"); // 选中所有可见的div元素
$("[id]"); // 选中所有带有id属性的元素
$("[class='ceshi']"); // 选中所有为ceshi类的元素
$("[class!='ceshi']"); // 选中所有不为ceshi类的元素
$("[class$='ceshi']"); // 选中所有带有ceshi字符的类

内容选择器：

$("div:contains('ceshi')"); // 选中文本带有ceshi的所有的div
$("div:empty"); // 选中所有不包含子元素或者空文本的div
$("div:parent"); // 选中所有包含子元素或者文本元素的div
$("div:has(p)"); // 选中所有包含p元素的div元素

表单选择器：

$(":input"); // 选中所有 input, textarea, select 和 button 元素
$(":text"); // 选中所有 type="text" 的 input元素
$(":password"); // 选中所有 type="password" 的 input 元素
$(":radio"); // 选中所有 type="radio" 的 input 元素
$(":checkbox"); // 选中所有 type="checkbox" 的 input 元素
$(":submit"); // 选中所有 type="submit" 的 input 元素
$(":reset"); // 选中所有 type="reset" 的 input 元素
$(":button"); // 选中所有 type="button" 的 input 元素
$(":file"); // 选中所有 type="file" 的 input 元素
$(":image"); // 选中所有 type="image" 的 input 元素 （出场率最低的type类型）
$(":enabled"); // 选中所有激活的input元素
$(":disabled"); // 选中所有禁用的input元素
$(":selected"); // 选中所有被选取的input元素
$(":checked"); // 选中所有被选中的input元素
$("#upparent_name").find("option:selected").text() // 获得id=upparent_name的下拉框选中的option的文本内容

1.2 属性操作

基本属性操作：


$("div").attr("class"); // 返回文档中所有div元素的class属性值
$("div").attr("class","ceshi"); // 设置所有div的class属性值为ceshi
$("div").removeAttr("class"); // 删除文档中所有div的class属性 （不建议使用）
$("img").removeProp("src"); // 删除img的src属性 （建议使用）
$("input[type='checkbox']").prop("checked", true); // 选择所有被选中的复选框
$("input[type='checkbox']").prop("checked", false); // 选择所有没被选中的复选框

CSS属性操作

$("div").addClass("selected"); // 为div元素加上 'selected' 类
$("div").removeClass("selected"); // 从div元素中删除 'selected' 类
$("div").toggleClass("selected"); // 如果存在就删除,否则就添加
$("div").get(0).className = 'container white' //重置div的class为'container white'

HTML获取值和写入信息操作

.html()是用来读取元素的html内容（包括html标签）；
.text()用来读取元素的纯文本内容，包括其后代元素；
.val()是用来读取表单元素的”value”值；

$('p').html(); // 返回p元素的html内容
$("p").html("ceshi <b>ceshi</b>!"); // 设置p元素的html内容
$('p').text(); // 返回p元素的文本内容
$("p").text("ceshi"); // 设置p元素的文本内容
$("input").val(); // 获取文本框中的值
$("input").val("ceshi"); // 设置文本框中的内容</pre>

1.3 jQuery对CSS的操作

样式：

$("p").css("color"); // 获得p元素的color属性值
$("p").css("color","green"); // 为p元素设置color为green
$("p").css({ "color": "green", "background": "yellow" }); // 为p元素设置字体颜色和背景颜色，设置多属性的时候要使用{}

位置：

$('p').offset(); // 获得p元素相对于当前视口的偏移（相对于浏览器左上角窗口）
$('p').offset().top; // 获得p元素距离当前视口顶部偏移值
$('p').offset().left; // 获得p元素距离当前视口左侧偏移值
$("p").position(); // 获得p元素相对于父元素的偏移位置（可见元素才有效）
$(window).scrollTop(); // 获取鼠标滚轮滑动的高度
$(window).scrollLeft(); // 获取鼠标滚轮滑动的宽度
$(window).scrollTop('100'); // 设置垂直偏移100
$(window).scrollLeft('100'); // 设置水平偏移100

大小尺寸：

$("p").height(); // 获取p元素的高
$("p").width(); // 获取p元素的宽
$("p:first").innerHeight(); // 获得第一个p元素的区域高度（包含上下padding，不包含上下border和margin）
$("p:first").innerWidth(); // 获得第一个p元素的区域宽度
$("p:first").outerHeight(); // 获得第一个p元素（包括padding，border，margin）
$("p:first").outerWidth(); // 获得第一个p元素
$("p:first").outerHeight(true); // 为true时包括边距

1.4 jQuery对文档的处理

内部插入：

$("p").append("<b>ceshi</b>"); // 在每个p元素内的最后面追加内容
$("<b>ceshi</b>").appendTo("p"); // 将内容追加到p元素的最后面
$("p").prepend("<b>ceshi</b>"); // 在每个p元素内的最前面追加内容
$("<b>ceshi</b>").prependTo("p"); // 将内容追加到p元素的最前面</pre>

外部插入：

$("div").after("&lt;p&gt'ceshi'&lt/p&gt"); // 在同级div元素的最后插入内容
$("div").before("&lt;p&gt'ceshi'&lt/p&gt"); // 在同级div元素的最前面插入内容
$("p").insertAfter("#ceshi"); // 所有p元素插入到id为ceshi元素的后面
$("p").insertBefore("#ceshi"); // 所有p元素插入到id为ceshi元素的后面

替换：

$("p").replaceWith("<b>ceshi. </b>"); // 将匹配到的所有p元素替换成<b>ceshi. </b>（可以是文档内容和标签元素）
$("<b>ceshi. </b>").replaceAll("p"); // 将元素或内容替换给所有选中的p元素

删除：

$("div").empty(); // 删除匹配的div元素中所有的子节点，不包括本身
$("div").remove(); // 删除所有匹配的元素，包括本身
$("div").detach(); // 删除所有匹配的元素（和remove()不同的是:所有绑定的事件、附加的数据会保留下来）

复制：

$("p").clone(); // 生成被选元素的副本，包含子节点、文本和属性
$("p").clone(true); // 可选，布尔值，规定是否复制元素的所有事件处理，默认地，副本中不包含事件处理器。

1.5 事件

页面载入事件（两种最常见的方式，推荐第一种方法）：

// 方法一
$(document).ready(function () {

});
// 方法二
$(function () {

})

常用事件：

$("button").click(); // 单击事件
$("button").dblclick(); // 双击事件
$("input[type=text]").focus(); // input元素获得焦点时，触发focus事件
$("input[type=text]").blur(); // input元素失去焦点时，触发blur事件
$("button").mousedown(); // 当鼠标按下时触发事件
$("button").mouseup(); // 按钮上松开鼠标按键时触发的事件
$("p").mousemove(); // 当鼠标指针在指定元素中移动时触发的事件
$("p").mouseover(); // 当鼠标指针位于元素上方时触发事件
$("p").mouseout(); // 当鼠标指针从元素上方移开时触发事件
$(window).keydown(); // 当键盘按钮被按下时触发事件
$(window).keypress(); // 当键盘或按钮被按下时触发事件，每输入一个字符都触发一次
$("input").keyup(); // 当按钮松开时触发事件
$(window).scroll(); // 当窗口发生滚动时触发事件
$(window).resize(); // 当浏览器窗口大小发生改变时触发事件
$("input[type='text']").change(); // 当元素的值发生改变时触发事件
$("input").select(); // 当元素中的内容被选中时触发事件
$("form").submit(); // 当提交表单时触发事件
$(window).unload(); // 当用户离开页面时触发事件

（event object）对象，所有事件函数都可以传入event参数方便处理事件：

event.pageX // 事件发生时，鼠标距离网页左上角的水平距离
event.pageY // 事件发生时，鼠标距离网页左上角的垂直距离
event.type // 事件的类型
event.which // 按下了哪一个键
event.data // 在事件对象上绑定数据，然后传入事件处理函数
event.target // 事件针对的网页元素
event.preventDefault() // 阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() // 停止事件向上层元素冒泡
例：
$("p").click(function(event){
  alert(event.type); // 弹出"click"  
});

1.6 动画效果

基本：

$("p").show(); // 显示匹配的元素
$("p").show("slow"); // 参数表示速度,("slow","normal","fast"),也可为1000毫秒
$("p").hide(); // 隐藏匹配的元素
$("p").toggle(); // 切换匹配元素的显示和隐藏

滑动：

$("p").slideDown("1000"); // 用1000毫秒的时间将元素滑下
$("p").slideUp("1000"); // 用1000毫秒的时间将元素滑上
$("p").slideToggle("1000"); // 用1000毫秒的时间将元素滑上滑下

淡入淡出：

$("p").fadeIn("1000"); // 用1000毫秒的时间将元素淡入
$("p").fadeOut("1000"); // 用1000毫秒的时间将元素淡出
$("p").fadeToggle("1000"); // 用1000毫秒的时间将元素淡入淡出
$("p").fadeTo("slow", 0.6); // 用900毫秒的时间将元素的透明度调整到0.6

对象访问控制：

$.trim(); // 去除字符串两端的空格
$.each(); // 遍历一个数组或对象，for循环
$.inArray(); // 返回一个值在数组中的索引位置，不存在返回-1  
$.grep(); // 返回数组中符合某种标准的元素
$.extend(); // 将多个对象，合并到第一个对象
$.makeArray(); // 将对象转化为数组
$.type(); // 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）
$.isArray(); // 判断某个参数是否为数组
$.isEmptyObject(); // 判断某个对象是否为空(不含有任何属性)
$.isFunction(); // 判断某个参数是否为函数
$.isPlainObject(); // 判断某个参数是否为用"{}"或"new Object"建立的对象
$.support(); // 判断浏览器是否支持某个特性

练习

遍历元素

//filter(arg1,函数)
//从$("#sing p")结果中过滤id为id1的元素,如果函数返回值非0,那么.css生效,否则不生效(函数返回值不能写true或false)
$("#sing p").filter('#id1', function (index) {  //index是第几个,从0开始
    return 1;
}).css("background-color", "yellow");

//为每个匹配元素执行函数
$("div").each(function(){
    alert($(this).text()); //获取备选元素的文本内容
});

同级兄弟元素

console.log($("#span2").siblings()); //获取同级的兄弟元素(不包括自己)
console.log($("#span2").prev()[0].innerHTML) //获取上一个同级对象(jQuery对象),获取元素,输出元素内容
console.log($("#span2").next()[0].innerHTML) //获取下一个同级对象(jQuery对象),获取元素,输出元素内容
console.log($("#span2").prevAll()); //返回被选元素之前的所有同级元素
console.log($("#span2").nextAll()); //返回被选元素之后的所有同级元素

console.log($("#span2").parent()[0]) //获取父级(jQuery对象),获取元素(jQuery对象取0就是获取元素)
console.log($("#span2").parents()) //获取所有父级

子代选择器和后代选择器

//子代选择器(只包括儿子级别,不包括孙子..级别) 下面两种方式等价
console.log($("#div1>span"));
console.log($("#div1").children('span'))
//后代选择器(包括儿子、孙子..级别) 下面两种方式等价
console.log($("#div1 span"));
console.log($("#div1").find('span'))

console.log('----------获取子代中的某个元素--------------')
console.log($("#div1>span")[0])
console.log($("#div1>span").get(1))
console.log($("#div1>span").eq(0)) //获取jQuery对象
console.log($("#div1>span").eq(0)[0]) //获取元素

console.log($("#div1").children('span')[0]);
console.log($("#div1").children('span').get(1));

获取所有div标签、指定id的span标签、span的同级下一个元素、span的同级上一个元素、父元素、子元素

参考1

node(节点)和element(元素)区别

扩展

node由元素节点和文本节点组成,
获取上级或下级元素时, 推荐使用element相关的元素
最上层节点是document,可以是空节点不包含任何元素
不存在最上层元素

// 报错：000.html:37 Uncaught TypeError: Cannot read property 'nodeName' of null
console.log(div.parentElement.parentElement.parentElement.parentElement.nodeName); 
// #document
console.log(div.parentNode.parentNode.parentNode.parentNode.nodeName);