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:[email protected]">邮件</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:[email protected]">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>
时间： 2024-11-05 18:59:08