目录
jQuery选择器
jQuery基础选择器
$("选择器")//里面选择器直接写css选择器即可，但要加引号jQuery层级选择器
$("ul>li")
//子代选择器，使用>只获取亲儿子层级的元素，不获取孙子级的元素
$("ul li")
//后代选择器，获取ul下的所有li元素，包括孙子jQuery设置样式
$('div').css('属性','值')隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程即为隐式迭代
不需要我们手动for循环，在匹配中就给所有元素进行了循环遍历，执行相应的方法
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $('li:eq(2)') | 获取到的li元素中，选择索引号为2的元素，索引号index是从0开始的 |
| :odd | $('li:odd') | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $('li:even') | 获取到的li元素中，选择索引号为偶数的元素 |
jQuery筛选方法
找指定祖先级元素
//.parents()方法
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
console.log($(".four").parents(".one"));
</script>
</body>排他思想
利用sibling()查找兄弟节点来操作
<script>
$(function () {
$('button').on('click', function () {
$(this).css('background', 'pink')
// 当前元素背景变色
$(this).siblings('button').css('background', '')
// 当前元素的其他兄弟背景色去除
})
})
</script>链式编程
<script>
$(function () {
$('button').on('click', function () {
/* $(this).css('color', 'red')
$(this).siblings('button').css('color', '') */
$(this).css('color', 'red').siblings('button').css('color', '')
// 链式编程
})
})
</script>jQuery样式操作
操作css方法
$(function () {
console.log($('div').css('width'))
// 参数只写属性名，则返回属性值
// $('div').css('width', '400px')
$('div').css('width', 500)
// 修改样式，属性名必须加引号，属性值若是数字可不加单位和引号
$('div').css('color', 'blue')
// 添加样式
$('div').css({
width: 100,
height: 100
})
//参数可以是对象，方便设置多组样式，但属性之间要加逗号隔开，属性名可以不加引号
})设置类样式方法
添加（追加）类
$('要操作的元素').addClass('类名')
//$('div').addClass('current')删除类
$('要操作的元素').removeClass('类名')
//$('div').removeClass('pink')切换类
$('要操作的元素').toggleClass('类名')
//$('div').toggleClass('pink')jQuery动画效果
显示
$('操作的元素').show()
//show([speed,[easing],[fn]])隐藏
$('操作的元素').hide()
//hide([speed,[easing],[fn]])切换
$('操作的元素').toggle()
//toggle([speed,[easing],[fn]])下滑动
$('操作的元素').slideDown()
//slideDown([speed,[easing],[fn]])上滑动
$('操作的元素').slideUp()
//slideUp([speed,[easing],[fn]])切换滑动
$('操作的元素').slideToggle()
//slideToggle([speed,[easing],[fn]])（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可。
事件切换
hover([over,]out)（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它
<script>
/* $(function () {
$('.nav>li').hover(function () {
$(this).children('ul').slideDown(300)
}, function () {
$(this).children('ul').slideUp(300)
})
}) */
// 事件切换hover(),在hover()中写两个function函数，即可代表鼠标进过和鼠标离开事件
$(function () {
$('.nav>li').hover(function () {
$(this).children('ul').slideToggle(300)
})
})
</script>动画队列及其停止排队方法
动画或效果队列:动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队
//stop()
<script>
$(function () {
$(".nav>li").hover(function () {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>(1）stop() 方法用于停止动画或效果。
(2) 注意： stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
淡入，淡出，切换，不透明度
<script>
$(function () {
$("button").eq(0).click(function () {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function () {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function () {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function () {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
</script>自定义动画
//语法：animate(params,[speed],[easing],[fn])
$('div').animate({
left: 500,
top: 300,
width: 100,
height: 100,
opacity: 0.5
})（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
jQuery属性操作
设置或获取元素固有属性值
获取属性语法
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<script>
$(function () {
console.log($('a').prop('href'))
// 获取固有属性
})
</script>
</body>设置属性语法
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<script>
$(function () {
$('a').prop('title', '1111')
// 修改固有属性
</script>
</body>设置或获取元素自定义属性值
获取属性语法
<body>
<div index="2">我是div</div>
<script>
$(function () {
console.log($('div').attr('index'))
// 获取自定义属性
})
</script>
</body>设置属性语法
<body>
<div index="2">我是div</div>
<script>
$(function () {
$('div').attr('index', 3)
// 修改自定义属性
})
</script>
</body>jQuery内容文本值
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
$(function () {
console.log($('div').html())
// 获取元素内容，把标签一起获取过来
$('div').html('<a href="">点击</a>')
// 可以连带着标签一起换
console.log($('div').text())
// 只获取标签内的文本内容
$('div').text('123')
// 也可以连带着标签一起换
$('span').text('123')
// 修改标签内的文本内容
console.log($('input').val())
// 获取表单的值
$('input').val('1111')
// 设置表单的值
})
</script>jQuery元素操作
遍历元素
语法1：$("div").each(function(index, domEle) { xxx; }）
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
var arr = ['red', 'blue', 'pink']
var num = 0
$('div').each(function (index, domEle) {
console.log(index)
// 遍历成为数组，index是索引号
console.log(domEle)
// domEle是dom对象
// $(domEle) 将获得的dom对象转换为jQuery对象
$(domEle).css('color', arr[index])
// 遍历让每个元素的样式变为指定的不同样式
num = parseInt($(domEle).text()) + num
// 求和，遍历获取每个div中的数据相加
})
console.log(num)
})
</script>
</body>
each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
里面的回调函数有2个参数： index是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法二：$.each(object，function(index, element){ xxx;}）
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
var arr = ['red', 'blue', 'pink']
var data = {
name: "andy",
age: 18
}
// 遍历语法二 ---主要用于遍历数组和对象
$.each($('div'), function (index, domEle) {
console.log(index)
console.log(domEle)
})
// 遍历元素
$.each(arr, function (index, domEle) {
console.log(index)
console.log(domEle)
})
// 遍历数组
$.each(data, function (index, domEle) {
console.log(index) //对象中的属性名
console.log(domEle) //对象中的属性值
})
// 遍历对象
})
</script>
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数： index是每个元素的索引号; element 遍历内容
创建添加删除元素
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function () {
var li = $('<li>我是后来添加的</li>')
var div = $('<div>后加的div</div>')
// 创建元素
$('ul').append(li)
// 添加元素-内部添加-添加到最后面
$('ul').prepend(li)
// 添加元素-内部添加-添加到最前面
// 内部添加之后被添加的元素和添加的元素是父子关系
// $('div').after(div)
// 添加元素-外部添加-添加到匹配元素后面
$('div').before(div)
// 添加元素-外部添加-添加到匹配元素前面
// 外部添加之后匹配元素与添加的元素是兄弟关系
// $('ul').remove()
// 删除匹配的元素本身，ul被删除
// $('ul').empty()
// 删除的是匹配元素的子节点，ul还在，但ul的子集li都被删掉
$('ul').html('')
// 与$('ul').empty()功能一样
})
</script>
</body>jQuery尺寸，位置操作
jQuery尺寸
<div></div>
<script>
$(function () {
console.log($('div').width())
// width() / height() 获取元素的 width和heigh 的大小
// $('div').width(300)
// 填写参数，即修改宽高值
console.log($('div').innerWidth())
// innerWidth() / innerHeight() 获取元素 width和heigh + padding 的大小
console.log($('div').outerWidth())
// outerWidth() / outerHeight() 获取元素 width和heigh + padding + border 的大小
console.log($('div').outerWidth(true))
// outerWidth(true) / outerHeight(true) 获取元素 width和heigh + padding + border + margin 的大小
})
</script>jQuery位置操作
offset() 和 positio()
<script>
$(function () {
console.log($('.son').offset());
// 获取该元素距离文档的位置（偏移量）
console.log($('.son').offset().top);
/* $('.son').offset({
left: 200,
top: 200
})
// 修改该元素的偏移量 */
console.log($('.son').position())
console.log($('.son').position().top)
// 获取子节点到有定位的父级之间的偏移量，只能获取不能设置偏移量
})
</script>scrollTop()和scrollleft()
console.log($(document).scrollTop()) //获取页面滚动时头部被卷去的距离
3114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
