jquery 入门小例子

最新推荐文章于 2024-07-04 10:38:01 发布

绝世好阿狸

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量531

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/u010900754/article/details/45538985

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Through the Looking-Glass</title>
<link rel="stylesheet" type="text/css" href="/static/css/01.css">
<script src="/static/js/jquery.js"></script>
<script src="/static/js/01.js"></script>
</head>


<body>

<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<h2>Shakespeare's Plays</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>

</body>
</html>

body.large{
font-size: 1.5em;
}

body.narrow{
font-size: 0.5em;
}

.selected {
font-weight: bold;
}

.hidden {
display: none;
}

.hover {
cursor: pointer;
background-color: #afa;
}

$(document).ready(function() {
	$('#switcher-default').addClass('selected'); 
	$('#switcher button').on('click', function(){
          $('#switcher button').removeClass('selected');
    	  $(this).addClass('selected');
    	  $('body').removeClass();
    });
    $('#switcher-large').on('click', function(){
    	  $('body').addClass('large');
    });
    $('#switcher-narrow').on('click', function(){
    	  $('body').addClass('narrow');
    });
    $('#switcher h3')
    .click(function(){
          $('#switcher button').toggleClass('hidden');
    })
    .hover(function(){
          $(this).addClass('hover');
    },function(){
          $(this).removeClass('hover');
    });
});

1.$()是元素选择器，返回html页面中的一个DOM元素，从而对其进行操作。#表示ID选择器，.表示class选择器，如果什么也不加，则是标签，比如$('div')选中所有的div标签。

当然还有一些高级用法，比如

 $('#switcher h3')

表示取父元素的所有匹配的后代（儿子，孙子全都有），首先通过ID取得一个元素div，后面的空格加h3表示这个div下的所有h3子元素。

而如果是“>”，则只是表示匹配的儿子元素，不包括再下面的。

2.$(document).ready(function(){

});这是写jquery用到的的第一个函数，在浏览器加载完DOM后，这个函数就会执行。也就是构建一棵DOM树，得到页面的所有DOM元素就可以。如果图片还没加载，此时也可以访问jquery，而window.onload则要等页面全部加载完才会执行，即所关联的全部文件，包括图片。

3.添加和删除样式使用addClass和removeClass函数即可。

4.添加事件，先选中元素，再添加事件，参数是一个要执行的函数，比如单击，就是click(function(){})。jquery使用的是冒泡机制，有的时候要避免冒泡，可能要使用event对象的target属性，确保只在触发选中的元素时才实行事件。在事件的函数中添加event参数，用if(event.target == this)检测即可。