jQuery基础使用与样式总结

jQuery基础使用与样式总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：唐文坚 
撰写时间：2020年4月20日

JQ是什么？
JQ是JS的函数库JQ相比JS的代码量要少的多实现的功能也比JS相对要多一些
JQ的选择器：
element元素选择器 $(“标签名称”);
可以通过这种方式选择到要找到的元素括号里可以说ID可以是类可以是表签
列： $(“a “);选择a标签；
$(”#a”);选择ID标签；
$(".a");选择类标签
$("*");全选
层级选择器：
$(“body div”);
选择body中的所有div元素
$(“body>div”);
选择body中直接的子元素div
$("#box+div");
选择div#box紧跟后面的一个元素
$("#box~div");
选择div#box元素的兄弟元素

有些时候我们不可以通过基本的选择器去找元素，JQ就可以为了方便我们找到JQ自己写出了一些比较便利的选择器
举例：
$(":first")获取匹配第一个元素例如:$(‘li:first’);
$(":last")获取匹配的最后个元素例如:$(‘li:last’);
$(":not(selector)")去除所有与给定选择器匹配的元素例如:$(“input:not(:checked)”) $(":even")匹配所有索引值为偶数的元素，从0开始计数例如:$(“li:even”)
$(":odd")匹配所有索引值为奇数的元素，从0开始计数例如:$(“li:odd”)
$(":eq(index)")匹配一个给定索引值的元素，从0开始计数例如:$(“li:eq(1)”)
$(":gt(index)")匹配所有大于给定索引值的元素，从0开始计数例如:$(“li:gt(0)”)
$(":lt(index)")匹配所有小于给定索引值的元素，从0开始计数例如:$(“li:gt(2)”)
$(":header")匹配如h1,h2,h3之类的标题元素例如:$(":header").css(“background”, “#EEE”);
$(":animated")匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)例如:$(":header").css(“background”, “#EEE”);
$(":focus") 匹配当前获取焦点的元素。 $(":root")选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是元素。
示例:设置背景颜色为黄色
$(":root").css(“background-color”,“yellow”);