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() – 查找祖先级
${(}^{\prime }u{l}^{\prime }).children{(}^{\prime }l{i}^{\prime })--查找一级儿子（相当于$(‘ul>li’)）
${(}^{\prime }u{l}^{\prime }).find{(}^{\prime }l{i}^{\prime })--相当于后代选择器（$(‘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()设置或获取元素被卷曲的头部和左侧