jQuery绑定click事件,特殊效果,链式调用

绑定click事件

给元素绑定click事件,可以用如下方法:

$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
	<script type="text/javascript">
		$(function(){
			
			// 绑定click事件
			$('#btn').click(function(){

				/*
				if($('.box').hasClass('col01'))//如果有这个col01样式
				{
					$('.box').removeClass('col01');//就删除这个样式
				}
				else
				{
					$('.box').addClass('col01');//否则就添加
				}
				简化成下面的写法:
				*/
				$('.box').toggleClass('col01');//重复切换col01样式
			})
		})

	script>
head>
<style type="text/css">
	.box{
		width:200px;
		height:200px;
		background-color:gold;
	}
	.col01{
		background-color:green;
	}

style>
<body>
	<input type="button" name="" value="切换样式" id="btn">
	<div class="box">div元素div>
body>
html>

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
  • 1
  • 2
  • 4
  • 5
  • 6

获取索引值


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
	<script type="text/javascript">
		$(function(){
			var $li = $('.list li');
			//alert($li.length); 弹出 8
			//alert($li.eq(3).index()); 弹出3
			alert( $li.filter('.myli').index() );//弹出class为myli的li的索引,弹出4
		})
	script>
head>
<body>
	<ul class="list">
		<li>1li>
		<li>2li>
		<li>3li>
		<li>4li>
		<li class="myli">5li>
		<li>6li>
		<li>7li>
		<li>8li>
	ul>
body>
html>

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素,也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

利用click事件和链式调用做选项卡


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
		.btns input{
			width:100px;
			height:40px;
			background-color:#ddd;
			border:0;
		}

		.btns .current{
			background-color:gold;
		}


		.cons div{
			width:500px;
			height:300px;
			background-color:gold;
			display:none;
			text-align:center;
			line-height:300px;
			font-size:30px;
		}

		.cons .active{
			display: block;
		}

	style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
	<script type="text/javascript">
		$(function(){
			var $btn = $('.btns input');
			var $div = $('.cons div');

			$btn.click(function(){
				// this 指的是原生的this,它表示当前点击的对象,使用jquery的对象需要用$(this)

				// 当前点击的按钮加上current样式后,除了当前,其他的按钮去掉current样式
				$(this).addClass('current').siblings().removeClass('current');

				//alert( $(this).index() ; //弹出当前按钮的索引值
				// 当前点击的按钮对应索引值的div 加上active样式,其他的去掉active样式
				$div.eq( $(this).index() ).addClass('active').siblings().removeClass('active');
			})
		})

	script>
head>
<body>
	<div class="btns">
		<input type="button" name="" value="01" class="current">
		<input type="button" name="" value="02">
		<input type="button" name="" value="03">
	div>	
	<div class="cons">
		<div class="active">选项卡一的内容div>
		<div>选项卡二的内容div>
		<div>选项卡三的内容div>
	div>
body>
html>

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){
		//1000表示动画时间 单位ms(可写可不写),swing表示运动曲线是怎样的(可写可不写),function为回调函数即执行完的返回结果(可写可不写)
        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
		
		.box{
			width:300px;
			height:300px;
			background-color:gold;
			display:none;
		}
	style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>
	<script type="text/javascript">
		
		$(function(){

			$('#btn').click(function(){

				/*$('.box').fadeIn(1000,function(){
					alert('动画完了!');
				});
				*/

				/*$('.box').fadeToggle(1000,function(){
					alert('动画完了!');
				});
				*/

				// $('.box').show();

				//$('.box').toggle();

				//$('.box').slideDown();

				$('.box').slideToggle(1000,function(){
					$('.box').slideUp(function(){$('.box').fadeIn();});
				});
			})
		})

	script>
head>

<body>
	<input type="button" name="" value="动画" id="btn">
	<div class="box">div>
body>
html>

用链式调用和特殊效果做层级菜单


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级菜单title>
	
	
	<style type="text/css">
		body{
			font-family:'Microsoft Yahei';
		}
		body,ul{
			margin:0px;
			padding:0px;
		}
		
		ul{list-style:none;}


		.menu{
			width:200px;
			margin:20px auto 0;
		}

		.menu .level1,.menu li ul a{
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
			border-bottom:1px solid #afc6f6;
			
		}

		.menu li ul a{
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;
					
		}

		.menu li ul li{
			border-bottom:1px solid #afc6f6;
		}

		

		.menu li ul{
			display:none;
		}

		.menu li ul.current{
			display:block;
		}

		.menu li ul li a:hover{
			background-color:#f6b544;
		}


	style>
	
	<script type="text/javascript" src="js/jquery-1.12.4.min.js">script>

	<script type="text/javascript">
		
		$(function(){

			$('.level1').click(function(){

				//当前点击的元素紧挨的同辈元素向下展开,再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),选择其他同辈元素(li)的子元素ul,然后将它向上收起。

				// 通过stop() 可以修正反复点击导致的持续动画的问题
				$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();




			})

		})

	script>
head>
<body>
	<ul class="menu">
		<li>
			<a href="#" class="level1">水果a>
			<ul class="current">
				<li><a href="#">苹果a>li>
				<li><a href="#">梨子a>li>
				<li><a href="#">葡萄a>li>
				<li><a href="#">火龙果a>li>
			ul>
		li>
		<li>
			<a href="#" class="level1">海鲜a>
			<ul>
				<li><a href="#">蛏子a>li>
				<li><a href="#">扇贝a>li>
				<li><a href="#">龙虾a>li>
				<li><a href="#">象拔蚌a>li>
			ul>
		li>
		<li>
			<a href="#" class="level1">肉类a>
			<ul>
				<li><a href="#">内蒙古羊肉a>li>
				<li><a href="#">进口牛肉a>li>
				<li><a href="#">野猪肉a>li>				
			ul>
		li>
		<li>
			<a href="#" class="level1">蔬菜a>
			<ul>
				<li><a href="#">娃娃菜a>li>
				<li><a href="#">西红柿a>li>
				<li><a href="#">西芹a>li>
				<li><a href="#">胡萝卜a>li>
			ul>
		li>
		<li>
			<a href="#" class="level1">速冻a>
			<ul>
				<li><a href="#">冰淇淋a>li>
				<li><a href="#">湾仔码头a>li>
				<li><a href="#">海参a>li>
				<li><a href="#">牛肉丸a>li>
			ul>
		li>
		
	ul>
body>
html>

你可能感兴趣的:(JavaScript,Html,jquery)