jQuery课堂笔记

2018.9.17 星期一

复习:
本地存储：
sessionStorage
仅限当前选项卡
localStorage
跨选项卡，存在浏览器中，浏览器关闭之后再打开仍可以访问

方法：
setItem(key,value);//设置值
getItem(key);//通过key来获取value

---

本地数据库 ：
sqlLite：支持sql语句
关键代码：
var db = openDataBase(名称,版本,描述,大小);//2M=210241024 db.transaction(function(ts){
//ts为事物对象
ts.executeSql(sql,[参数数组],function(ts,result){
fresult.row;//结果集
},function(ts,error){
error.message;//错误信息
});
});
SQL语句：
创建表
create table student(id integer,name text,age integer);
删除表
drop table student;
查询数据
select * from student where id=2;
更新数据
update student set name=‘briup’ where id=2;
删除数据
delete from student where id=2;

---

indexedDB: 不支持sql语句
表–>对象仓库
记录–>记录（主键-对象）

1.获取数据库,创建对象仓库
var request = indexedDB.open(名称，版本);
//版本更新的时候触发
request.onupgradeneeded = function(){
//创建对象仓库
var db = this.result;
db.createObjectStore(‘student’,{
keyPath:‘id’;//设置对象仓库的主键
autoIncreament:true;//主键自增
});
}

2.获取对象仓库
var request = indexedDB.open(‘student’);//连接最新的版本
request.onsuccess = function(){
var db = this.result;
var ts = db.transaction(‘student’,readwrite);
var store = ts.objectStore(‘student’);
//之后执行其他操作
}

3.执行增删改查
store.put(obj);//添加一条数据，重复添加会覆盖
store.add(obj);//添加一条数据，重复添加会报错
store.get(key);//通过主键来获取数据
store.getAll();//获取所有数据
store.delete(key);//通过主键来删除数据
store.clear();//清空数据

4.操作的返回对象
var req = store.getAll();
req.onsuccess = function(){
this.result;//结果集
};
req.onerror = function(){
this.error;//报错信息
}

---

jQuery

js的库封装了一些js的方法，
jQuery实际上是一个函数，和$一样:  $();
参数：
   1.回调函数
     $(function(){});
     代表在文档加载完毕之后执行
   2.选择器
     #one
     $('#one');
     选择id为one的元素，返回的是一个jQuery对象，是一个类数组对象。
     $('#one')[0]---DOM节点
    
    DOM节点与jQuery对象的转换：
         $(dom节点) 将dom节点转换为jQuery对象，$(div);
         $(dom节点)[0]将jQuery对象转换为dom节点，$('div')[0];
   3.dom节点
     将dom节点转换为jQuery对象。
   4.html字符串 
      $('<div>hello</div>')   
      将字符串转换为jQuery对象，0号位置上就是这个dom节点。

文档加载完毕之后开始执行：
jQuery中：
$(document).ready(function(){
//代码
});
简写：
$(function(){
//代码
});
js中：
window.onload = function(){
//代码
}

jQuery对象
本质是一个类数组对象，索引位置上放的是dom节点，只能通过选择器或过滤器来获取，不能通过new来创建
选择器：
基本选择器：
普遍选择器 *
id选择器 #id
类选择器 .class
标签选择器 标签名
群组选择器 #one,.two 取并集
复合选择器 div#one 取交集
层次选择器：
子代选择器 > 直接孩子
后代选择器 空格 所有的后代
body *
body中所有的后代元素
兄弟选择器
下一个兄弟节点 +
之后所有的兄弟节点 ~

过滤器：
在选择器之后使用
基本过滤器：
:first 第一个元素
:last 最后一个元素
:eq(index) 索引等于index的元素被选中，index从0开始
:lt(index) 索引小于index的元素被选中
:gt(index) 索引大于index的元素被选中
:even 索引为偶数的元素被选中
:odd 索引为奇数的元素被选中
:not(选择器/过滤器) 除了…被选中
:header 选中h1~h6标题元素

  选择2<x<5的元素
     先选小于5的，再选大于2的
     p:lt(5):gt(2)

