day01
1. 什么是jQuery:
jQuery是 第三方开发的 —— 先下载才能使用
执行DOM操作的 —— 学jQuery依然在学DOM
极简化的 —— 对DOM API的终极简化
函数库 —— jQuery中一切用函数来实现
为什么: 2个原因:
- jQuery是DOM操作的终极简化:
简化了: 增删改查
事件绑定
动画
ajax - 解决了大部分浏览器兼容性问题:
凡是jQuery让用的都没有兼容性问题:
何时: 几乎所有项目或框架的底层DOM操作,都是由jQuery实现的
2. 如何使用jQuery:
下载: jquery.com
版本: 1.x 兼容IE8
2.x 不再兼容IE8
3.x 不再兼容IE8,增加了新特性
1. 运行在严格模式下
2. 用for of代替了.each()方法
3. 支持Promise
如何使用:
1.先引入jQuery到页面中,再编写自定义js:
<script src="js/jquery-1.11.3.js">
2.只要想使用jQuery简化版API,都要先创建jQuery对象并封装DOM元素对象
2种:
1. 用选择器先查找再创建:
var $btn1=$("#btn1");
2. 如果已经获得DOM元素,可直接封装:
var $btn1=$(this);
什么是jQuery对象: 封装DOM元素对象,并提供操作DOM的简化版API 的类数组对象.
对jQuery对象整体调用API,等效于对内部封装的DOM元素都调用API
jQuery API 三大特性:
1. 自带遍历效果: 对整个jQuery对象调用一次API,等效于自动对内部所有DOM元素都调用API
2. 一个函数两用: 即可获取值,又可修改值
如果调用时,没有给新值,则默认获取
如果调用时,给了新值,则改为修改
3. ?
3. 查询:
- 按选择器查找:
var $elem=$("选择器")
回顾选择器:
基本选择器: 5个 同CSS
#id element .class * selector1,selector2,...
day02
1. 查找:
回顾:
层级选择器: 同CSS
父 后代 父>子 兄+弟 兄~弟
子元素过滤选择器: 同CSS
按元素在其父元素中的相对位置选择元素
下标i从1开始
:first-child :last-child :nth-child(n)
偶数行:tr:nth-child(2n) //even
基本过滤选择器: jQuery新增的
打破父元素的界限,按绝对位置选择元素
下标i从0开始
:first/last :even/odd :eq/gt/lt(i)
属性过滤选择器: 同CSS
[属性名] [属性名=值] [属性名^=开头]
[属性名$=结尾] [属性名*=内容] [属性名!=值]
可见性过滤: jQuery新增
:hidden 匹配隐藏的元素
display:none
visibility: hidden
opacity:0
<input type="hidden">
:visible 匹配显示的元素
内容过滤: jQuery新增
:contains(文本) 匹配元素的内容中包含指定“文本”的元素
:has(选择器) 匹配包含满足选择器要求的子元素的父元素
:parent 选择内容非空的元素
:empty 选择内容为空的元素
状态过滤: 同CSS
:enabled :disabled :selected :checked
表单元素过滤: jQuery新增:
:input 匹配所有表单元素: input select textarea button
:[type] 匹配type为指定类型的input元素:
:text<input type="text">
:password <input type="password">
:…
2. 修改:
内容: 3种:
- 原始HTML片段:
.innerHTML
$elem.html(["html片段"])
一个函数两用 - 纯文本内容:
.textContent
$elem.text(["文本内容"])
一个函数两用 - 表单元素的值:
.value
$elem.val(["值"])
一个函数两用
属性:
核心DOM API:$elem.attr("属性名"[,"属性值"])
一个函数两用
HTML DOM API:$elem.prop("属性名"[,"属性值"])
一个函数两用- HTML标准属性:
2种:- 核心DOM:
getAttribute() setAttribute()
- HTML DOM: .属性名 .属性名=值
- 核心DOM:
- 状态属性
- HTML DOM: .状态属性
- 自定义扩展属性:
- 核心DOM:
getAttribute() setAttribute()
问题: 一次只能修改一个属性,如果同时修改多个属性时,代码会很繁琐:
解决: 同时修改多个属性:
- 核心DOM:
- HTML标准属性:
$elem.attr/prop({
属性:值,
... : ...
})
样式:
jQuery API 三大特性:
- 自带遍历效果
- 一个函数两用
- 多数函数都返回正在操作的jQuery对象本身
day03
- 修改:
样式:
$elem.css("css属性"[,值]) //单个数值的属性值不用加单位
修改样式:elem.style.css属性=值
获取样式:getComputedStyle()
.css()
一次只能修改一个css属性。
如果同时修改多个css属性:
.css({
css属性名:值,
... : ...
})
css属性名必须去横线变驼峰
问题: 如果同时修改多个css属性,用.css()代码繁琐
解决: 用操作class来批量修改样式
<button class