1、选择器
基本
:first :last :even :odd :not :eq()
内容
contains 内容包含某某某的节点
has 写一个选择器，
$('li:has(a)') li里面有a的li
属性
input[name] 有属性name的input
input[name=user] name属性等于user的input
input[name!=user] name属性不等于user的input
// 有属性name的input
// $('input[name]').css('backgroundColor', 'cyan')
// 属性name值为user的input
// $('input[name=user]').css('backgroundColor', 'cyan')
// 属性name值不为user的input
// $('input[name!=user]').css('backgroundColor', 'cyan')
// 属性name值以user开头的input
// $('input[name^=user]').css('backgroundColor', 'cyan')
// 属性name值以user结束的input
// $('input[name$=user]').css('backgroundColor', 'cyan')
子元素
:first-child
:last-child
:nth-child
// 找到li标签，li是第一个儿子节点的li标签
// $('li:first-child').css('backgroundColor', 'cyan')
// 找到li标签，li是最后一个儿子节点的li标签
// $('li:last-child').css('backgroundColor', 'cyan')
// 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
// $('li:nth-child(1)').css('backgroundColor', 'cyan')
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li>黄晓明</li>
<li>关晓彤</li>
<li>李小龙</li>
<li>李小璐</li>
<li>高晓松</li>
<li><a href="#">陈妍希</a></li>
</ul>
<ol>
<!-- <b>桃谷绘里香</b> -->
<li>苍老师</li>
<li>小泽玛利亚</li>
<li>波多野结衣</li>
<li>大桥未久</li>
<li>泷泽萝拉</li>
</ol>
<div>那些年我们一起追过的女孩</div>
<input type="text" name="user">
<input type="password" name="userpwd">
<!-- <input type="checkbox" name="like">
<input type="radio" name="sex"> -->
<input type="text">
</body>
</html>
<script>
$(function () {
// $('li:contains("晓")').css('backgroundColor', 'cyan')
// 找li标签，li标签里面有a的节点
// $('li:has(a)').css('backgroundColor', 'cyan')
// 找ul标签，里面有a的节点，不论层级
// $('ul:has(a)').css('backgroundColor', 'cyan')
// 有属性name的input
// $('input[name]').css('backgroundColor', 'cyan')
// 属性name值为user的input
// $('input[name=user]').css('backgroundColor', 'cyan')
// 属性name值不为user的input
// $('input[name!=user]').css('backgroundColor', 'cyan')
// 属性name值以user开头的input
// $('input[name^=user]').css('backgroundColor', 'cyan')
// 属性name值以user结束的input
// $('input[name$=user]').css('backgroundColor', 'cyan')
// 找到li标签，li是第一个儿子节点的li标签
// $('li:first-child').css('backgroundColor', 'cyan')
// 找到li标签，li是最后一个儿子节点的li标签
// $('li:last-child').css('backgroundColor', 'cyan')
// 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
// $('li:nth-child(1)').css('backgroundColor', 'cyan')
})
</script>
2、样式添加、属性获取
css({})
// 可以连写-链式操作
// $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
// 可以传递一个js对象，直接全部修改
// $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
attr()
// 获取指定节点的class属性
// console.log($('#lala').attr('class'))
// 只能获取第一个符合要求的id属性
// console.log($('.libai').attr('id'))
// 通过eq选择第二个符合要求的id属性
// console.log($('.libai:eq(1)').attr('id'))
// 给指定节点添加属性
// $('#lala').attr('class', 'bai').attr('name', '狗蛋')
removeAttr()
// 将指定节点的属性删除
// $('#lala').removeAttr('class')
prop()
经常用来设置checked、selected等属性，设置的值就是true、false
// 所有下标大于1的多选框选中
// $('input:gt(1)').prop('checked', true)
// 将第二个下拉框设置为默认选中
// $('#se > option:eq(2)').prop('selected', true)
addClass
// $('#lala').addClass('hei')
removeClass
// 给指定的节点添加类名
// $('#lala').addClass('hei')
// 给指定的节点移除指定的节点class名 bai
// $('#lala').removeClass('bai')
toggleClass
// 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
// $('#lala').toggleClass('bai')
html()
// 读取或者设置节点内容，和innerHTML功能相同
// console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))
text()
读取或者设置节点内容，和innerText功能相同
val()
// 读取input框里面的内容
// console.log($('#ip').val())
// 设置input框里面的内容
// console.log($('#ip').val('今天中午吃什么呢？'))
width()
height()
// 读取指定对象宽度 不带px
// console.log($('#dudu').width())
// 设置宽度 不带px
// console.log($('#dudu').width(300))
// 读取高度
// console.log($('#dudu').height())
// 设置高度
// console.log($('#dudu').height(400))
offset()
// 获取div的top值和left值
// console.log($('#dudu').offset().top, $('#dudu').offset().left)
样式与属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>样式和属性</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
<style>
#dudu {
width: 400px;
height: 500px;
background-color: pink;
position: absolute;
top: 100px;
left: 300px;
}
</style>
</head>
<body>
<div id="lala" class="">
<b>
朝辞白帝彩云间
千里江陵一日还
两岸猿声啼不住
轻舟已过万重山
</b>
</div>
<div class="libai" id="laowang">
李白乘舟将欲行
忽闻岸上踏歌声
桃花潭水深千尺
不及汪伦送我情
</div>
<li><input type="checkbox">抽烟</li>
<li><input type="checkbox">喝酒</li>
<li><input type="checkbox">烫头</li>
<li><input type="checkbox">足疗</li>
<select name="" id="se">
<option value="">请选择</option>
<option value="">四川</option>
<option value="">河南</option>
<option value="">云南</option>
</select>
<input id="ip" type="text" value="请输入用户名哈哈">
<div id="dudu"></div>
</body>
</html>
<script>
$(function () {
// 可以连写-链式操作
// $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
// 可以传递一个js对象，直接全部修改
// $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
// 获取指定节点的class属性
// console.log($('#lala').attr('class'))
// 只能获取第一个符合要求的id属性
// console.log($('.libai').attr('id'))
// 通过eq选择第二个符合要求的id属性
// console.log($('.libai:eq(1)').attr('id'))
// 给指定节点添加属性
// $('#lala').attr('class', 'bai').attr('name', '狗蛋')
// 将指定节点的属性删除
// $('#lala').removeAttr('class')
// 所有下标大于1的多选框选中
// $('input:gt(1)').prop('checked', true)
// 将第二个下拉框设置为默认选中
// $('#se > option:eq(2)').prop('selected', true)
// 给指定的节点添加类名
// $('#lala').addClass('hei')
// 给指定的节点移除指定的节点class名 bai
// $('#lala').removeClass('bai')
// 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
// $('#lala').toggleClass('bai')
// 读取或者设置节点内容，和innerHTML功能相同
// console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))
// console.log($('#lala').text())
// console.log($('#lala').html())
// 读取input框里面的内容
// console.log($('#ip').val())
// 设置input框里面的内容
// console.log($('#ip').val('今天中午吃什么呢？'))
// 读取指定对象宽度 不带px
// console.log($('#dudu').width())
// 设置宽度 不带px
// console.log($('#dudu').width(300))
// 读取高度
// console.log($('#dudu').height())
// 设置高度
// console.log($('#dudu').height(400))
// 获取div的top值和left值
// console.log($('#dudu').offset().top, $('#dudu').offset().left)
})
</script>
3、js对象和jquery对象转化
js对象和jquery对象的函数不能通用
js对象和jquery对象相互转化
// var odiv = document.getElementById('dudu')
// js对象转化jquery对象
// console.log($(odiv).width())
// jquery对象转化为js对象
// console.log($('#dudu')[0].style.width)
// console.log($('.lala')[1].style.width)
js和jquery转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相互转化</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="dudu" class="lala" style="width:300px; height:400px; background-color: purple;"></div>
<div class="lala" style="width:200px; height:400px; background-color: orange;"></div>
</body>
</html>
<script>
$(function () {
// var odiv = document.getElementById('dudu')
// js对象转化jquery对象
// console.log($(odiv).width())
// jquery对象转化为js对象
// console.log($('#dudu')[0].style.width)
// console.log($('.lala')[1].style.width)
})
</script>
4、文档处理
append
appendTo
prepend
prependTo
// 向父节点添加子节点
// $('#car').append('<li>本田飞度</li>')
// 通过子节点调用，添加到父节点
// $('<li>本田飞度</li>').appendTo($('#car'))
// 通过父节点调用，添加到父节点的最前面
// $('#car').prepend('<li>本田飞度</li>')
// 通过子节点调用，添加到父节点的最前面
// $('<li>通用别克</li>').prependTo($('#car'))
after
before
// 是兄弟节点关系，在mao节点后面添加一个指定节点
// $('#mao').after('<li>铃木雨燕</li>')
// 是兄弟节点关系，在mao节点前面添加一个指定节点
// $('#mao').before('<li>铃木雨燕</li>')
empty
remove
// 清空指定节点里面的内容，节点还在
// $('#mao').empty()
// 原生js中：父节点.removeChild(子节点)
// 通过子节点直接调用，删除当前节点
// $('#mao').remove()
文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文档处理</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul id="car">
<li>长安奔奔</li>
<li>五菱宏光</li>
<li id="mao">吉利熊猫</li>
<li>大众捷达</li>
<li>丰田卡罗拉</li>
<li>奇瑞qq</li>
</ul>
</body>
</html>
<script>
$(function () {
// 向父节点添加子节点
// $('#car').append('<li>本田飞度</li>')
// 通过子节点调用，添加到父节点
// $('<li>本田飞度</li>').appendTo($('#car'))
// 通过父节点调用，添加到父节点的最前面
// $('#car').prepend('<li>本田飞度</li>')
// 通过子节点调用，添加到父节点的最前面
// $('<li>通用别克</li>').prependTo($('#car'))
// 是兄弟节点关系，在mao节点后面添加一个指定节点
// $('#mao').after('<li>铃木雨燕</li>')
// 是兄弟节点关系，在mao节点前面添加一个指定节点
// $('#mao').before('<li>铃木雨燕</li>')
// $('#mao').insertAfter('<li>铃木雨燕</li>')
// 清空指定节点里面的内容，节点还在
// $('#mao').empty()
// 原生js中：父节点.removeChild(子节点)
// 通过子节点直接调用，删除当前节点
// $('#mao').remove()
})
</script>
5、筛选和查找
eq
// $('li').eq(n).css('backgroundColor', 'red')
// $('li:eq(0)').css('backgroundColor', 'red')
// $('li:eq(' + 0 + ')').css('backgroundColor', 'red')
first
last
// 第一个li 和:first 一模一样
// $('li').first().css('backgroundColor', 'red')
// 最后一个li 和:last 一模一样
// $('li').last().css('backgroundColor', 'red')
hasClass
// 判断有没有这个class,有就返回true，没有返回false
// console.log($('li').eq(0).hasClass('wang'))
filter
// 找到所有li，过滤出来 .jing 的这些li
// $('li').filter('.jing').css('backgroundColor', 'cyan')
slice
// 取出符合要求li里面的第0个和第1个 [start, end)
// $('li').slice(0, 2).css('backgroundColor', 'cyan')
children
// 所有的儿子节点
// $('#nan').children().css('backgroundColor', 'red')
// 儿子节点中 有 .feng 的节点
// $('#nan').children('.feng').css('backgroundColor', 'red')
find
// 去子孙节点中查找所有的 .feng 的节点
// $('#nan').find('.feng').css('backgroundColor', 'cyan')
next
nextAll
// 指定对象的下一个兄弟节点
// $('#wu').next().css('backgroundColor', 'cyan')
// 指定对象的后面所有的节点
// $('#wu').nextAll().css('backgroundColor', 'cyan')
prev 指定对象的上一个兄弟节点
prevAll 指定对象的上面所有的兄弟节点
parent
parents
// 找到当前节点的父节点
// $('.lin').parent().css('backgroundColor', 'cyan')
// 查找得到所有的上层节点
// $('#qing').parents().css('backgroundColor', 'cyan')
// 查找得到指定的上层节点
// $('#qing').parents('div').css('backgroundColor', 'cyan')
siblings
// 查找qing节点所有的兄弟节点
// $('#qing').siblings().css('backgroundColor', 'orange')
// 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点
// $('#qing').siblings('.lin').css('backgroundColor', 'orange')
过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>筛选和查找</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li class="jing">王静</li>
<li>闫晓红</li>
<li class="jing">刘慧芳</li>
<li>李琳</li>
</ul>
</body>
</html>
<script>
$(function () {
// var n = 1
// 选中第几个，eq里面可以写一个变量
// $('li').eq(n).css('backgroundColor', 'red')
// $('li:eq(0)').css('backgroundColor', 'red')
// $('li:eq(' + 0 + ')').css('backgroundColor', 'red')
// 第一个li 和:first 一模一样
// $('li').first().css('backgroundColor', 'red')
// 最后一个li 和:last 一模一样
// $('li').last().css('backgroundColor', 'red')
// 判断有没有这个class,有就返回true，没有返回false
// console.log($('li').eq(0).hasClass('wang'))
// 找到所有li，过滤出来 .jing 的这些li
// $('li').filter('.jing').css('backgroundColor', 'cyan')
// 取出符合要求li里面的第0个和第1个 [start, end)
// $('li').slice(0, 2).css('backgroundColor', 'cyan')
})
</script>
查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>查找</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<ul id="nan">
<li id="guan">陈冠希</li>
<li id="wu">吴彦祖</li>
<li class="feng">谢霆锋</li>
<li>梁朝伟</li>
<li>李云龙</li>
<ol>
<li class="lin">关之琳</li>
<li class="feng">林青霞</li>
<li>王祖贤</li>
</ol>
</ul>
</div>
<div>
<ul>
<li>李白</li>
<li>杜甫</li>
<li>白居易</li>
</ul>
<ol>
<li id="qing">李清照</li>
<li class="lin">苏轼</li>
<li>王安石</li>
<li class="lin">苏小妹</li>
</ol>
</div>
</body>
</html>
<script>
$(function () {
// 所有的儿子节点
// $('#nan').children().css('backgroundColor', 'red')
// 儿子节点中 有 .feng 的节点
// $('#nan').children('.feng').css('backgroundColor', 'red')
// 去子孙节点中查找所有的 .feng 的节点
// $('#nan').find('.feng').css('backgroundColor', 'cyan')
// 指定对象的下一个兄弟节点
// $('#wu').next().css('backgroundColor', 'cyan')
// 指定对象的后面所有的节点
// $('#wu').nextAll().css('backgroundColor', 'cyan')
// 指定对象的上一个兄弟节点
// $('#guan').prev().css('backgroundColor', 'cyan')
// 找到当前节点的父节点
// $('.lin').parent().css('backgroundColor', 'cyan')
// 查找得到所有的上层节点
// $('#qing').parents().css('backgroundColor', 'cyan')
// 查找得到指定的上层节点
// $('#qing').parents('div').css('backgroundColor', 'cyan')
// 查找qing节点所有的兄弟节点
// $('#qing').siblings().css('backgroundColor', 'orange')
// 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点
// $('#qing').siblings('.lin').css('backgroundColor', 'orange')
})
</script>
6、事件
添加事件
$('div).click(function () {})
事件绑定
on off one
绑定事件
$('div').on('click', test1)
$('div').on('click', test2)
取消事件绑定
$('div').off('click', test2)
// 事件只能触发一次
$('div').one('click', test2)
取消冒泡
ev.stopPropagation()
阻止默认行为
ev.preventDefault()
获取鼠标坐标
ev.pageX, ev.pageY
index
// 得到指定jquery对象在前面数组中的下标
// console.log($('div').index($('#heng')))
添加事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加事件</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="dudu" style="width:300px; height:300px; background-color: red;"></div>
<div class="didi" style="width:300px; height:300px; background-color: yellow;"></div>
<div class="didi" style="width:300px; height:300px; background-color: cyan;"></div>
</body>
</html>
<script>
$(function () {
/*
$('.didi').click(function () {
alert('滴滴打车我喜欢')
})
$('#dudu').click(function () {
// console.log(this)
// 获取到背景色
var color = $(this).css('backgroundColor')
console.log(color)
if (color == 'rgb(255, 0, 0)') {
$(this).css('backgroundColor', 'gold')
} else {
$(this).css('backgroundColor', 'red')
}
}) */
// 事件绑定
// $('#dudu').on('click', function () {
// alert('给我一个粉红的回忆')
// })
// function lala() {
// alert('夏天夏天悄悄过去')
// }
// $('#dudu').on('click', lala)
// $('#dudu').off('click', lala)
// 绑定的函数只能执行一次
// $('#dudu').one('click', lala)
})
</script>
事件其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件其他</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="wai" style="width:400px; height:400px; background-color:red;">
<div class="nei" style="width:200px; height:200px; background-color:yellow;">
</div>
</div>
<a id="oa" href="http://www.baidu.com/">百度一下</a>
</body>
</html>
<script>
$(function () {
$('.wai').click(function (ev) {
// alert('这是外面的衣服')
console.log(ev.pageX, ev.pageY)
})
/*
// 取消事件冒泡
$('.nei').click(function (ev) {
alert('这里里面的衣服')
ev.stopPropagation()
})*/
// 阻止默认行为
// $('#oa').click(function (ev) {
// alert('悄悄问圣僧,女儿美不美')
// ev.preventDefault()
// })
})
</script>
获取下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>获取下标</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>黄山</div>
<div>泰山</div>
<div>华山</div>
<div id="heng">衡山</div>
<div>峨眉山</div>
<div>嵩山</div>
</body>
</html>
<script>
// 得到指定jquery对象在前面数组中的下标
// console.log($('div').index($('#heng')))
</script>
7、动画
show()
// 参数1：动画的事件
// 参数2：动画完毕之后执行的函数
$('#dudu').show(5000, function () {
alert('菊花残,满地伤')
})
hide()
和show一样
$('#dudu').hide(5000, fn)
slidedown()
原来不显示，动画下拉显示
$('#dudu').slideDown(5000)
slideup()
原来显示，动画的上拉消失
slideToggler()
如果隐藏就下拉显示，如果显示就上拉消失
fadeIn()
// 慢慢的显示出来
// $('#dudu').fadeIn(5000)
fadeOut()
// 慢慢的消失
// $('#dudu').fadeOut(5000)
fadeTo()
// 5秒之内，透明度变为0.01
// $('#dudu').fadeTo(5000, 0.01)
fadeToggle()
如果隐藏就淡入显示，如果显示就淡出消失
自定义的动画效果
animate()
// 自定义动画
// $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
stop()
停止动画
$('#dudu').stop()
动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="dudu" style="width:300px; height: 200px; background-color:red; display: block; position: absolute; top: 10px; left: 0px;"></div>
<!-- <div style="clear: both;"></div> -->
<button id="btn" style="position: absolute; top:250px;">点我看动画</button>
</body>
</html>
<script>
$(function () {
$('#dudu').click(function () {
// 参数1：动画的事件
// 参数2：动画完毕之后执行的函数
// $('#dudu').show(5000, function () {
// alert('菊花残,满地伤')
// })
// $('#dudu').hide(5000)
// $('#dudu').slideDown(5000)
// $('#dudu').slideToggle(5000)
// 慢慢的显示出来
// $('#dudu').fadeIn(5000)
// 慢慢的消失
// $('#dudu').fadeOut(5000)
// 5秒之内，透明度变为0.01
// $('#dudu').fadeTo(5000, 0.01)
// 自定义动画
// $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
$('#dudu').animate({left: 600}, 5000, function () {
$('#dudu').animate({top: 600}, 5000)
})
// $('#dudu').animate({top: 600}, 5000)
})
$('#btn').click(function () {
$('#dudu').stop()
})
})
</script>