内容过滤器：
:contains(text) 选择文本中包含的元素
:empty 选择空元素，即没有内容也没有子元素
:parent 选择非空元素
:not(:empty)
:has(选择器)
div:has(‘span’) 有span子元素的div被选中

可见性过滤器：
:hidden 选中不占据屏幕空间的元素
diaplay:none;
input type = hidden;
:visible 选中占据屏幕空间的元素
visibility:hidden;
opacity:0;

属性过滤器：
[attr] 选择指定属性名的元素
[attr=val] 选择属性值等于val的元素
[attr^=val] 选择属性值以val开始的元素
[attr$=val] 选择属性值以val结束的元素
[attr*=val] 选择属性值中包含val的元素
[attr!=val] 选择属性值不等于val的或者没有这个属性的元素

子代过滤器：
.outer :first-child 选择每个父元素中的第一个孩子节点
.outer :last-child 选择每个父元素中的最后一个孩子节点
.outer :nth-child(index) index从1开始。选择每个父元素中的第几个孩子节点
.outer :only-child 选择每个父元素中的独生子元素
.outer :first-of-type 选择每个父元素中每一种类型的第一个元素
.outer :last-of-type 选择每个父元素中每一种类型的最后一个元素

表单过滤器：
:checked
:selected 选取option中被用户选中的元素
:focus 选取当前聚焦的元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:input 选取所有的可以让用户输入的标签
:enbaled 选取可用的元素
:disabled 选取不可用的元素
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的input类型为image的表单元素
:reset 选取所有的input类型为reset的表单元素
:button 选取所有的input类型为button的表单元素
:file 选取所有的input类型为file的表单元素

表单阻止默认：
$(‘form’).submit(
function(event){
event.preventDefault();
console.log(‘测试代码’);
}
);
=========================================================

2018.9.18 星期二

复习：

---

DOM操作

创建节点
$(‘

hello

’);
添加节点
A,B都是jQuery对象
A.append(B)
B.appendTo(A)
将B添加到A的末尾，作为最后一个子元素
A.prepend(B)
B.prependTo(A)
将B添加到A的开始，作为第一个子元素
A.after(B)
B.insertAfter(A)
在A之后添加B，作为之后的兄弟元素
A.before(B)
B.insertBefore(A)
在A之前添加B，作为上一个兄弟元素
替换节点
A.repalceWith(B)
B.replaceAll(A)
用B替换A
删除节点
A.remove();
有一个返回值，保存的是删除的元素，不保存事件
A.detach();
有一个返回值，保存的是删除的元素，保存事件
A.empty()
清空A中的内容
A，clone(true/false)
克隆节点和子节点
true,代表深复制，复制事件
false,代表浅复制，不复制事件【默认】
类比js中的cloneNode
dom.cloneNode(true/false)
true代表复制节点和子节点
false代表只复制该节点，不复制子节点，不对事件进行管理
节点包裹
A.wrap(B)
使用B在每一个A的外部包裹
A.wrapInner(B)
使用B在每一个A的内部包裹
A.wrapAll(B)
使用B包裹所有的A

节点遍历
children() 获取所有的直接孩子
find(选择器) 在后代元素中查找所有符合条件的
closest(选择器) 在祖先元素中查找最近的符合条件的元素，只返回一个
parent() 获取父元素
parents() 获取祖先元素
next() 获取下一个兄弟元素
nextAll() 获取之后所有兄弟元素
prev() 获取上一个兄弟元素
prevAll() 获取之前所有兄弟元素
sibling() 获取前后所有的兄弟
filter(选择器) 过滤满足条件的元素
$(‘div’).filter(‘span’);
事件
click(function(){});
submit(function(){});
ready(function(){});

绑定事件
on(‘type’,function(){});
$(‘div’).on(‘click’,handle1);
$(‘div’).on(‘click’,handle2);
//按照顺序执行
解绑事件
off(‘type’); //解除指定事件类型的所有绑定事件
off(‘type’,handle); //只解除该事件类型对应的绑定事件
模拟触发事件
trigger(‘type’);
$(‘div’).trigger(‘click’);
事件代理
$(‘ul’).on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
…
},‘li’);

