学习、掌握jQuery

• 基本选择器
• 属性选择器
• 基本过滤器
• 可见性过滤器

jQuery特点

轻量级:封装后的库只有不到100k，下载的时候很快

强大选择器:方便快速查找DOM元素

隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数
链式调用:可以通过.不断调用jQuery对象的方法事件处理
DOM操作(CUD)·样式操作
动画
浏览器兼容

丰富的插件支持

 使用jQuery

使用jQuery的三个步骤:
1.引入jQuery文件
2．入口函数
3．功能实现

jQuery的入口函数:

//第一种写法
$(document).ready(function(){

});
//第二种写法
$().ready(function(){

}) ;
//第三种写法
$(function(){

});

        jQuery入口函数与js入口函数的对比:

 Javascript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
 jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery - 链(Chaining)

---

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

---

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

 显示隐藏

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

---

1、基本选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意: jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

1.1基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".classname");	获取同一类class的元素
标签选择器	$("div");	获取同一类标签的所有元素
并集选择器	$("div,p,li");	使用逗号分隔，只要符合条件之一就可
交集选择器	$("div.redClass");	获取class为redClass的div元素

总结:跟css的选择器用法一样，外层加$()。

//jquery如何设置样式
//css(name，value)
//name :样式名 value:样式值 
//id选择器
$("#one")