Jquery中的内容选择器contains的详解

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
<script type="text/javascript" src="jquery-1.7.js"></script>
 </head>
 <body>
 <h1>内容选择器</h1>
 <ul>
 <li>床前明月光</li>
	 <li>疑是地上霜</li>
	 <li>举头望明月</li>
	 <li>低头思故乡</li>
 </ul>
 <input type="button" value="内容选择器" onclick="f()">
 <input type="button" value="隐藏没有包含明月的li标签" onclick="f2()"><br/><br/>
 <input type="button" value="将没有包含明月的li标签设置成可见" onclick="f3()">
 <input type="button" value="visible的用法" onclick="f5()">
 </body>
 <script type="text/javascript">
 function f()
	{
		//将内容有明月关键字的li标签的背景设置成黄色，并修改字体大小
		$('li:contains("明月")').css({background:"yellow",fontSize:"21px"})
 	}

	function f2()
	{
	//因此没有包含明月的li标签
	 $('li:not(:contains("明月"))').css({display:"none"})
	}

	function f3()
	{
	 //用hidden样式查找被因此的内容
	 $('li:hidden').css({display:"block",color:"red",fontSize:"20px",background:"gray"})
	}

	function f5()
	{
	 //将可见的li标签给隐藏
	 $('li:visible').css({display:"none"})
	}
 </script>
</html>

eb开发。不管是在工作还是在学习中，掌握一些实用的开发小技巧，你的效率都会大大提升哦！

一、将填充和边距都设置为零

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

也有使用通配符*{padding:0;margin:0;}网站利弊端都各有其说法，对于*号这种，是把所有元素的内外边距都设置为了0，可能有些会出现些小细节的问题，所以选择你适用的方案吧

二、重置浏览器的字体大小

body {

font:12px "宋体", Arial, Helvetica, sans-serif;

color: #000;

}

不保证所有的用于都安装有你设置的字体，所以通常会在后面加上几个通用的web安全字体

三、元素/标签选择器

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}

table { border-collapse:collapse; border-spacing:0;}

img { border:0;}

ol,ul { list-style:none; }

p{word-wrap:break-word}

四、站点链接

站点链接的样式必须保持此顺序，包括用于创建悬停效果的选择器组在内

a:link {

color: #42413C;

text-decoration: none;

}

a:visited {

color: #6E6C64;

}

a:hover, a:active, a:focus {

text-decoration: underline;

}

五、设置水平居中

1）固定宽度大多数的网站目前都是固定宽度的代码如下：

#container { width:1000px;margin: 0 auto;}

2）如果是用百分百来定义宽度的话，可以这样使用：

#container {

width: 80%;

max-width: 1260px; /* 最大宽度，IE6 不遵循max-width、min-width 此声明。 */

min-width: 780px; /* 最小宽度 */

margin: 0 auto; /* 如果将 #container 宽度设置为 100%，则不需要此设置。 */

}

六、可以重复利用的规则

.left {float: left;}

.right {float: right;}

七、在同一元素上使用多种类

加粗的红色字体，使用了两种类

CSS代码：

.red {color: red;}

.bold {font-weight: bold;}

Html代码：

<p class="red bold">同一元素使用两种类</p>

八、隐藏水平滚动条

为了避免出现水平滚动条，在body里加入 overflow-x:hidden

body{overflow-x:hidden}

九、解决IE6 的浮动元素的双倍边距问题

对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：

div {float:left;margin:40px;display:inline;}

IE6下图片也会产生3像素的空白距离，也用到display

img{display:block}

十、简单的导航菜单

用html5 css3 的新语义标签来写一下这段导航菜单代码

html代码：

<nav>

<ul>

<li><a href="http://www.yangqq.com/download/">个人博客模板</a></li>

</ul>

</nav>

CSS代码：

nav ul li { display:inline;margin-right:10px;}

nav ul li a {color:#000;display:block;float:left;padding:5px;}

nav ul li a:hover {background:#eee;color:black;}

}

如果想选中的导航能高亮显示，可以加上一段js代码：

var obj=null;

var As=document.getElementById('nav').getElementsByTagName('a');

obj=As[0];

for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)

obj=As[i];}

obj.id='nav_current'

</script>

提示：为了让js能够获取到菜单的id取值，所以应该给html中的nav标签添加一个id

高亮显示的样式nav_current 也应该在css中写上一段代码，比如：

#nav_current{background:#eee;color:red;}

如果你喜欢这篇文章，可以关注作者头条公众号，每天都会有精彩web干货与你一起分享哦！

TML简介

HTML：Hyper Text Markup Language

html文本的内部基本结构

<!--
    文档声明，标识当前网页的版本的
    该声明标识网页是遵循html5语法规范的
    编写网页时，一定要编写的文档声明，
    在某些浏览器中，如果不写文档声明，会导致浏览器进入到怪异模式
 -->
<!doctype html>
<!-- html网页中根标签，一个页面中有且只有一个根标签
    网页中的所有内容都应该写在根标签的内部
 -->
<html>
?
    <!-- 
        网页的头部，head标签中的内容，不会在页面中直接显示
        浏览器根据head中的内容来解析网页，搜索引擎也可以根据他们来检索网页
     -->
    <head>
                <!-- 使用meta来设置页面的字符集 -->
        <meta charset="utf-8" />
        <!-- 
            网页的标题，一般会在页面的标签头部显示 
            所属引擎在检索一个网页时，会主要检索title中的内容
            并依据该内容，来判断网页的主要内容，
            title中的内容会影响到网站在搜索引擎中的排名
        -->
        <title>我是title</title>
