前端jQ的使用

         我们刚开始学Visual Studio 2015的基础时候会通过学习基本的html代码和css样式还有JS来方便我们学习。Jq和js使用类似都是用script标签包括起来。Jq代码比JS代码更加简洁，

1、下面我们通过一个例子来分析一下，

 

实现网页换肤，在这之前我们通过简单html和css代码布局。

如何实现这个效果才是问题，首先我们刚开始接触Visual Studio 2015一般情况下

把页面布局搭建起来是没有问题的.关键是怎么引用它实现我们要做的效果。

从上面图片中我们可以看到选择网页皮肤后面跟着有不同颜色的小框子，我们要实现的效果是只要点击到它，就能够使网页变成小框子的颜色，这是一个很简单的过程，那么如何实现这个效果呢？

首先呢！我们要把布局弄好，通过获取他们的标签名称或者class命名再或者通过设置id获取到它的属性。

比如我上面通过的是ul标签的子元素直接获取里面li标签来执行这一系列操作，

我们要改变的是网页皮肤（也就是body）。那么在之前我们学习js的时候经常会用到document.getElementBy…来获取到要改变的属性名。在Visual Studio 2015中呢获取属性是非常简单的一件事比如：$(“li”)直接获取到了html中所有的li标签，而$(“#hd”)获取到的是body标签，还有一类标签是$(“.class属性名”)获取到的是class属性名标签；获取到了之后就开始创建一个函数来触发条件，我们要做的是点击小框子就能变成它那样的颜色，所以我们要创建一个li标签的点击事件。生成了点击事件之后、我们为了兼容性问题给他添加一个event命名函数来使不同的浏览器也能打开实现这个效果。

接下来我们可以直接声明一个变量=我们用改变的属性值。

学习过js我们可以直接引用在js中getComputedStyle来获取到它，

然后通过document.标签名.style.background=变量；来完成这个效果。

还有很多更加简洁的写法等着我们去挖掘、在这些过程中要熟悉基础的代码然后通过指定的代码使他们连接在一起，就能够实现强大的效果。

 

  2、通过Visual Studio 2015给html添加新的内容

首先我们在之前用过JS添加，接下来我们用JQ代码来完成和JS一样的内容，

我们先使用它给HTML添加一个元素子节点，给父元素添加子节点的方法有很多个接下来我来讲一下以下三种方法对于初学者来说这是很好理解而实用的方法。

首先第一个就是append方法

这个方法是直接给父元素追加一个子节点并且直接应用到里面去，类似于给把里面的东西添加到文档当中去，也可以直接添加内容。我们也可以给添加的标签取一个类名，这是可以的，也直接把style样式直接添加在里面。

而另外一个prependTo方法就不太友好它的特点是只能配合标签使用，如果没有给他一个标签添加进去就不会有任何的效果，还有就是要区分他们的大小写。

所以不同的方法有不同的效果，每一个方法都有着他们特定的意义。

prependTo跟我们上面append的写法有点不一样，append是以为一个命名函数作为开头，而prependTo是以你要添加的内容作为开头并且作为一个参数的形式出现，他们的过程就像是把这个内容通过prependTo方法传递的这个父元素里面作为子元素节点或者内容呈现。

 

还有一个方法就是prepend，它和append的使用基本上都是一致的，但是呢他们的作用不同prepend这个方法和把你添加的内容直接添加到开头也就是父元素的第一个子节点这就是它的特别之处。

 

3.使用JQ完成一个简单的点击事件。

  首先我们把它的首要条件都添加好，下面你看到click方法click方法我们并不陌生，其实非常简单。

当我们完成事件的绑定后，输出一个$(this).text()，你会发现this其实和我们的JS的的含义是一样的都是指向变量$(“li”)的文档内容。所以说JQ代码很简单学习简洁，方便，简单。