-
主要内容
- jQuery入口函数
- 什么是'$'?
- dom对象与jQuery对象相互转化
- jQuery选择器
- jQuery类操作
- jQuery动画
- jQuery部分方法
- jQuery属性操作
- jQuery节点操作
- jQuery事件
jQuery入口函数
①方法一
$(document).ready(function(){
...
});
②方法二
$(function(){
...
});
<script>
$(function(){
console.log('第一个入口函数');
});
$(document).ready(function(){
console.log("第二个入口函数");
});
</script>
什么是'$'?
$是一个函数
①当参数为函数时，为入口函数
$(function(){})
②当参数为字符串时，为选择器/创建一个标签
$('#tag')
$('<div></div>')
③当参数为dom对象，就会把dom对象转化成jQuery对象
$(dom对象)
dom对象是原生js选择器获取到的对象
jQuery对象是利用jQuery选择器获取到的对象，只能调用jQuery方法和属性，不能使用原生js的方法或属性
dom对象与jQuery对象相互转化
dom对象转化成jQuery对象
var div = document.getElemById("one")
var $div = $(div)
jQuery对象转化成dom对象
1、使用下标取出来
var $divs = $(div)
var div_1 = $divs[0]
2、使用jQuery的get()
var $divs = $(div)
var div_1 = $div.get(0)
jQuery选择器
基本选择器（跟css选择器用法一样）
ID选择器：$('#id')
类选择器：$('.class')
标签选择器：$('div')
并集选择器：$('div,p')
交集选择器：$('div.Class')
层级选择器（跟css选择器用法一样）
子代选择器：$('ul > li')
后代选择器：$('ul li')
过滤选择器
:eq(index)：$('div:eq(2)') //获取到div元素中索引号为2的元素，index从0开始
:odd：$('div:odd') //获取到div元素中索引号为奇数的所有元素
:even：$('div:even') //获取到div元素中索引号为偶数的所有元素
筛选选择器
children(selector)：$('ul').children('li') //相当于$('ul-li')
find(selector)：$('ul').find('li') //相当于$('ul li')
sibling(selector)：$('#first').sibling('li') //查找兄弟节点不包括自身
parent()：$('#first').parent() //查找父节点
eq(index)：$('div').eq(2) //相当于$('div:eq(2)')
next()：$('div').next() //下一个兄弟节点
prev()：$('div').prev() //上一个兄弟节点
jQuery类操作
addClass()： $('div').addClass('类名1 类名2 ...') //给所有div添加类
removeClass()：$('div').removeClass('类名1 类名2 ...') //移除div指定的类，不加参数默认移除所有类
hasClass()：$('div').hasClass('类名') //判断div是否含有指定的类
toggleClass()：$('div').toggleClass('类名') //如果元素有指定的类则移除，如果没有则添加
jQuery动画
show(speed,callback) //显示元素，不加参数没有动画效果，display设置为block
hide(speed,callback) //隐藏元素，不加参数没有动画效果，display设置为none
slideDown(speed,callback) //滑入
slideUp(speed,callback) //滑出
slideToggle(speed,callback) //切换滑出/入
fadeIn(speed,callback) //淡入
fadeOut(speed,callback) //淡出
fadeToggle(speed,callback) //切换淡出/入
fadeTo(speed,to) //淡入到指定透明度
speed：执行动画的时长
callback：动画执行完毕后的回调函数
自定义动画
$('div').animate(prop,speed,easing,callback)
prop：必选的对象，表示需要做动画的属性
speed：可选，执行动画的时长
easing：可选，表示缓动还是匀速 linear swing
callback：可选，执行完毕后的回调函数
停止动画
$('div').stop(true,false)
第一个参数：是否清除动画队列
第二个参数：是否跳转到最终结果
jQuery部分方法
设置/获取文本
①设置
$('div').text("设置文本")
②获取
$('div').text() //将获取所有div的文本内容
设置/获取样式
①设置
设置单样式
$('div').css('color','blue')
设置多样式
$('div').css({
'height':'100px',
'width':'200px'
})
②获取
$('div').css('color') //只能获取到第一个div的样式值
尺寸和位置操作
$('#Elem').width() //获取宽度，不包括padding/margin/border
$('#Elem').width(value) //设置宽度，不包括padding/margin/border
$('#Elem').height() //获取高度，不包括padding/margin/border
$('#Elem').height(value) //设置高度，不包括padding/margin/border
$('#Elem').innerWidth()/innerHeight() //返回元素宽度/高度，包括内边距
$('#Elem').outerWidth()/outerHeight() //返回元素宽度/高度，包括内边距和边框
$('#Elem').outerWidth(true)/outerHeight(true) //返回元素宽度/高度，包括内边距、外边距和边框
$(window).width()/heigth() //返回页面可视区域宽高
$('#Elem').offset() //获取一个对象，对象包括top和left的值,元素到document的距离
$('#Elem').position() //获取一个对象，对象包括top和left的值，元素到定位父级的距离
获取/设置滚动条位置
$('#Elem').scrollLeft()/scrollTop() //获取元素内容/页面（window）被卷曲出去的宽度/高度
$('#Elem').scrollLeft(value)/scrollTop(value) //设置元素内容/页面（window）被卷曲出去的宽度/高度
获取/设置表单值
①获取
$('#txt').val()
②设置
$('#txt').val("设置的值")
jQuery属性操作
非布尔属性（不能操作布尔属性）
$('#Elem').attr(属性,属性值) //设置/修改属性，可以用对象设置多属性
$('#Elem').attr(属性) //获取属性值
$('#Elem').removeAttr(属性) //移除属性，可以同上移除多个属性，属性间用空格隔开
操作布尔属性
$('#Elem').prop(布尔属性) //获取属性值
$('#Elem').prop(布尔属性,布尔值) //获取属性值
jQuery节点操作
$('div').html() //设置/获取内容
①获取
$('div').html() //不加参数
②设置
$('div').html(文本/html标签) //会覆盖原本内容
$() //创建节点
$div = $(<div>新创建的div</div>)
$('#first').append($div) //添加节点
添加/移动节点
$('#Elem').append($div) //添加到子节点最后一个位置
$('#Elem').prepend($div) //添加到子节点第一个位置
$('#Elem').before($div) //添加兄弟节点到#Elem前面
$('#Elem').after($div) //添加兄弟节点到#Elem后面
$($div).appendTo('#Elem') //添加到#Elem的最后一个子节点后面
删除节点
$('#Elem').empty() //清空#Elem的所有子节点
$('#Elem').remove() //移除#Elem元素
克隆节点
$('#Elem').clone(true) //克隆#Elem,参数为true则会克隆事件，默认是false
jQuery事件
事件注册
$('#Elem').on('事件',函数) //简单注册事件，不支持动态注册
$('#Elem-parent').on('事件','#Elem',函数) //委托注册事件，支持动态注册
<script>
$(function(){
//简单注册事件
$('div').eq(0).on('click',function(){
console.log('点击了div标签');
})
//委托事件
$('div').eq(0).on('click','input',function(){
console.log('点击了input标签');
})
});
</script>
事件解绑
$('#Elem').off('事件') //不给参数默认解绑所有事件
事件触发
$('#Elem').trigger('事件') //触发#Elem元素指定的事件，可触发自定义事件
事件对象(e)
e.screenX/Y：触发事件那一点距离屏幕最左上角的值
e.clientX/Y：触发事件那一点距离可视区左上角的值
e.pageX/Y：触发事件那一点距离页面左上角的值
阻止事件冒泡：e.stopPropagation()
阻止默认行为：e.preventDefaule()
获取键盘按下的键：e.keyCode()
<script>
$(function(){
$('div').eq(0).on('click',function(e){
console.log(e);
})
});
</script>链式编程
使用条件：元素调用一个方法，这个方法有返回值，并且返回值是一个jQuery对象，就可以继续调用jQuery方法
$('#Elem').end() //回到上一个状态(上一个对象)
显示迭代
<script>
$(function(){
$('li').each(function(index,elem){
console.log(index) //每个div标签的索引
console.log(elem) //每个div标签，dom对象
})
});
</script>