?
    </head>
?
    
    <!-- 网页的主体，网页中所有的可见内容，都应该写在body中 -->
?
    <body>
        <h1>这是一个非常漂亮的网页</h1>
    </body>
    
</html>

html的注释

<html>  
    <head>  
        <title>网页的标题</title>  
    </head>  
    <body>  
        <!--   
            注释 HTML注释中的内容，  
            不会在页面中显示，  
            但是可以在源代码中查看  
              
            通过注释可以对代码进行解释说明  
            一定要养成良好的编写注释的习惯  
            编写注释时，要求简单明了  
  
            日期：  
            作者：  
            功能：  
  
            通过注释可以将不希望在页面中显示代码隐藏  
            HTML注释不能嵌套（所有的多行注释都不能嵌套）  
              
        -->  
  
        <!-- 这是页面的1级标题 -->  
        <h1>这是我的第二个网页</h1>  
  
        <!-- 我是一个注释 <!-- 我是注释中的注释 --> -->  
          
  
  
    </body>  
</html>

标题标签，段落标签，水平线，换行，加粗，斜体

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>常用的标签</title>
</head>
<body>
?
<!-- 标题标签
    在HTML一共有h1 ~ h6 六级标题
    6级标题中 h1最大 h6最小
    从h1 到 h6 重要性依次降低
    h1最重要，h2其次 依次递减
?
    搜索引擎检索页面时，h1仅次于title，也会影响到页面在搜索引擎中的排名
        一个页面一般只有一个h1标签
?
    一般页面中只会使用h1 ~ h3
?
-->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
?
<!-- 段落标签 使用p标签来表示一个段落
        段落标签会独占一行，并和其他内容会有一个距离
-->
<p>第一次</p>
<p>今天天气真不错</p>
<hr />
<!--
    在HTML中，默认将多个空格和换行认为是一个空格
    使用br标签来表示一个换行
-->
<p>
    床前明月光<br />
    疑是地上霜<br />
    举头望明月<br />
    低头思故乡<br />
</p>
?
<!-- 水平线，可以在页面的指定位置输出一条水平线 -->
<hr />
?
<!--加粗：<strong>…</strong>-->
<!--斜体：<em>…</em>-->
?
<strong>简介</strong>
<p>
    <em>2008</em>年设立人才实训中心<br/>
    <em>2009</em>年成为教育部软件工程专业大学生实习基地<br/>
</p>
?
</body>
</html>

列表标签

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>列表</title>
    </head>
    <body>
        <!-- 
            列表类似于购物清单
                HTML中一共有三种列表
                1.无序列表
                    - 使用ul标签来创建一个无序列表
                    - 使用li向无序列表中添加列表项
                    - 无序列表默认使用 圆点 来作为项目符号   
                2.有序列表
                    - 有序列表和无序列表类似，不同的是它使用ol来创建其他的都和无序列表一样
                    - 有序列表使用有序的序号 作为项目符号    
                3.定义列表  
                    - 定义列表用来对一些内容做解释说明的
                    - 使用 dl 来创建一个定义列表
                    - 在dl中使用dt，来创建一个定义项
                    - 使用dd来创建一个对定义项的描述
                
                
                - 列表之间可以互相嵌套，可以在有序列表中放无序列表，也可以在无序列表放有序列表
        -->
        <ul>
            <li>西红柿</li>
            <li>大茄子</li>
            <li>小辣椒</li>
        </ul>
        
        <ol>
            <li>桃花源记</li>
            <li>岳阳楼记</li>
            <li>小石潭记</li>
            <li>醉翁亭记</li>
        </ol>
        
        <p>菜谱</p>
        <ul>
            <li>
                鱼香肉丝
                <ol>
                    <li>鱼</li>
                    <li>香</li>
                    <li>肉丝</li>
                </ol>
            </li>
            <li>宫保鸡丁</li>
            <li>青椒肉丝</li>
        </ul>
        
        <dl>
            <dt>武松</dt>
            <dd>景阳冈上的大虎英雄，战斗力99</dd>
            <dd>后来打死西门大官人，后逃逸，出家为僧</dd>
            <dt>武大</dt>
            <dd>著名餐饮企业家，战斗力0</dd>
        </dl>
        
    
    </body>
</html>

图像标签

常见的图像格式 JPG GIF PNG BMP

图片的相对路径

所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“11111111.html” 文件里引用了“11ha.jpg”图片，由于“11ha.jpg”图片相对于“11111111.html”来说，是在同一个目录的，那么在“11111111.html”文件里使用以下代码后：

<img src=“11ha.jpg” alt=“小女孩” />

只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

当图片在image文件夹里时：

src="image/11ha.jpg" alt="小女孩" />

如果在image里很深的文件夹，也可以一直罗列下去：

<img src="image/renwu/11ha.jpg" alt="小女孩" />

如果html文件在比图片深一层的文件夹里：

<img src="../11ha.jpg" alt="小女孩" />

如果html文件在比图片深两层的文件夹里，就在前面再罗列两个点“..”，深几层罗列几次。

<img src=“../../11ha.jpg” alt=“小女孩” />

图片在html文件上两级image文件夹中的renwu文件夹里

<img src=“../../image/renwu/11ha.jpg”/>

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href: 链接路径 target:链接在哪个窗口打开,常用值：self、blank

在线咨询

上一篇：「软件」使用Laravel快速构建RESTful风格
下一篇：HTML+CSS基础入门开发，双子星水平位移相对动画

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商