jQuery

Posted 2021-01-13 s593941

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()