jquery
2019-06-25 16:28:19 0 举报AI智能生成
jquery
作者其他创作
大纲/内容
核心
write less do more ：写得少做得多
入口函数，区分跟window，onload加载的区别
jsDOM对象和jquery对象的转化
将js对象转换成jquery对象
$(js对象)
将jquery对象转化成js对象
$('.box')[0]
大家心里一定要明白jquery是一个库，它是有js封装过来的，所以js是包含jquery的
jquery内部遍历
jquery每次调用完方法之后，会返回一个jquery对象，所以我们可以使用链式编程
jquery是一个高效，精简并且功能丰富的JavaScript工具库，他提供的API易于使用且兼容众多，如html文档遍历和操作、事件处理、动画和ajax操作更加简单
选择器
jquery的基本选择器
高级选择器
后代选择器（空格表示）
作用：选择所有的后代元素
子代选择器（>）
作用：选择所有的子代元素
基本过滤选择器
:eq(index)
index是从0开始的一个数字，选择序号为index的元素
:gt(index)
选择序号大于index的元素
:lt(index)
选择小于index的元素
:odd
选择所有序号为技术的元素
:even
选择所有序号为偶数的元素
:first
选择匹配第一个元素
:last
选择匹配的最后一个元素
筛选方法
find(selector)
查找指定元素的所有后代元素（包括子子孙孙）
children()
查找指定元素的直接元素（亲儿子）
siblings()
查找所有的兄弟元素（不包括自己）
使用它做选项卡
parent()
查找父级元素（亲的）
eg(index)
查找指定元素的第index元素，index是索引
动画
普通动画
show()
无参数，表示让指定的元素直接显示出来，其实这个方法底层就是通过display属性实现的
show(2000);有参数，通过控制元素的宽高，透明度，display属性，逐渐显示，2秒后显示完毕
hide()
根show反之
开关式的显示和隐藏动画
toggle(3000,fn)
滑入和滑出，卷帘门效果
slideDown()
下拉动画，显示
slideUP()
上拉动画，隐藏
slideToggle()
开关式切换
淡入淡出
fadeIn(3000,callback)
让元素以淡淡的进入视线的方式显示出来
fadeOut(3000,callback)
让元素以渐渐消失的方式隐藏起来
fadeToggle(3000,callback)
通过改变透明度，切换匹配元素的显示或隐藏状态
自定义动画
语法：$(selector).animate(params),speed,callback
第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数
停止动画
语法：$(select).stop(true,false);默认是(false,false)
记得：玩动画要先停止动画在开启动画
html值的操作
html()
innerHTML实现，对文本和标签进行渲染
如果有参数表示设置值，如果没有参数表示获取值，下面方法一样效果
text()
innerText实现，只对文本进行渲染
val()
value的实现，只对标签中有value属性的有效，比如input等
html标签属性操作
attr(key,value)
设置单个属性值
attr({key1:value1,key2:value2})
对标签设置多个属性值
attr(key)
获取属性值
该操作只对标签中属性操作，比如id，src，href，title等等
removeAttr()
删除某个属性
html对象属性操作
prop()
对于JSDOM对象属性操作，比如id，src，href，title等等
removeAttr()
移除JSDOM对象属性
jquery的事件
加载DOM
.ready()
将函数绑定到文档的就绪事件（当文档完成加载时）
jquery事件的绑定
.bind(type,[data],fn)
移除事件
.unbind(type,fn)
合成事件
hover事件
鼠标悬停事件.hover(handlerIn,handlerOut)
事件对象的常见属性
e.type
获取事件的类型
e.target
获取事件发生的DOM对象
e.pageX和e.pageY
获取到光标相对于页面的x坐标和y的坐标
e.which
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘的事件中获取键盘的按键，了解
事件冒泡
阻止事件冒泡
e.stopPropagation()方法
注意
1.return false在jquery中是既阻止事件冒泡又阻止默认行为
2.jquery不支持事件捕获
阻止默认行为
e.preventDefault()方法
鼠标事件
click
鼠标单击触发事件，参数可选（data，fn）
dbclick
双击触发，同上
mousedown（）/up()
鼠标按下弹起触发事件
mouseover/out()
鼠标移入移出事件
鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件
mouseenter()/leave()
鼠标进入/离开触发事件*
鼠标指针只在穿过/离开被选元素触发事件
focus()/blur()
鼠标聚焦/失去焦点触发事件（不支持冒泡）
keydown/up()
键盘按键按下/弹起触发
表单事件
change()
表单元素发生改变时触发事件
此事件仅限于<input>元素，<textarea>框和<select>元素
对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件，但对其他元素类型，事件将延迟到元素失去焦点
select()
文件元素发生改变时触发事件
此事件仅限于input type类型为text和textarea表单元素
submit()
表单元素发生改变时触发事件
form表单 有默认的submit行为，当对input type=submit按钮进行点击的时候会触发form的默认action行为，此时可以调用jquery的submit方法通过e.preventDefault()来阻止默认时间，这样我们就能动态的跟服务端来发送数据了
DOM操作
插入操作，插入到子元素的最后一个父子之间
父.append(子)
子.appendTo(父)
插入操作，插入到父元素中的第一个元素
prepend
prependTo
兄弟之间
兄弟.after（要插入的兄弟）
要插入的兄弟.insertAfter(兄弟)
before
inserBefore
替换操作
$(selector).replaceWith(content);
replacrAll：替换所有
$('<p>哈哈哈</p>').replaceAll('h2');
删除操作
remove
删除节点后，事件也删除
detach
删除节点后，事件会保留
empty
清空选中元素中的所有的子元素
ajax技术
ajax技术
对类的操作
addClass
removeClass
位置信息
0 条评论
下一页
