jQuery

1.jQuery介绍

1.1jQuery是什么

jQuery是一个快速、简介的JavaScript框架，是prototype之后一个优秀的JavaScript代码库（或者JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，指倡导更少的代码，做更多的事情，他封装JavaScript常用的功能代码，提供一种简介的JavaScript设计模式，优化HTML文档操作、时间处理、动画设计和ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

1.2 jQuery的版本

目前市场上 1.x 2.x 3.x 

功能的完善在 1.x

2.x的时候属于删除旧代码，去除对于旧的浏览器兼容代码

3.x的时候增加es的新特性以及调整核心代码的结构。

1.3 jQuery的引入

根本上jQuery就是一个写好的js文件，所以想要使用jQuery的语法必须先引入到本地

常用源地址：
https://www.bootcdn.cn/


1.本地引入
<script src="jQuery.js"></script>

2.远端引入
<script scr="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

jQuery选择器

1.直接查找

1.1 基本选择器
1.2 组合选择器
1.3 属性选择器
1.4 表单选择器
1.5 筛选器

/*
//基本选择器
#id # id选择符
element # 元素选择符
.class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符

//组合选择器
ancestor descendant // 包含选择符
parent > child // 父子选择符
prev + next // 下一个兄弟选择符
prev ~ siblings // 兄弟选择符


//属性选择器
[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对应的元素

*/

1.1 基本选择器

#id # id选择符
element # 元素选择符
.class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符

$("#id")
$(".class")
$("element")
$(".class,p,div")

<script>
    $("#i1").css("color","red");    //id选择符
    $("p").css("color","red");      //属性选择符
    $(".c3").css("color","blue")  ;     //class选择符
    $("div.c1#q1").css("color","red");  //同时满足多个元素
    $("p,div").css("color","yellow")    //同时选中多个标签，满足其中一个则执行该代码
</script>

1.2 组合选择器

A B 	//包含选择符
parent > child		//父子选择符
prev + next		//下一个兄弟选择符
prev ~ siblings		//下面兄弟选择符

$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")

<script>
    $("div div").css("color","red")     //包含选择符
    $("div > div").css("color","red")       //父子选择符
    $("#l1 + div").css("color","red")   //下一个兄弟选择符
    $("#l1 ~ div").css("color","red")      //下面所有兄弟选择符
</script>

1.3 属性选择器

[attribute=value] //获取拥有指定数据attribute，并且置为value的元素

$('[type="checked"]')
$('[class*="xxx"]')

$("[type='text']").css("border","1px solid red")
$("[class*='c']").css("color","yellow")

1.4表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签 :
$("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected

$("[type='text']").css("border","1px solid red")
$(":password").css("border","2px solid red")

1.5筛选器

/*
    $("ul li").css("color","red")   //所有ul下的li标签都获取到
    $("ul li:first").css("color","red"); //查找ul下的第一个li标签
    $("ul li:last").css("color","red"); //查找ul下的最后一个li标签
    $("ul li:even").css("color","red") ;    //查找ul下为奇数的li标签
    $("ul li:odd").css("color","red");  //查找ul下为偶数的li标签
    $("ul li:eq(2)").css("color","yellow");    //查找ul下索引等于3的li标签
    $("ul li:gt(2)").css("color","red");    //查找ul下索引大于2的li标签
    $("ul li:lt(2)").css("color","green")   //查找ul下索引小于2的li的标签

    $("li:first-child").css("color","red"); //查找父级元素中的第一个li标签
*/

1.6筛选器方法

/*
    var index =3;
    $(".outer li").eq(index).css("color","red");
    $(".outer li").last().css("color","red");
    $(".outer li").first().css("color","red");
	*/

2.导航查找

  //查找子代
  $(".c2").children("ul").css("color","red")   //查找为ul的子代
  $(".outer").children().css("color","red") //查找所有子代
  //查找后代
  $(".outer").find("ul").css("color","blue")  //查询后代

  //向下查找兄弟标签
  $(".c4 .c5").next().css("color","red")  //向下查找一个兄弟标签
  $(".c4 .c5").nextAll().css("color","red") //向下查找所有兄弟标签
  $(".c4 .c5").nextUntil(".c6").css("color","red")  //向下查找所有兄弟标签到那个兄弟标签结束

  //向上查找兄弟标签
  $(".c4 .c5").prev().css("color","red"); //向上查找一个兄弟标签
  $(".c4 .c5").prevAll().css("color","red");  //向上查找所有兄弟标签
  $(".c4 .c6").prevUntil(".c5").css("color","red") //向上查找兄弟标签到那个兄弟标签结束

  //查找所有兄弟标签
、  // $(".c4 .c5").siblings().css("color","blue");  //查找所有兄弟标签

  //查找父标签
  $(".c4 .c5").parent() //查找父亲
  $(".c4 .c5").parent().parent()  //查找父亲的父亲
  $(".c4 .c5").parents()  //查找所有的父亲
  $(".c4 .c5").parentsUntil() //查找到那一层父亲结束

jQuery和DOM对象转化

/*// jquery对象 = [dom1,dom2,...]
var $ele = $(".c3 li")
$ele.css("color","red")
// jquery对象转换dom对象 jquery对象[索引]
$ele[1].style.color="green"

// 将dom对象转换成jq对象:    $(dom)      []
dom = document.getElementById("i1")
$(dom).css("color","red")*/