一、jQuery简介:
1.1 jQuery解决了JS中遇到的一些痛点:
1. window.onload 事件有个事件覆盖的问题，我们只能写一个
2. 代码容错性差
3. 浏览器兼容性问题
4. 书写很繁琐，代码量多
5. 代码很乱，各个页面到处都是
6. 动画效果，我们很难实现
1.2 基本使用
min：它是压缩过的版本
区别：我们开发过程中，会用未压缩的版本，或者压缩的。
项目上线的时候，我们要用压缩过的版本。
版本问题：
1. 1.xxx 版本 jQuery-1.11.1.js
2. 2.xxx 版本 不再支持IE6、7、8
1.3 引包
<script src="jquery-1.11.1.min.js"></script>
1.4 入口函数
$(document).ready(function(){});
$(function(){}); //是上面方式的简写
1.5 事件处理程序
$(“#id”).click(function(){
//语句
});
1.6 $问题
jQuery占用了我们两个变量：$ 和 jQuery
1.7 与JS入口函数的区别
1. Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行
2. jQuery的入口函数是在 html所有标签都加载之后，就会去执行。
1.8 JS创建对象
三种方式：
var obj = {};
var obj1 = new Object();
var obj2 = Object.create();
二、jQuery选择器
2.1 基本选择器
2.1.1 id选择器
$(“#demo”).css(“background”,”red”);
// 选择id为demo的第一个元素
2.1.2 类名选择器
$(“.liItem”). css(“background”,”red”);
// 选择所有类名（样式名）为liItem的元素
2.1.3 标签选择器
$(“div”). css(“background”,”red”);
// 选择所有标签名字为div的元素
2.1.4 通配符选择器
$(“*”). css(“background”,”red”)
// 选择所有元素 少用或配合其他选择
2.1.5 并集选择器
$(“.liItem,div”). css(“background”,”red”)
// 选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素
2.2 层级选择器
层级选择器选择了选择符 后面那个元素，比如，div > p，是选择>后面的p元素。
2.2.1 后代选择器
$(“div span”). css(“background”,”red”);
// 选择所有的后代元素
2.2.2 子代选择器
$(“div > span”). css(“background”,”red”);
// 选择所有的子代元素
2.2.3 紧邻选择器
$(“div + p”). css(“background”,”red”);
// 选择紧挨着的下一个元素
2.2.4 兄弟选择器
$(“div ~ p”). css(“background”,”red”);
// 选择后面的所有的兄弟元素
2.3 过滤选择器
2.3.1 :eq(index)
$(“li:eq(1)”). css(“background”,”red”);
//index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。
2.3.2 :gt(index)/:lt(index)
$(“li:gt(2)”). css(“background”,”red”);
// Index 是从0开始的一个数字，选择序号大于/小于index的元素
2.3.3 :odd/:even
$(“li:odd”). css(“background”,”red”);
// 选择所有序号为奇数/偶数行的元素
2.3.4 :first/:last
$(“li:first”). css(“background”,”red”);
// 选择匹配到的第一个/最后一个元素
3 属性选择器
3.1 [attr]
$(“a[href]”). css(“background”,”red”);
// 选择所有包含href属性的元素
3.2 [attr=value]
$(“a[href=’itcast’]”). css(“background”,”red”);
// 选择href属性值为itcast的所有a标签
3.3 [attr!=value]
$(“a[href!=’baidu’]”). css(“background”,”red”);
// 选择所有href属性不等baidu的所有元素，包括没有href的a元素
3.4 ^/$/*
$(“a[href^=’web’]”). css(“background”,”red”);
// 选择所有以web开头的元素
$(“a[href$=’cn’]”). css(“backg round”,”red”) ;
// 选择所有以cn结尾的元素
$(“a[href*=’i’]”). css(“background”,”red”) ;
// 选择所有包含i这个字符的元素，可以是中英文
3.5 [attr][attr]
$(“a[href][title=’我’]”). css(“background”,”red”);
// 选择所有符合指定属性规则的元素，都符合才会被选中。
网友评论