jQuery中常用的API

文本操作
val()
无参：获取第一个选中元素的value值
有参，值： 设置第一个选中元素的value值
html()
无参：获取第一个选中元素的innerHTML
有参，值： 设置第一个选中元素的innerHTML
text()
无参：获取第一个选中元素的innerText
有参，值： 设置第一个选中元素的innerText

==========================================================

2018.9.19 星期三

复习：

---

常用的API

get()
无参：将jQuery对象转换为数组
有参：index。获取该索引位置上的元素。返回一个DOM对象
toArray()
将jQuery对象转换为数组
eq(index)
获取该索引位置上的元素。返回一个jQuery对象。
each(function(index,item){})
遍历一个jQuery对象
index–索引
item–DOM对象
数组：
arr.forEach(function(index,item){});
filter(function(index,item){})
过滤出符合条件的jQuery对象
数组：
var $result = arr.filter(function(index,item){
return index == 2;
});
map(function(index,item){})
映射元素中的一部分，返回值是一个jQuery对象
数组：
var $result = arr.map(function(index,item){
return $(item).html();
});
slice(1,3)
截取，0号位置开始，3号位置结束，不包含3号位置上的。返回值是一个jQuery对象。

属性API
attr(key);//获取属性值
attr(key,value);//设置属性的值

prop(key);//获取属性值
prop(key,value);//设置属性的值
一般对boolean属性进行操作
removeAttr(key);//删除属性
removeProp(key);//删除自定义的属性

类
css({}); //批量设置属性
addClass(className); //添加类
hasClass(className); //判断有没有指定的类，有，返回true,否则返回false.
removeClass(className); //删除类

宽高
获取视口区的宽高：
$(window).width();
$(window).height();

获取内容区的宽高：
$(‘div’).width();
$(‘div’).height();

获取内容+padding区的宽高：
$(‘div’).innerWidth();
$(‘div’).innerHeight();

获取内容+padding+border区的宽高：
$(‘div’).outerWidth();
$(‘div’).outerHeight();

获取内容+padding+border+margin区的宽高：
$(‘div’).outerWidth(true);
$(‘div’).outerHeight(true);

偏移
offset()
获取相对于文档的偏移
position()
获取相对于定位父元素的偏移
scrollLeft()
横向滚动条左侧的偏移
scrollTop()
横向滚动条上侧的偏移
offsetParent()
获取离它最近的父定位元素

动画
hide(time) 隐藏
show(time) 显示
toggle() 显示与隐藏切换
fadeOut() 淡入
fadeIn() 淡出
fadeTo(time,opacity) 淡入淡出到
fadeToggle() 淡入与淡出切换
slideUp() 滑上
slideDown() 滑下
slideToggle() 滑上与滑下切换
自定义动画：
animate({
//数值类型的属性
},time);

---

Ajax

前后端交互的技术。jQuery封装了Ajax技术。
异步的js和xml
异步：
    异步请求，相互之间不影响
同步：    
    同步请求，相互之间受影响

    2个任务-->同一个人做  同步
       先完成一个任务，再去做另一个。有顺序
    2个任务-->两个人做    异步
       完成顺序不一定

 $.ajax({
    
   url:'接口地址', //（默认为当前页地址）发送请求的地址
  
   method:'get/post', //请求方式
  
   data:{}, //前端发送给后台的数据
  
   dataType:'JSON', //希望后台返回的值的数据类型JSON/HTML
   
   error:function(status,error){}, //请求失败时调用此函数。status保存状态码属性。200 500
  
   success:function(res){}, //访问接口成功的回调函数，res是这个接口返回的所有信息，响应体。
  
   async:true, //是否异步
})

$.get(url,data,function(res){},dataType);//发送get请求
$.get(url,function(res){}); //不要参数的get请求。res是从后台返回的数据。

$.post(url,data,success,dataType);//发送post请求
$.getJSON(url,data,success);//发送get请求，获取JSON数据

load   
   加载html片段，从div开始
   $('div').load(url);
        将url中的html片段加载到div里面