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")*/
标签:jQuery,color,li,查找,选择符,css,red
From: https://www.cnblogs.com/megshuai/p/18517772