1.jQuery引入
<script src="js/jquery-1.12.4.js"></script>
2.jQuery入口函数
格式一:完整写法
$(document).ready(function(){
alert(1)
})
格式二:化简写法
$(function(){
alert(2)
})
3.jq选择器
$('#myId') 选择id为myId的网页元素
$('.myClass') 选择class为myClass的元素
$('li') 选择所有的li元素
$('#ul1 li span') 选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') 选择name属性等于first的input元素
对选择集进行过滤
$('div').has('p') 选择包含p元素的div元素
$('div').not('.myClass') 选择class不等于myClass的div元素
$('div').eq(5) 选择第6个div元素
$('div').eq(-2) 选择倒数第二个div元素
选择集转移
$('#box').prev() 选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll() 选择id是box的元素之前所有的同辈元素
$('#box').next() 选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll() 选择id是box的元素后面所有的同辈元素
$('#box').parent() 选择id是box的元素的父元素
$('#box').children() 选择id是box的元素的所有子元素
$('#box').siblings() 选择id是box的元素的同级元素
$('#box').find('.myClass') 选择id是box的元素内的class等于myClass的元素
4.自定义动画animate
格式:
$(目标|选择器).animate(字典形式写的css键值对,时间,运动曲线,回调函数)
css键值对:{属性:值, 属性:值, 属性:值……} 最重要的参数
时间:单位毫秒,不写的话,默认值600
运动曲线:seing linear……工作中不用
回调函数:是匿名函数,表示动画完成之后要执行的命令
5.jq控制html属性
1、html() 取出或设置html内容
格式:1.html() 取html的内容
2.html(内容) 更改html的内容
2、prop() 取出或设置某个属性的值
格式:1.prop(属性) 获取某个属性的值
2.prop(属性,值) 更改某个属性的值
3、attr() 取出或设置某个属性的值,可以是自定义的属性
格式:1.attr(属性) 获取某个属性的值
2.attr(属性,值) 更改某个属性的值
6.jq事件属性
blur() 元素失去焦点
focus() 元素获得焦点
click() 单击
mouseover() 鼠标进入,子集触发
mouseout() 鼠标离开,子集触发
mouseenter() 鼠标进入,子集不触发
mouseleave() 鼠标离开,子集不触发
hover(函数1, 函数2) 鼠标滑过
ready() DOM加载完成
submit() 用户递交表单触发
each() 同级元素循环