jsuery是一个库,它是由js封装过来的,所以js是包含jquery的.
1.对比
入口函数:$(document).ready(fn),$(function(){})
jquery的入口函数和window.onload()的区别:
jQuery入口函数可以写多次,window.onload只能写一次
执行的时机不同,jQuery的入口,一旦dom的结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,window.onload是等页面文档,外部的js文件,css文件,图片加载完毕才执行内部代码.
js对象和jquery对象的转化:
将js对象转换成jQuery对象:$(js对象)
将jQuery对象转换成js对象:$(".box")[0]
2.选择器
jquery的基本选择器:
ID选择器(#) 作用:选择id为指定值的第一个元素
类选择器(.) 作用:选择具有指定class类名的所有元素
标签选择器(element) 作用:选择标签名为指定值的所有元素
通配符选择器(*) 作用:选择所有元素
层级选择器:
后代选择器(空格表示) 作用:选择所有元素
子代选择器(>) 作用:选择所有的子代元素
基本过滤选择器:
:eq(index) index是从0开始的一个数字,选择序号为index的元素,选择第一个匹配的元素
:gt(index) 选择序号大于index的元素
:lt(index) 选择序号小于index的元素
:odd 选择所有序号为奇数行的元素
:even 选择所有序号为偶数的元素
:first 选择匹配的第一个元素
:last 选择匹配的最后一个元素
筛选方法:
find(selectop) 查找指定元素的所有后代元素(包括子子孙孙) $("#box").find("p")
children() 查找指定元素的直接子元素
siblings() 查找所有兄弟元素(不包括自己)
parent() 查找父元素
eq(index) 查找指定元素的第index元素,index是索引
3.动画
普通动画:
show() 无参数,表示让指定的元素直接显示出来,有参数,通过控制元素的宽高,透明度,display属性,逐渐显示
hide() 和show()相反
开关时的显示隐藏动画:toggle(3000,fn)
滑入和滑出,卷帘门效果:
slideDown() 下拉动画,显示
slideUp() 上拉动画,隐藏
slideToggle() 开关式切换
淡入淡出
fadeIn(3000,callback) 让元素以淡淡的进入视线的方式展现出来
fadeOut(3000,callback) 让元素以渐渐消失的方式隐藏起来
fadeToggle(3000,callback) 通过改变透明度,切换匹配元素的显示或隐藏状态
自定义动画
语法:$(selector).animate({params},speed,callback):第一个参数表示要执行动画的css属性,第二个参数表示执行动画时长,第三个参数表示动画执行完毕后,立即执行的回调函数.
停止动画
语法:$(selector).stop(true,false) 默认是(false,false)
4.html值的操作
html() innerHTML实现,对文本和标签进行渲染,如果有参数表示设置值,如果没有参数表示获取值.
text() innerText实现,只对文本进行渲染
val() value的实现,只对标签中有value属性有效,比如input等.
5.html标签属性的操作:
attr(key,value) 设置单个属性值
attr({key1:value1,ley2:value2}) 对标签设置多个属性值
attr(key) 获取属性值,只对标签中属性操作,比如id,src,href,title等等
removeAttr() 删除某个属性值
6.html对象属性操作
prop() 对JSDOM对象属性的操作,比如单选框中checked属性的设置
removeprop() 移除JSDOM对象属性
7.ajax
jquery的ajax技术是底层的XMLHttpRequest()对象封装过来的
1.创建XHR对象:var xhr = new XMLHttpRequest()
2.打开请求地址:open(请求方式,url,true) 请求方式必须大写,GET或POST url:表示请求的api接口地址 true默认的表示异步的
3.send() 发送请求体的数据,如果是get请求,拼接到url上,如果是post请求,那么会在send()方法中当做实参传输
4.xhr.onreadyStateChange() 状态机方法
5.readyState
0 为初始化:对象已经建立,单位初始化,open方法还未调用
1 初始化:对象已经建立,但还未调用send方法发送请求
2 发送数据:send方法已调用,但HTTP头未知
3 数据传输中:已经接收部分数据,但相应不完全
4 完成 数据接收完成,此时才可以获取完整的返回数据
6.responseText 接收相应的文本内容
7.get 请求:
$.ajax({
url:"api接口地址",
type:'get',
dataType:'json',
success:function(data){},
error:function(err){}
})
8.post请求:
$.ajas({
url:"api接口地址",
type:"post",
data:{name:"张三"},
dataType:"json",
success:function(data){},
error:function(err){}
})
8.位置信息:
获取和设置宽度:width()
获取和设置高度:height()
获取内部宽,不包括border:innerWidth(),innerHeight()
获取外部宽,包含所有:outerWidth(),outerHeight(),offset(),position(),scrollLeft()