jQuery基础使用与样式总结

小菜鸟.. 2020-04-30 10:46:50

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")选择的元素一样，永远是<html>元素。
示例:设置<html>背景颜色为黄色
$(":root").css("background-color","yellow");

...全文