jQuery
2018-10-29 17:42:43 0 举报AI智能生成
jQuery的基础学习,新手必看
作者其他创作
大纲/内容
对类的操作
addClass
removeClass
toggleClass
DOM操作
三步走
1.获取事件源
2.事件
3.事件驱动
父子之间
插入操作,插入到子元素的最后一个 --父子之间
父.append(子)
子.appendTo父()
插入操作, 插入到父元素的第一个元素
prepend
prependTo
兄弟之间
兄弟.after(要插入的兄弟元素)
要插入的兄弟元素.inserAfter(兄弟)
before
inserBefore
修改操作
$(selector).replaceWith(content);
replaceAll 替换所有
$('<p>哈哈哈</p>').replaceAll('h2');
删除操作
remove
删除节点后,事件也会删除
detach
删除节点后,事件会保留
empty
清空选中元素中所有的子元素
位置信息
width()
获取和设置宽度
height()
获取和设置高度
innerWidth()
获取内部宽,但不包括border
innerHeight()
outerWidth()
获取外部宽,包含所有
outerHeight()
offset()
获取(第一个元素)和设置元素的当前坐标
position()
获取匹配元素中的第一个元素的当前坐标
scrollLeft()
获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）
设置每个匹配元素的水平方向滚动条位置
scrollTop
获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）
设置每个匹配元素的垂直方向滚动条位置
对样式的操作
获取 : css('color')
设置 : css('font-size','30');
设置多个 : css({键值对})
核心
Write less Do More 写的少做的多
入口函数 ,区分和 window.onload 加载的区别
$(document).ready(fn)
$(function(){})
jquery的入口函数和window.onload()区别
执行的时机不同，jQuery的入口，一旦我dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成；window.onload 的是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
jQuery入口函数可以书写多次
window.onload只能书写一次
window.onload只能书写一次
js对象和jQuery对象的转化
将js对象转化成jQuery对象
$(js对象)
将jQuery对象转化成js对象
$(".box")[0]
jQuery是一个库,是由js封装过来的,所有js事包含jQuery的
选择器
基本选择器
ID选择器(#)
作用:选择ID为指定的第一个元素
类选择器(.)
作用 : 选择具有指定class类名的所有元素
标签选择器 (element)
作用 : 选择标签名为指定值得所有元素
通配符选择器 (*)
作用 : 选择所有元素
层级选择器
后代选择器 (空格表示)
作用 : 选择所有的后代元素
子代选择器 (>)
作用 : 选择所有的子代元素
基本过滤选择器
:eq(index)
index是从0开始的一个数字,选择序号是index的元素,选择第一个匹配的元素
$("li:eq(1)")
:gt(index)
选择序号大于index的元素
:lt(index)
选择小于index的元素
:odd
选择所有序号为奇数的元素
:even
选择所有序号为偶数的元素
:first
选择匹配第一个元素
:last
选择匹配的最后一个元素
筛选方法
find(selector)
查找指定元素的所有后代元素(包括孙子,重孙子.....)
$("#box").find("p")
children()
查找指定元素的直接子元素(亲儿子)
siblings()
查找所有兄弟元素(不包括自己)
使用它做选项卡
parent()
查找父元素(亲的)
eq(index)
查找指定元素的第index元素,index是索引
动画
普通动画(显示/隐藏)
show()
无参数 : 表示让指定的元素直接显示出来,(这个方法底层就是通过display:block,实现的)
show(2000) : 有参数,通过控制元素的宽高,透明度,display属性,逐渐显示,2秒后显示完毕
hide()
跟show() 相反
开关式的显示隐藏动画
toggle(3000,fn)
滑入/滑出,卷帘门效果
slideDown()
下拉动画,显示
slideUp()
上拉动画,隐藏
slideToggle()
开关式切换
淡入/淡出
fadeln(3000,callback)
让元素以淡淡的进入视线的方式展示出来
fadeOut(3000,callback)
让元素以渐渐消失的方式隐藏起来
fadeToggle(3000,callback)
开关式:通过改变透明度,切换匹配元素的显示或隐藏状态
自定义动画
语法 : $(selector).animate({params},speed,callback);
第一个参数 : 表示执行动画的css属性(必选)
第二个参数 : 表示执行动画的时长(可选)
第三个参数 : 表示动画执行完毕后,立即执行的回调函数(可选)
停止动画
$(selector).stop(true,false); 默认是(false,false)
注意 : 玩动画,先停止动画,在开启动画
html值得操作
html()
innerHTML实现,对文本和标签进行渲染
如果有参数表示设置值,
如果没有参数表示获取值
如果没有参数表示获取值
text()
innerText实现,只对文本进行渲染
如果有参数表示设置值,
如果没有参数表示获取值
如果没有参数表示获取值
val()
value的实现,只对标签中有value属性的有效,比如 input ....
如果有参数表示设置值,
如果没有参数表示获取值
如果没有参数表示获取值
比如 : img的属性 : src="./1.png"
key=src value=1.png
key=src value=1.png
html 标签属性操作
attr(key,value)
设置单个属性值
attr({key1:value,key2:value2})
对标签设置多个属性值
attr(key)
获取属性值
removeAttr()
删除某个属性
该操作只对标签中的属性操作,比如 ID , src , href , title.....
html 对象属性操作
prop()
对JS DOM对象属性操作,比如单选框中checked属性的设置
removeProp()
移除JSDOM对象属性
jQuery的事件
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()
状态机方法
readyState
0
为初始化 : 对象已经建立,单位初始化,open方法还未调用
1
初始化 : 对象已经建立,但是还未调用send()方法发送请求
2
发送数据 : send 方法已经调用,但HTTP头未知
3
数据传输中 : 已经接受部分数据,但响应不完全
4
完成 : 数据接受完成,此时才可以获取完整的返回数据
responseText
接收响应的文本内容
jQuery的ajax方法
get请求
$.ajax({
url:'api接口地址',
type:'get',
dataDype:'json',
success:function(data){
},
error:function(err){
}
})
url:'api接口地址',
type:'get',
dataDype:'json',
success:function(data){
},
error:function(err){
}
})
post请求
$.ajax({
url:'api接口地址',
type:'post',
data:{name:'张三'},
dataType:'json',
success:function(data){
},
error:function(err){
}
})
url:'api接口地址',
type:'post',
data:{name:'张三'},
dataType:'json',
success:function(data){
},
error:function(err){
}
})
0 条评论
下一页
