jQuery:给Web页面增加视觉效果

jQuery:给Web页面增加视觉效果

前言：jQuery的产生和为什么使用jQuery

开发网页少不了给web页面增加视觉效果。但是当需要加入复杂的视觉效果时，需要大量js代码，过于复杂且消耗时间。jQuery由此产生。jQuery是由HTML支持的JavaScript库，它将几行代码包装成可以使用单个语句调用的方法。可以简化js的书写，使得js使用更加简单，同时可以使得代码更加简洁。

jQuery是一个开源的、跨浏览器的JavaScript代码库，创建它是为了简化JavaScript编程。所有级别的程序员都可以使用jQuery来增强Web页面的观感。jQuery支持事件，可以绑定到Web页面上的HTML元素。jQuery很容易理解，并且提供了许多预定义的特殊效果，因此它弥合了大量编码和Web设计之间的差距。使用jQuery, Web设计人员可以添加大量令人印象深刻的视觉效果，并扩展Web页面上的交互性。

设置jQuery环境

1. 在官网下载jQuery（直接搜索jQuery即可），选择想要的jQuery版本，我选择的是1.8.3的未压缩版。

2. 下载完后直接将jQuery包拉到对应项目中，并使用一下代码导入jQuery环境，注意需要在html的头标签里导入。src为文件路径。

   <script type="text/javascript" src="jquery-1.8.3.js"></script>
   

1.使用jQuery操作HTML元素

只有在Web页面完全加载之后才应该执行jQuery代码。为了确保在执行jQuery代码之前完全加载Web页面，jQuery提供了document.Ready()函数。此函数作用是在浏览器中完全加载Web页面后在HTML元素上执行的jQuery代码。

document.Ready()使用样例

<script>
    $(document).ready(function (){
        //jQuery code
    });
</script>

在上面样例中,$ 符号代表jQuery代码块的开始，jQuery code是要实现的代码。也可以使用关键字jQuery代替$.

document.ready()函数对于防止应该在HTML元素上执行的操作失败非常有用。例如，如果用于隐藏图像的jQuery代码在文档准备好之前执行，就会导致失败。因此，为了只在文档准备好在浏览器窗口中显示时才允许执行jQuery代码，所有jQuery方法和代码都应该声明和定义在document.Ready()函数。

由于使用jQuery操作HTML元素，所以应该首先选择元素，以便在元素上实现jQuery代码。

下面语法用于选择html元素和实现相关方法.

$(selector).action();

selector用于选择要操作的元素,action表示要实现的方法.

jQuery提供了许多可应用于HTML元素的内置操作，如(hide)隐藏、(fadeout)淡出、(show)显示和(slideup)滑动。考虑以下代码来隐藏HTML文档中所有< H1>元素:

<script>
    $(document).ready(function (){
        //jQuery code
        $("h1").hide();
    });
</script>

1.1使用jQuery选择器

jQuery使用选择器去选择和操作html元素,可以选择一个html元素通过

1. 元素名
2. 属性名
3. css选择器

1.1.1选择元素名

jQuery可以通过html元素名选择html元素,jQuery通过选择元素的name,class,id来对对应html元素进行操作.如下面例子

$("h1")
$("#Element_id")
$(".Element_class")

具体使用,例如

//一个元素的id为username
$("#username")
//一个元素的class为username
$(".username")

可以发现选择过程类似css中操作对应的html元素.

当一个html元素即定义了class的值也定义了id的值,如下

<h1 class="title">
<h1 id="title_id">

也可以用以下方法对特定h1元素进行操作

$("h1.title")
$("h1#title_id")

$(“h1.title”)只会对h1中的title类进行操作。

jQuery还支持元素嵌套。这允许对嵌套在其他元素中的元素应用操作。例如，列表项嵌套在列表中。考虑在线购物网站的例子，Web设计人员想要实现一个菜单和子菜单。必须链接子菜单项，以在新文档中显示它们的详细信息。

举例

html页面，列表嵌套，菜单与子菜单。

<p>menu</p>
<ul id="menu">
    <li>laptop</li>
    <ul>
        <li><a href="#" >t1</a></li>
        <li><a href="#" >t2</a></li>
        <li><a href="#" >t3</a></li>
    </ul>
    <li>phone</li>
    <ul>
        <li><a href="#" >b1</a></li>
        <li><a href="#" >b2</a></li>
        <li><a href="#" >b3</a></li>
    </ul>
</ul>
<button>Hide List</button>

使用jQuery隐藏列表内容

<script>
    $(document).ready(function (){
        //jQuery code
        $("button").click(function (){
            $("#menu ul").hide()
        })
    });
</script>

效果

点击按钮后

可以发现$(“#menu ul”)选择的是id为menu的列表中的子列表。

1.1.2使用属性名

使用语法

$("[attribute_name]")

例如

$("[src]")

也可以指定具体的src属性,注意这里是指定具体的src属性,不是给src属性赋值.

#("[src='a.jpg']"

1.1.3使用css选择器

jQuery提供css选择器去修改css属性.使用语法为

selector.css(PropertyName，PropertyValue);

使用举例

$("div").css("color","green")

以上效果为指定< div>的颜色为green.

jQuerycss选择器不只是只能指定一个css元素

$("div").css("color":"green","font-size":"200%")