jQuery
1.页面DOM加载完毕后在执行js代码
<script>
//1.方式1
$(document).ready(function(){
$('div').hide();
}}
//2.方式2
$(function(){
$('div').hide();
})
//相当于原生js中的DOMContentLoaded;不同于原生js中的load事件
//$是jQuery的顶级对象
</script>
<div></div>
2.jq对象与DOM对象互换
<div></div>
<script>
//1.jq对象转换成DOM对象
$('div')[0].hide()
$('div').get(0).hide()
//2.DOM对象转换成jq对象
var divBox = document.querySelector('div')
$(divBox ).hide()
</script>
3.常用的API
(1)jq的选择器 - $(‘选择器’)
筛选选择器:
$(‘ul li:first’) – 获取ul下面的第一个li元素
$('li:last ')-- 获取最后一个li元素
$(‘li:eq(2)’) – 获取到li元素中,选择索引号为2的元素,索引号从0开始
$(‘li:odd’) – 获取到li元素中,选择索引号为奇数的元素
$(‘li:even’) – 获取到li元素中,选择索引号为偶数的元素
//查找父子兄弟的筛选方法:
$(‘li’) .parent() – 查找父级
$(‘li’) .parents() – 查找祖先级
(
′
u
l
′
)
.
c
h
i
l
d
r
e
n
(
′
l
i
′
)
−
−
查找一级儿子(相当于
('ul') .children('li') -- 查找一级儿子(相当于
(′ul′).children(′li′)−−查找一级儿子(相当于(‘ul>li’))
(
′
u
l
′
)
.
f
i
n
d
(
′
l
i
′
)
−
−
相当于后代选择器(
('ul') .find('li') -- 相当于后代选择器(
(′ul′).find(′li′)−−相当于后代选择器((‘ul li’))
$(‘.one’) .siblings(‘li’) – 查找兄弟节点,不包括自己本身
$(‘.one’) .nextAll(‘li’) – 查找当前元素之后所有的同辈元素
$(‘.one’) .preAll(‘li’) – 查找当前元素之前所有的同辈元素
$(‘.one’) .hasClass(‘container’) – 查找当前元素是否包含有某个特定的类,如果有,则返回true
$(‘li’) .eq(2)-- 获取到li元素中,选择索引号为2的元素,索引号从0开始
(2)jq设置样式 - $(‘选择器’).css(‘属性’,‘值’)
隐式迭代:就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法
a.
//如果有多个样式,可以采用对象的方式来进行修改,此时的属性名才可以不用加引号
$(‘div’).css({
width:400, //等于400px
height:300,
backgroundColor:“red”, //如果是如何属性则必须采用小驼峰命名法,如果值不是数字则需要加引号
})
b.设置类样式方法
//添加类
$(‘div’).addClass(‘类名’)
//删除类
$(‘div’).removeClass(‘类名’)
//切换类
$(‘div’).toggleClass(‘类名’)
(3)jq的动画效果
显示隐藏:
show([speed,[easing],[fn]])
hide()
toggle()
滑动:
slideDowm()
slideUp()
slideToggle()
淡入淡出:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
自定义动画:
animate()
hover(function(){},function(){}) //第一个是鼠标移入时的回调函数,第二个是鼠标移出是的回调函数
(4)属性操作
//获取属性值
$(‘a’).prop(‘属性’)
//设置属性语法
$(‘a’).prop(‘属性’,‘属性值’)
//设置或者修改自定义属性 attr()
//数据缓存 data() – 这个里面的数据是存放在元素的内存里面;也可以获取到h5里面的data-自定义属性
(5)jq的内容文本值
html() //获取元素的内容(相当于原生innerHTML)
text() //(相当于原生innerText)
val() //获取表单值(相当于value)
(6)元素操作
(7)尺寸方法
.width() 获取元素width大小
.height() 获取元素height大小
.innerWidth() 获取元素大小 width+padding
.outerWidth(true)设置width+padding+border+margin
.offset()获取设置距离文档的位置
.position()获取距离带有定位父级位置(偏移),如果没有带有定位的父级,则以文档为准
.scrollTop().scrollLeft()设置或获取元素被卷曲的头部和左侧