学习JQuery - 2

来源：互联网发布：python buffer类型编辑：程序博客网时间：2024/06/06 07:09

第2章：元素的选择

    The jQuery library harnesses the power of Cashcading Style Sheets(CSS) selectors     to let us quickly and easily access elements or groups of elements in Document Object Model(DOM).

jQuery之所以强大，是因为他很容易的利用CSS和DOM！

形象的比喻：左手是DOM，右手是CSS。

1. CSS选择器

Selector typeCSSjQuery说明Tag namep {}$('p')对整个网页中标签有效ID#some-id {}$('#some-id')对网页中指定id有效Class.some-class {}$('.some-class')对网页中相同类名有效

请看下面的菜单：

chapter02.html

<!doctype html><html><head>    <meta charset="utf-8">    <title>chapter2-1</title>    <script type="text/javascript" src="jquery-1.10.2.js"></script>    <script type="text/javascript" src="chapter02.js"></script><link rel="stylesheet" href="chapter02.css" type="text/css" /></head><body><h1>Selected Shakespeare Plays</h1><ul id="selected-plays">    <li>Comedies        <ul>            <li><a href="/asyoulikeit">As You Like It</a></li>                <li>All's Well That Ends Well</li>                <li>A Midsummer Night's Dream</li>                <li>Twelfth Night</li>            </ul>        </li>        <li>Tragedies        <ul>            <li><a href="hamlet.pdf">Hamlet</a></li>                <li>Macbeth</li>                <li>Romeo and Juliet</li>            </ul>        </li>        <li>Histories        <ul>            <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)</li>                <ul>                    <li>Part I</li>                        <li>Part II</li>                    </ul>                <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>                <li>Richard II</li>            </ul>        </li>    </ul></body></html>

效果如下：

Selected Shakespeare Plays

Comedies
- As You Like It
- All's Well That Ends Well
- A Midsummer Night's Dream
- Twelfth Night
Tragedies
- Hamlet
- Macbeth
- Romeo and Juliet
Histories
- Henry IV (email)
  - Part I
  - Part II
- Henry V
- Richard II

首先，把他变成横向形式

增加如下CSS代码：

.horizontal {float: left;list-style: none;margin: 10px;}

然后，在js中添加CSS支持

$('#selected-plays > li').addClass('horizontal');

现在的效果如下：

Selected Shakespeare Plays

Comedies
- As You Like It
- All's Well That Ends Well
- A Midsummer Night's Dream
- Twelfth Night
Tragedies
- Hamlet
- Macbeth
- Romeo and Juliet
Histories
- Henry IV (email)
  - Part I
  - Part II
- Henry V
- Richard II

在上面的jQuery代码中，我们发现一个新的符号“>”!

这个符号表示：子元素。

$('#selected-plays > li')

指定id="selected-plays"的子元素li(tag name)，即Comedies、Tragedies、Histories行。

那么，怎么才能选择所有的li元素（子元素，孙元素，重孙元素... ^_^）呢？

$('#selected-plays li')

对，你没有看错！就是用空格替代“>”即完成。

我们想除了三个子元素以外的所有li元素的背景设置为灰色。

CSS：

.sub-level {background: #ccc;}

JS：

$('#selected-plays li:not(.horizontal)').addClass('sub-level');

实现效果如下：

Selected Shakespeare Plays

Comedies
- As You Like It
- All's Well That Ends Well
- A Midsummer Night's Dream
- Twelfth Night
Tragedies
- Hamlet
- Macbeth
- Romeo and Juliet
Histories
- Henry IV (email)
  - Part I
  - Part II
- Henry V
- Richard II

附：

chapter02.css

@charset "utf-8";/* CSS Document */.horizontal {float: left;list-style: none;margin: 10px;}.sub-level {background: #ccc;}

chapter02.js

$(document).ready(function() {    $('#selected-plays > li').addClass('horizontal');// add$('#selected-plays li:not(.horizontal)').addClass('sub-level');});

0 0