标签：
html部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>选择元素</title>
<link href="cssjq.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->
<script src="jq/jquery.js" ></script>
<script src="js2.js" ></script>
<!--<script ></script>-->
</head>
<br>
1:理解dom是干什么的
<div>
<p> jq很强大</p>
<p> jq很强大</p>
<p> jq很强大</p>
</div>
<!--这边html是最大的祖先类元素,head与body是兄弟类元素
title是head的子元素
div是body的子元素
p是div的子元素
p是body的孙子元素,是html是重孙元素
2:使用$()函数来实现连缀功能
基本选择符
选择器 css jq 说明
标记 p{} $(‘p‘) 获取文档中所有含有p的段落
id #id1 $(‘#id1‘) 获取文档中id为id1的一个元素
class .class1 $(‘.class‘) 获取文档中class为class1的所有元素-->
css选择符
<ul id="css_id">
<li>css0
<ul>
<li><a href="#">不能打开的链接</a></li>
<li>段落说明</li>
<li>cssjq学习</li>
</ul>
</li>
<li>
css1
<ul>
<l1><a href="mailto:869710179@qq.com">邮件</a></l1>
<li>段落说明</li>
<li>cssjq学习</li>
</ul>
</li>
<li>
css2
<ul>
<l1><a href="http://www.qq.com/tab.html" onclick="return false">腾讯</a></l1>
<li>段落说明</li>
<li>cssjq学习</li>
</ul>
</li>
</ul>
<!--基于列表项的级别添加样式-->
<!--自定义选择符例子-->
</br></br></br></br></br>
<h2>下面的表格</h2>
<table>
<tr>
<td>表格1</td>
<td>表格2</td>
<td>表格1</td>
</tr>
<tr>
<td>表格2</td>
<td>表格2</td>
<td>表格1</td>
</tr>
<tr>
<td>表格1</td>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>表格0</td>
<td>表格0</td>
<td>表格0</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>表格</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
<h2>下面的表格</h2>
<table>
<tr>
<td>表格2</td>
<td>表格2</td>
</tr>
<tr>
<td>表格2</td>
<td>表格2</td>
</tr>
<tr>
<td>表格2</td>
<td>表格2</td>
</tr>
</table>
基于表单选择符
选择符 匹配
:input 输入字段，文本，选择列表和按钮
:button 按钮元素或者type属性值为button输入元素
:enabled 启用表单元素
:disabled 禁用表单元素
:checked 勾选单选按钮或者复选框
:selected 选择的选项元素
表单选择符与其他选择符类似，比如
$(‘input[type="raido"]:checked‘)可以选择所有选中的单选按钮
</body>
</html>
-------------------------
css部分
.list1{
float: left;
list-style: none;
margin: 10px;
}
/*.list1类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么会基项目符号，最后再为该元素的每一边
各添加10px外边距*/
/*通过定义.sub_level类之后，它们的背景颜色变为在样式表规定中定义的颜色*/
.sub_level{
background-color: #ccc;
}
/*属性选择符*/
a{color: #00c;}/*全部链接*/
a.emal{
background: url(‘./img/a.jpg‘) no-repeat right top;
padding-right: 18px;
}
a.likes{
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}
/*自定义选择符*/
tr{
background-color: #fff;
}
/*定义一个名为alt类的奇数*/
.alt{
background-color: #ccc;
}
/*基于上下文内容选择元素*/
.hides{
font-weight: bold;
font-style: italic;
}
------------------------------
js部分
/**
* Created by Administrator on 2015/4/23 0023.
*/
//对.list1进行jq设置
$(function(){
$(‘#css_id >li‘).addClass(‘list1‘);
});
/*
* $(‘#css_id >li‘).addClass(‘list1‘);中(>)将list类只添加到位于顶级项中，实际上
* 位于$()函数中选择符含义是:查询id为css_id的子元素(>)中所有的列表项(li)*/
/*
要为其他项（非顶级的项）添加样式，有很多方法，因为已经为顶级项添加了list1类，所以取得全部非顶级级的一种方式，就使用否定式伪类选择符来识别没list1类所有列表项，如下*/
$(function(){
$(‘#css_id>li‘).addClass(‘list1‘);
$(‘#css_id li:not(.list1)‘).addClass(‘sub_level‘);
});
/*
* 这一次取得每个列表项(<li>),
* 是id为css_id的元素后代元素,
* 没有list1类(:not(.list1))*/
/*
* 属性选择符
* 1:为链接添加样式*/
$(function(){
$(‘a[href^="mailto"]‘).addClass(‘emal‘)
$("a[href^=‘http:‘][href*=‘tab‘]").addClass(‘likes‘)
});
/*自定义选择符,如下*/
//alert($(‘div.list1:eq(1).‘))
$(function(){
$(‘tr:even‘).addClass(‘alt‘);
});
/*even说明：http://www.css88.com/jqapi-1.9/even-selector/*/
/*当在同一个页面的时候，出现另一个表格时，可能会出现意想不到的效果，解决这样的情况，使用nth-child()选择符*/
/*nth-child()说明:http://www.css88.com/jqapi-1.9/nth-child-selector/
* 它是jq中唯一从1开始计数的选择符，而且参数是odd，而不是even参数*/
$(function(){
$(‘tr:nth-child("odd")‘).addClass(‘alt‘);
});
/*基于上下文内容选择元素*/
$(function () {
$(‘tr:nth-child(odd)‘).addClass(‘alt‘);
$(‘td:contains("abc")‘).addClass(‘hides‘)
})
/*注意:contains()选择符是区别大小写的*/
----------------------------------------------------------------------------------
更新后的js dom学习（以更新后的为主）
js
$(function(){
$(‘#selected-plays>li‘).addClass(‘horizontal‘);/*子元素组合符(>)，将类horizontal只添加到位于顶级的项中，含义是:查询id为selected-plays
元素的子元素（>）中所有的列表项(li)*/
});
/*如果要为非顶级列表项添加样式，使用<否定式伪类>，如下*/
$(function(){
$(‘#selected-plays>li‘).addClass(‘horizontal‘);
$(‘#selected-plays li:not(.horizontal)‘).addClass(‘sub-level‘);
});
/*说明:id为selected-plays后代选择器，没有horizontal类
* 创建一个新的css样式(sub-level)并添加到selected-plays这个id下面*/
//属性选择器
$(function(){
$(‘a[href^="mailto:"]‘).addClass(‘mailto‘);
$(‘a[href$=".pdf"]‘).addClass(‘pdflink‘);
$(‘a[href^="http"][href*="henry"]‘).addClass(‘henrylink‘);
});
/*自定义选择符:even(奇数)*/
//$(function(){
// $(‘tr:even‘).addClass(‘alt‘)
//});
//$(function(){
// $(‘tr:odd‘).addClass(‘alt‘)
//});
//基于上下文内容选择元素:contains()包含
$(function(){
$(‘tr:nth-child(odd)‘).addClass(‘alt‘);
$(‘td:contains(Henry)‘).addClass(‘highlight‘);
});
//dom遍历方法，是取得某个元素的父元素或者祖先元素元素
//通过筛选函数就可以利用jq的隐匿迭代能力，如下
$(‘tr‘).filter(‘:even‘).addClass(‘alt‘);
$(‘a‘).filter(function(){
return this.hostname&&this.hostname!=location.hostname;
}).addClass(‘external‘);
/* 1:return this.hostname && this.hostname!=location.hostname;
* 此行可以筛选出符合下面2个条件的<a>元素
* ..1:必须包含一个带有域名的(this.hostname)的href属性，这个测试可以排出(非链接的，如邮箱《mailto》)
* ..2:链接指向的域名(this.hostname)必须不等于页面当前所在域的名称(location.hostname)
* 说明..(.fliter())方法会迭代所有匹配的元素，对每个元素都调用传入的函数并测试函数返回值，如果函数返回false,则从匹配集合中删除相应元素，
* 如果返回true，则保留相应元素*/
//为特定单元格添加样式
$(function(){
$(‘td:contains(Henry)‘).next().addClass(‘highlight‘);
});
//.next()方法只选择下一个最接近的同辈元素，要想突出显示文本（如text1）所在的单元格后面全部单元格，使用.nextAll()
$(function(){
$(‘td:contains(Henry)‘).nextAll().addClass(‘highlight‘)
});
/*.next()与.nextAll()对应一个方法:.prev()和.prveAll(),此外.siblings()能够选择处理相同dom层次的所有其他元素，无论元素处于当前元素之前还是之后*/
//要在这些单元格中再包含原来的单元格（如abc那个单元格），可以使用.addBack()方法，如下:
$(function(){
$(‘td:contains(Henry)‘).nextAll().addBack().addClass(‘highlight‘);
});
//采用组合方式对选择符进行操作
$(function(){
$(‘td:contains(Henry)‘).parent().children().addClass(‘highlight‘);
});
//这种组合方式没有言必有中同辈元素，通过.parent()方法在dom中上溯一层到达<tr>,
//然后通过.children()选择该行的所有单元格
//连缀（原理）:几乎所有的jq方法都会返回jq对象，因而可连缀调用多个jq方法
$(‘td:contains(Henry)‘).parent().find(‘td:eq(1)‘).addClass(‘highlight‘)
.end().find(‘td:eq(2)‘).addClass(‘highlight‘);
//.end()恢复到包含Henry单元格父元素
//访问dom元素:几乎所有的jq方法都会返回jq对象;通过.get()方法来获取dom元素
//比如想获取id=‘abc‘这个，可以这么操作，如下
//var mydom=$(‘abc‘).get(0).tagName
//也可以写成var mydom=$(‘abc‘)[0].tagName
---------
css
.horizontal{
float: left;
list-style: none;
margin: 10px;}/*外边距*/
.sub-level{
background-color: #ccc;
}
/*属性选择器:为链接添加样式*/
a{color: #00c}
a.mailto{
background: url("images/email.png") no-repeat right top;
padding-right: 18px;
}
a.hamlet{
background: url(‘images/pdf.png‘)no-repeat right top;
padding-right: 18px;
}
a.henrylink{
background-color: #fff;
padding: 2px;
border:1px solid #000;
}
/*注意:^这个表示开头，$表示结尾,*匹配的值出现任意位置*/
/*自定义选择符:它与css中的伪类选择符语法相同，即选择符以冒号(:)开头*/
/*每隔一行为表格添加样式，使用:odd和:even*/
tr{background-color:#fff}
.alt{
background-color: #ccc;
}
/*基于上下文内容选择元素*/
.highlight{
font-weight: bold;font-style: italic;
}
/*dom遍历方法学习*/
a.external{
background:url("images/external.png") no-repeat 100% 2px #fff;
padding-right: 16px;
}
------------
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Selected ShakeSpeare Plays</title>
<link rel="stylesheet" href="../css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="chapter2.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="chapter2.js" type="text/javascript"></script>
</head>
<br>
<br id="container">
<h2>Selected Shakespeare Plays</h2>
<ul id="selected-plays" class="clear-after">
<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>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>
<h2>Shakespeare Table</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>
<!-- <h2>from Benjamin Franklin‘s <em>Autobiography</em></h2>
<p>Thus refreshed, I walked again up the street, which by this time had many clean-dressed people in it, who were all walking the same way. I joined them, and thereby was led into the great meeting-house of the Quakers near the market. I sat down among them, and, after looking round awhile and hearing nothing said, being very drowsy thro’ labor and want of rest the preceding night, I fell fast asleep, and continued so till the meeting broke up, when one was kind enough to rouse me. This was, therefore, the first house I was in, or slept in, in Philadelphia.</p> -->
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mhxy13867806343/p/4455118.html
