您的位置：首页 > Web前端 > JQuery

jQuery 选择器和事件应用

2017-03-10 19:23 405 查看

一.选择器

1.基本选择器

$('#box li:odd').css('background','gray');// id选择器设置样式
$('#box').find('li:odd').css('background','gray');// 查找ul里面的奇数行变色
$('#box li:even').css('background','green');// 查找ul里面的偶数行变色
$('#box').find('li:even').css('background','gray');// 查找ul里面的偶数行变色
$('#box').children('ul').css('background','gray');  //查找ul里面所有子元素


2.层次选择器：

$('one').filter('p')   //  找到 类名为one的p标签
$('#one span').css('display','block');//子孙后代，所有的span都被选中
$('#one>span').css('display','block');//子代选择器，第一层元素，span1被选中
$('#one + div').css('display','block');//找下一个兄弟节点，找到的是单个的
$('#one ~ div').css('display','block');//下面所有的兄弟节点，所有的弟弟（多个）
$('#one').siblings().css('display','block');//所有的兄弟节点（偶数）
$('#one').children().css('display','block');//#one>span所有的子代节点，子代集合
$('.s1').parent().css('display','block');//查找父节点 ，单数
$('.s1').parents()   //  祖先节点  ，直到<html>元素为止
$('#one').has('span')   //  找包含有p标签的div
$('one').index()   //  获取one的索引
$('li').html(’123‘)  //   设置所以li的值为123
$('li').html()  //   获取第一个li的值，包括标签
$('div').next()  //   查找下面所有下面所有div的兄弟节点，获取和设置纯文本包括标签也能获取
$('div[id]')   //  查找所有id的div标签
$(':input')  //    查找所以Text表单
$(':reset')  //    查找所以重置表单


3.内容过滤器：

$('div:contains("c")').css('color','red');包含有c的div被选       中
$('div:empty').css('display','block');//查找有的为空（也不包括文本节点）的节点
$('div:parent').css('display','block');//查找所有含有子元素或者文本节点的节点


4.DOM的操作：

$('p').attr('title');  //  获取p标签的title值
alert($('p').attr('title'));
$('p').attr('title','选择你最喜欢的蛋糕');
alert($('p').attr('title'));  //可以设置多个属性值
$('p').removeAttr('title');   // 移除某个元素的属性值   相当于删除
$('p').addClass('p');  //在p标签添加一个名字为b的类名
$('p').removeClass('p');  // 在p标签删除一个名字为b的类名，但类名还在
$('p').removeAttr('class');//移除某个元素的属性值   相当于删除


5.DOM的增删改查：

$li1=$('<li>雪梨</li>'); //创建节点
$('ul').append($li1);   //  插入节点
$li2=$('<li>西瓜</li>');//创建节点
$li2.appendTo($('ul'))’//  插入节点
两者关系：后续操作不一样
$li3=$('<li>香蕉</li>'); //创建节点
$('ul').prepend($li3);   //  从前面插入节点
$('ul').find('li').eq(0).remove();  // 删除节点
$('ul li:eq(0)').remove();// 删除节点  index下标从0开始
$('ul').find('li').eq(1).empty();  //  清空节点 里面的内容，不是li
$('ul li:eq(0)')clone().appendTo  //  复制节点，复制完一定要插入
//size() //  相当于js的 length ;
4000


例子：jq方法选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#ul{width: 220px;height: 30px;cursor: pointer;}
#ul li{float: left;line-height: 30px;padding-left:

10px;padding-right: 10px;}
.con{width: 206px;height: 100px;border: 1px solid

greenyellow;display: none;}
.active{background: greenyellow;}
</style>
<script src="../js/jquery.min.js" type="text/javascript"

charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#ul>li').mouseover(function(){
$('#ul>li').attr('class','');  //  清空当前li的

样式
$(this).attr('class','active');  //  设置选中的

li变色
$('#div>div').css('display','none');
$('#div>div').eq($(this).index()).css

('display','block'); // 利用索引li设置对应的div
});

});
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li class="active"><a href="javascript:"></a>国事</li>
<li><a href="javascript:"></a>社会</li>
<li><a href="javascript:"></a>娱乐</li>
<li><a href="javascript:"></a>科技</li>
</ul>
<div id="div">
<div class="con" style="display: block;">
国事
</div>
<div class="con">
社会
</div>
<div class="con">
娱乐
</div>
<div class="con">
科技
</div>
</div>
</div>
</body>
</html>


二.事件和特效集合

1.position的使用：

//alert($('#div2').offset().left); //获取到屏幕的左距离
//alert($('#div2').position().left);//到有定位的父级的left值


2.slideDown和slideDown

作用：让元素以上拉动画效果隐藏起来
//$('#btn').click(function(){
//$('#div').slideDown(2000,function(){
//$('#div').slideUp(2000);
//  });
// $('#btn').click(function(){
// $('#div').slideDown(400)// 参数：时长


3.on与off

$('div').on('click mouseover',function(){   //  on  绑定事件，如果没有使用off，每次鼠标移入都会弹出一次
alert(3645);
$('div').off('mouseover');  //  当off关闭绑定了事件，鼠标移入只弹出一次，再次鼠标移入不会再弹出
});


### 4.animate()

// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
//.delay(1000)  延迟（秒数）
// stop()   // 停止当前的运动属性
// stop(true)  //  停止所有运动
// stop(true，true)  //  当前的运动属性马上到达目标后停止
//  finish()   //  所以的运动属性马上到达目标后停止


5.

//  ev.preventDefault() //阻止默认事件
// ev.stopPropagation() //阻止冒泡
// return false; //阻止默认事件+阻止冒泡


6.show（）与hide（）

$('#btn').click(function(){
$('#div').show(1000,function(){  //显示
$('#div').hide(2000);   //  隐藏
});
});


7.fadeIn()和fadeOut()

作用：让元素以淡淡的进入视线的方式展示出来
$('#btn1').hover(function(){
$('#div2').fadeIn(1000);  //淡出
},function(){
$('#div2').fadeOut(1000);    //  淡入
});


例：jq版回到顶部

首要：把jq压缩版文件导入


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 800px;height: 3000px;margin: 0

auto;background: #888;}
#backTop{width: 50px;height:

50px;background:red;position: fixed;right: 50px;bottom: 50px;display:

none;cursor: pointer;}
</style>
<script src="../js/jquery.min.js" type="text/javascript"

charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var sTop = $(window).scrollTop();  // 获取滚动了的距离

if(sTop>500){   // 判断滚动大于500时显示红色按钮
$('#backTop').f
9421
adeIn(500);    //  显示
}else if(sTop<500){
$('#backTop').fadeOut(500);   //  隐藏
}
})
$("#backTop").click(function(){
$('html , body').animate({scrollTop:

0},'600','linear');  //  运动函数：animate()
});
})
</script>
</head>
<body>
<div id="box">
<div id="backTop"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航