: jank : : 4717 : 2016-09-19 19:59 js
一、jquery基础
1.jq语法选择器
$(this).hide() //隐藏当前元素
$("p").hide() //隐藏所有 <p> 元素
$("p.test").hide() //隐藏所有 class="test" 的 <p> 元素
$("#test").hide() //隐藏所有 id="test" 的元素
$("*") //选取所有
$(this) //选取当前 HTML 元素
$("p.intro") //选取 class 为 intro 的 <p> 元素
$("p:first") //选取第一个 <p> 元素
$("ul li:first" //选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") //选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") //选取带有 href 属性的元素
$("a[target='_blank']") //选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']" //选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") //选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") //选取偶数位置的 <tr> 元素
$("tr:odd") //选取奇数位置的 <tr> 元素
2.文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
//也可以简写成
$(function(){
// 开始写 jQuery 代码...
});
3.jq事件
$('#button').click(function(){}); //单击事件
$('#button').dblclick(function(){}); //双击事件
$('aa').mouseenter(function(){}); //鼠标进入事件
$('aa').mouseleave(function(){}); //鼠标离开事件
$('aa').mousedown(function(){}); //鼠标在当前按下触发
$('aa').mouseup(function(){}); //鼠标松开触发
$('#b').focus(function(){}); //input表单获得焦点事件
$('#b').blur(function(){}); //input表单失去焦点事件
二、jquery效果
1.隐藏/显示
$('#h').hide() //隐藏
$('#h').hide(1000) //隐藏速度，也可以是slow/fast
$('#s').show() //显示
$('#s').show(1000) //显示速度
$('#t').toggle() //隐藏/显示自动切换
$('#t').toggle(2000) //隐藏/显示自动切换速度
2.淡入/淡出
$('.d').fadeIn() //淡入
$('.d').fadeIn(1000) //淡入，速度
$('.d').fadeOut() //淡出
$('.d').fadeOut(1000) //淡出，速度
$('.d').fadeToggle() //淡入、淡出自动切换
$('.d').fadeToggle(1000) //淡入、淡出自动切换，速度
$('.ds').fadeTo(1000, 0.5) //点击颜色变淡（0 ~ 1）, 速度
3.滑动
$('#h').slideDown() //向下滑动
$('#h').slideDown(1000) //向下滑动，速度
$('#h').slideUp() //向上滑动
$('#h').slideUp(1000) //向上滑动，速度
$('#h').slideToggle() //上下滑动，自动切换
$('#h').slideToggle(1000) //上下滑动，自动切换，速度
4.动画
1. animate操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px', //向右滑动
opacity:'0.5', //颜色变淡
height:'150px', //高度变
width:'150px' //宽度变
});
});
2. animate使用相对值
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px', //高增加
width:'+=150px' //宽增加
});
});
3. animate使用预定义的值
$("button").click(function(){
$("div").animate({
height:'toggle' //隐藏、显示自动切换
});
});
4. animate使用队列功能，即顺序执行多个动画效果
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
5. 停止动画
$("#panel").stop();
三、jquery html
1.dom操作
1. 获取内容
$('p').html(); //获取所属元素的内容并包括html标签
$('p').html('<b>hello</hello>') //设置新值
$('p').html(function(){ //回调函数，直接返回结果
return '<b>hello jank</b>'
})
$('p').text(); //获取所属元素的内容
$('p').text('hello')
$('p').text(function(origText){ //origText,获取原来text/html/val
return origText + 'jank'
})
$('input').val(); //获取表单中输入的值
$('input').val('hello')
$('input').val(function(){
return 'jank'
})
2. 获取属性
$('#jank').attr('href'); //获取href的属性值
$('#jank').attr('href','http://i.jankl.com')
$('#jank').attr(function(origValue){ //原来的属性值
return origValue + '/blog'
})
如：
<html>
<body>
<a href="www.jankl.com" id="jank">liberalist的网站</a>
<button>获取</button>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('button').click(function(){
var jank = $('#jank').attr("href")
alert(jank)
})
</script>
3.jquery添加元素
$('#jank').append('i love you');
$('#jank').prepend('ai');
$('#jank').after('i love you');
$('#jank').after('ai');
4.jquery删除元素
$('#jank').remove(); //删除选中的元素
$('#jank').empty(); //删除被选中元素的子元素
5.jquery操作css
$('#jank').addClass(); //添加css样式
$('#jank').removeClass(); //删除css样式
$('#jank').toggleClass(); //添加、删除css样式自动切换
$('#jank').css('background-color', 'blue'); //设置css样式
6.jquery尺寸
$('#jank').width() //获取宽度，
$('#jank').width('100px') //设置值
$('#jank').height()
$('#jank').innerWidth()
$('#jank').innerHeight()
$('#jank').outerWidth()
$('#jank').outerHeight()
四、遍历值
1.祖先
$('#jank').parent() //返回直接父元素
$('#jank').parent() //返回所有祖先元素
$('#jank').parentsUntil() //返回两层祖先元素
2.后代
$('#jank').children(); //返回直接的儿子元素,一层
$('#jank').find('span'); //返回jank下的全部span元素
$('#jank').find('*'); //返回jank下的全部元素
3.同胞
$('#a').siblings() //返回被选元素的所有同胞元素。
$('#a').next() //返回被选元素的下一个元素
$("#a").nextAll() //返回被选元素后的所有同胞元素
$('#a').nextUntil() //返回两个被选元素后的同胞元素
$('#a').prev() //返回被选元素的前一个元素，下面类似
$('#a').prevAll()
$("#a").prevUntil()
4.过滤
$('p').first() //取第一个p标签
$('p').last() //取最后一个p标签
$('p').eq(2) //取第二个p标签
$('p').not('#jank') //id为jank的除外
$('p').filter('.url') //涵盖ur