引入方式

  1. <head>
  2.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  3. </head>

基础语法

$(selector).action()
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有

元素
$(“p.test”).hide() - 隐藏所有 class=”test” 的

元素
$(“#test”).hide() - 隐藏所有 id=”test” 的元素
$符号的作用：jQuery包装器，利用选择器将DOM元素选择出来，返回值是一个已经封装好的jQuery类型的子对象，对象其实是一个javascript的数组，这个数组对象包含125个方法和4个属性，jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法

文档就绪函数（jQuery 入口函数）

$(document).ready(function () {
      //jQuery 代码...
});
简写
$(function () {
      //jQuery 代码...
});

jQuery的写法使得页面仅加载完DOM结构后就执行，即加载完Html文档后，还没加载图像等其他文件就执行ready()函数，所以$(document).ready(）比window.onload载入执行更快

Jquery选择器

//简单选择器
$("p")
$("#test")
$(".test")
$("p.intro") 
$("p#demo") 

//对选择出来的元素做操作
$(“#one”).css(“backgroundColor”,”red”);


//过滤选择器
$(“div:first”) 选取第一个<div> 元素
$(“p:contains(ab)”) 选取含有文本“ab”的<p> 元素
$(“p:hidden”) 选取所有不可见的<p>元素（包含样式属性display为none，文本隐藏域type=“hidden”,以及visible:hidden的元素）
$("[href]") 选取所有带有 href 属性的元素
$(“:checked”)选取所有被选中的元素
$(“:button”)选取所有按钮

A 空格 B： 在A元素所有子孙元素中查询B元素
A > B： 在A元素所有子元素中查询B元素，不含孙子元素

A ~ B：查找A元素后面所有 兄弟 元素
A + B：查找A元素后面第一个 兄弟 元素

image.png

事件

$("p").click(function () {
                // 动作触发后执行的代码!!
});

$("input").blur(function(){  //失去焦点
    $(this).css("background-color","#ffffff"); 
});

dom操作

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

获取或设置属性

attr() - 获取或设置属性值。

插入为文本，但是会解析为元素。

  • append() - 在被选元素的结尾插入内容（内部结尾）

$(“p”).append(“追加文本”);

  • prepend() - 在被选元素的开头插入内容（内部开头）

$(“p”).prepend(“在开头追加文本”);

  • after() - 在被选元素之后插入内容

$(“img”).after(“在后面添加文本”);

  • before() - 在被选元素之前插入内容

$(“img”).before(“在前面添加文本”);
image.png

  • remove() -删除被选元素（及其子元素）

$(“#div1”).remove();

  • empty() -从被选元素中删除子元素

$(“#div1”).empty();
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
$(“p”).remove(“.italic”);

CSS样式设置

  • 返回属性值

$(“p”).css(“background-color”);

  • 设置指定的 CSS 属性，请使用如下语法：

$(“p”).css(“background-color”,”yellow”);

  • 设置多个 CSS 属性，请使用如下语法：

$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});