day10-jquery基础
2018-08-24 本文已影响0人
我是一只菜鳥
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 - 子元素
:first-child ：找到li标签是第一个儿子节点
:last-child：找到li标签是最后一个儿子节点
:nth-child(n): 找到li标签是指定儿子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq选择器</title>
<script src="../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="pwd" />
<input type="text" />
</body>
</html>
<script type="text/javascript">
$(function(){
// 内容包含某某某的节点
//$('li:contains("晓")').css('background-color', 'cyan');
// 找li标签，里面有a的
//$('li:has(a)').css('background-color', 'cyan');
// 找ul标签，里面有a的
//$('ul:has(a)').css('background-color', 'cyan');
//找input标签，有name属性的
//$('input[name]').css('background-color', 'cyan');
//找input标签，有name等于user属性的
//$('input[name=user]').css('background-color', 'cyan');
//找input标签，有name!不等于user属性的
//$('input[name!=user]').css('background-color', 'cyan');
//找input标签，有name以user开头的属性的
//$('input[name^=user]').css('background-color', 'cyan');
//找input标签，有name以user结尾的属性的
//$('input[name$=user]').css('background-color', 'cyan');
// 找到li标签，li是第一个儿子标签
//$('li:first-child').css('background-color', 'cyan');
// 找到li标签，li是最后一个儿子标签
//$('li:last-child').css('background-color', 'cyan');
// 找到li标签，指定下标的li标签，这个下标是儿子节点的下标
//$('li:nth-child(4)').css('background-color', 'cyan');
})
</script>
2.样式添加、属性获取
- css() : 可以连写-链式操作
- attr() : 获取指定节点的属性或设置属性
- removeAttr() :删除指定节点属性
- prop :经常用来设置checked、selected属性，设置的值就是true和false
- addClass :给指定节点添加class名
- removeClass :给指定的节点删除指定的class名
-toggleClass :存在就删除，不存在就添加 - html :读取或者设置节点内容，和innerHTML功能相同
- text :读取或者设置节点内容，和innerText功能相同
- val :读取input框里面的内容
- width\height :读取指定对象宽度\高度 不带px
- offset :获取div的top值和left值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq样式和属性</title>
<script src="../jquery-1.11.3.min.js" ></script>
</head>
<body>
<div id="lala" class="libai">
朝辞白帝彩云间，
千里江陵一日还。
两岸猿声啼不住，
轻舟已过万重山。
</div>
<li><input type="checkbox" />抽烟</li>
<li><input type="checkbox" />喝酒</li>
<li><input type="checkbox" />烫头</li>
<li><input type="checkbox" />足疗</li>
<select id="se">
<option value="">请选择</option>
<option value="">四川</option>
<option value="">云南</option>
<option value="">贵州</option>
</select>
<input type="text" id="ip" value="请输入用户名" />
</body>
</html>
<script type="text/javascript">
$(function (){
// 可以连写-链式操作
//$('#lala').css('background-color', 'cyan').css('font-size', '30px');
// 可以传递js的对象，直接全部操作
//$('#lala').css({backgroundColor: 'red', fontSize: '30px'})
//获取指定节点的class属性
//console.log($('#lala').attr('id'));
//获取第一个符合要求的id属性
//console.log($('.libai').attr('id'));
//通过eq选择第二个符合要求的id属性
//console.log($('.libai:eq(1)').attr('id'));
// 给指定节点添加属性
//$('#lala').attr('class', 'bai').attr('name', 'goudan');
// 将指定节点的属性删除
//$('#lala').removeAttr('class');
//$('input:gt(1)').prop('checked', true);
//$('#se > option:eq(2)').prop('selected', true);
// 给指定的节点添加类名
//$('#lala').addClass('hei');
// 给指定节点节点移除指定的节点class名
//$('#lala').removeClass('libai');
// 有libai就删除，没有就添加
//$('#lala').toggleClass('libai');
// 有参数就设置节点内容，没参数就获取文本, 和innerHTML功能一样
//console.log($('#lala').html('静安寺草泥马'));
//console.log($('#lala').html());
//console.log($('#lala').text());
// 读取和设置
//console.log($('#ip').val());
//console.log($('#ip').val('66666'));
// 读取指定对象宽度 不带px
// console.log($('#lala').width())
// 设置宽度 不带px
// console.log($('#lala').width(300))
// 读取高度
// console.log($('#lala').height())
// 设置高度
// console.log($('#lala').height(400))
// 获取div的top值和left值
// console.log($('#lala').offset().top, $('#dudu').offset().left)
})
</script>
3.js对象和jquery对象转化
js对象和jquery对象的函数不能通用
js对象和jquery对象相互转化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对象转换</title>
<script src="../jquery-1.11.3.min.js"></script>
<style type="text/css">
#lala{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="lala">
</div>
</body>
</html>
<script type="text/javascript">
$(function (){
var odiv = document.getElementById('lala');
// js对象转化jQuery对象
console.log($('odiv').width());
// jQuery对象转化为js对象
console.log($('#lala')[0].style.width);
})
</script>
4.文档处理
- append
- appendTo
- prepend
- prependTo
- after
- before
- empty
- remove
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<script src="../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 type="text/javascript">
$(function (){
// 通过父节点添加子节点
//$('#car').append('<li>本田飞度</li>');
//$('<li>本田飞度</li>').appendTo($('#car'));
// 通过父节点调用，添加到父节点的最前面
//$('#car').prepend('<li>本田飞度</li>');
//$('<li>本田飞度</li>').prepend($('#car'))
// 是兄弟节点关系，在mao节点前后添加节点
//$('#mao').after('<li>本田飞度</li>');
//$('#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')
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')))
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()
