jQuery复习笔记（一）

1.1 回顾前面学到的js我们遇到的一些痛点

1. window.onload 事件有个事件覆盖的问题，我们只能写一个
2. 代码容错性差
3. 浏览器兼容性问题
4. 书写很繁琐，代码量多
5. 代码很乱，各个页面到处都是
6. 动画效果，我们很难实现

1.2 jQuery解决问题

解决了我们上面遇到所有问题

1.3 js入口函数跟jQuery入口函数的区别：

1. Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行
2. jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。

1.4 jQuery基本选择器

基本选择器
符号  说明  用法
$(“#demo”)	选择id为demo的第一个元素	$(“#demo”).css(“background”,”red”)
$(“.liItem”)	选择所有类名（样式名）为liItem的元素	$(“.liItem”). css(“background”,”red”);
$(“div”)	选择所有标签名字为div的元素	$(“div”). css(“background”,”red”);
$(“*”) 选择所有元素
少用或配合其他选择器来使用   $(“*”). css(“background”,”red”)
$(“.liItem,div”)	选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素	$(“.liItem,div”). css(“background”,”red”)

规律：$(selector).css(“background”,”red”); 层级选择器 符号 说明 用法 空格 后代选择器 选择所有的后代元素$(“div span”). css(“background”,”red”);

子代选择器
选择所有的子代元素 $(“div > span”). css(“background”,”red”) + 紧邻选择器 选择紧挨着的下一个元素$(“div + p”). css(“background”,”red”)
~ 兄弟选择器
选择后面的所有的兄弟元素 $(“div ~ p”). css(“background”,”red”)
层级选择器选择了选择符 后面那个元素，比如，div > p，是选择>后面的p元素。

过滤选择器

基本过滤选择器
符号 说明 用法
:eq(index) index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。 $(“li:eq(1)”). css(“background”,”red”) :gt(index) Index 是从0开始的一个数字，选择序号大于index的元素$(“li:gt(2)”). css(“background”,”red”)
:lt(index) Index是从0开始的一个数字，选择小于index 的元素 $(“li:lt(2)”). css(“background”,”red”) :odd 选择所有序号为奇数行的元素$(“li:odd”). css(“background”,”red”)
:even 选择所有序号为偶数的元素 $(“li:even”). css(“background”,”red”) :first 选择匹配第一个元素$(“li:first”). css(“background”,”red”)
:last 选择匹配的最后一个元素 $(“li:last”). css(“background”,”red”)

属性选择器
符号 说明 用法
$(“a[href]”) 选择所有包含href属性的元素$(“a[href]”). css(“background”,”red”)
$(“a[href=’itcast’]”) 选择href属性值为itcast的所有a标签$(“a[href=’itcast’]”). css(“background”,”red”)
$(“a[href!=’baidu’]”) 选择所有href属性不等baidu的所有元素，包括没有href的元素$(“a[href!=’baidu’]”). css(“background”,”red”)
$(“a[href^=’web’]”) 选择所有以web开头的元素$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”) 选择所有以cn结尾的元素 $(“a[href$=’cn’]”). css(“background”,”red”)
$(“a[href*=’i’]”) 选择所有包含i这个字符的元素，可以是中英文$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”) 选择所有符合指定属性规则的元素，都符合才会被选中。$(“a[href][title=’我’]”). css(“background”,”red”)

1.5 html快速生成标签

ul>li{兄弟很多$}*8