利用JS生成博文目录及CSS定制博客

JavaScript017

利用JS生成博文目录及CSS定制博客,第1张

本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法,分享给大家供大家参考,具体内容如下

1.JS代码

想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的。

拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了。要注意目录的生成是几级标题,这一点可是很重要的。JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意。

综合来说,这个目录有以下几点的特点,这些也都可以在本文中看到(二级目录本博文没有使用)。

1).

可以在博文首部生成两级目录

2).

每个一级目录上方有一个回到顶部的链接

JS代码如下。

<script

language="javascript"

type="text/javascript">

//

生成两级目录索引列表

function

GenerateContentList()

{

var

mainContent

=

$('#cnblogs_post_body')

var

h2_list

=

$('#cnblogs_post_body

h2')//如果你的章节标题不是h2,只需要将这里的h2换掉即可

if(mainContent.length

<

1)

return

if(h2_list.length>0)

{

var

content

=

'<a

name="_labelTop"></a>'

content

+=

'<div

id="navCategory">'

content

+=

'<p

style="font-size:18px"><b>目录</b></p>'

content

+=

'<ul>'

for(var

i=0

i<h2_list.length

i++)

{

var

go_to_top

=

'<div

style="text-align:

right"><a

href="#_labelTop">回到顶部</a><a

name="_label'

+

i

+

'"></a></div>'

$(h2_list[i]).before(go_to_top)

var

h3_list

=

$(h2_list[i]).nextAll("h3")

var

li3_content

=

''

for(var

j=0

j<h3_list.length

j++)

{

var

tmp

=

$(h3_list[j]).prevAll('h2').first()

if(!tmp.is(h2_list[i]))

break

var

li3_anchor

=

'<a

name="_label'

+

i

+

'_'

+

j

+

'"></a>'

$(h3_list[j]).before(li3_anchor)

li3_content

+=

'<li><a

href="#_label'

+

i

+

'_'

+

j

+

'">'

+

$(h3_list[j]).text()

+

'</a></li>'

}

var

li2_content

=

''

if(li3_content.length

>

0)

li2_content

=

'<li><a

href="#_label'

+

i

+

'">'

+

$(h2_list[i]).text()

+

'</a><ul>'

+

li3_content

+

'</ul></li>'

else

li2_content

=

'<li><a

href="#_label'

+

i

+

'">'

+

$(h2_list[i]).text()

+

'</a></li>'

content

+=

li2_content

}

if($('#cnblogs_post_body').length

!=

0

)

{

$($('#cnblogs_post_body')[0]).prepend(content)

}

}

}

GenerateContentList()

</script>

2.

一级标题CSS格式

我在观察zzq同学的一些博文里面的一级标题有一个浅灰色的背景,觉得添加之后看起来很不错。在这里就借用一下该图片作为一级标题的背景,图片和CSS的说明如下。

#cnblogs_post_body

h2

{

background-repeat:

no-repeat

background-image:

url('http://xxxx')

}

以上就是本文的详细内容,希望对大家的学习有所帮助。

JavaScript作为网站前端的核心知识是非常重要的,但是如何学习JavaScript是很多初学者面对的一个难题,下面我说一下个人对于如何学习JavaScript的一点心得,希望能帮到大家。

1、首先学习基础,尤其是JavaScript与其他语言不同的基础知识。

学习每个编程语言可能都要从基础的变量函数结构等学起,JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方,这些东西是尤其需要我们注意的,比如说自调函数、比如说变量值为空不是null而是undefined的等,这些东西都是和主流的编程的语言如c++、java等是有区别的,所以想要学好JavaScript,这些基础的知识一定要把握好学习好才行。

2、关于学习JavaScript的进阶

JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西,这些东西都是深入学习JavaScript的难点,简单的说一下JavaScript是基于对象的浏览器脚本语言,但是为了使JavaScript也能够支持面向对象编程,人们就使用了很多的方法来模拟面向对象的的特点,这些就变成了JavaScript的一些难点,比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等,这些东西都是和其他支持面向对象的语言是不同的,所以就导致了一些难点。关于进阶学习JavaScript,还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文,这些东西都是JavaScript比较深入的知识、

最后说明,JavaScript作为前端的核心语言绝对没有没有想象的那么简单,要想学好JavaScript除了以上提到的知识和注意点,还需要的就是多动手和实践,我们都知道网页上的所有特效都是借助JavaScript来实现,那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效,当然学习使用jQuery等JavaScript类库进行开发也十分的重要,但是这绝对不能是取代我们学习JavaScript的方法。

来看看js代码的用法。

我们在使用JavaScript代码有两种写法:一种是在HTML页面中直接嵌入js代码,另一种是通过链接外部的JavaScript文件。

我们先来看第一种用法:在HTML页面中直接嵌入js代码

如果在HTML页面中直接嵌入JavaScript代码,我们需要使用 <script>标签,<script>和 </script>会告诉 JavaScript 在何处开始和结束。

<script>和 </script>之间的代码行包含了 JavaScript:

<script>

alert("My First JavaScript")

</script>

在HTML页面的任何位置(head部分 body部分 body的后面 较好)都可以插入script标签。

你有可能会在 <script>标签中看到使用 type="text/javascript",但是现在已经不必这样做了。JavaScript现在已经是所有现代浏览器以及 HTML5 中的默认脚本语言。

我们来看一个具体的示例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script>

document.write("<h1>This is a heading</h1>")

document.write("<p>This is a paragraph</p>")

</script>

</body>

</html>

上述代码就是在在HTML页面中直接嵌入js代码。

接着我们来看看js代码的第二种用法:通过链接外部的JavaScript文件。

有时JavaScript代码过多的话,我们可以将代码单独放在JavaScript文件中然后链接起来。

我们链接外部JavaScript文件可以有以下步骤

1、首先我们建立一个JavaScript文件,扩展名是.js

2、然后将要编写的js代码写到Js文件中,并保存文件。

3、使用script标签将JavaScript文件链接到HTML文件中

<script type="text/javascript" src="JavaScript文件名和路径"></script>

需要注意一点的是,在一个已经引入外部js文件的script标签中,不能在它的开始标签和结束标签中写Js命令了。

我们来看一个具体的示例

我们先建一个js文件sample.js

然后写入js代码

document.write("<p>This is a paragraph</p>")

最后使用script标签将JavaScript文件链接到HTML文件中

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script type="text/javascript" src="sample.js"></script>

</body>

</html>

以上就是js代码使用的两种方法