初识jQuery

什么是jQuery？

jQuery是一个快速、简洁的JavaScript框架，其封装了JavaScript的一些常用的功能代码。

主要包括：文档处理、事件处理、动画设计和AJax操作。

官方API地址： http://www.jquery123.com/jQuery.get/

W3CSchool帮助手册： http://www.w3school.com.cn/jquery/jquery_intro.asp

如何使用jQuery?

1、官网下载jQuery包（jquery-3.1.1.js），将其和需要使用JQuery包的html文件放在同一个文件夹中。

2、在html中使用<script type="text/javascript" src="jquery-3.1.1.js"></script>标签导入

jQuery的基本语法

$(selector).action();

其中selector类似css中的选择器，但不完全相同！

jQuery选择器主要有以下几种：

ID选择器-------->$("#id")

类选择器--------->$(".class")

标签选择器------->$("p")

还有直接将原生的js对象交给jQuery处理-------->$(Tag)

jQuery的文档处理

1、获取标签内容

    $(selector).text();获取标签之间（开始标签和结束标签之间）的文本内容。相当于js中的innerHTML

    $(selector).val();获取标签的value属性的文本内容。

    $("#select option:selected").val();获取select标签中被选中的option值。

2、获取子标签

    $(selector).children("p");获取直接子标签（只包含直属于父标签的子标签，不包含子标签嵌套的子标签），返回一个存储直接子标签的数组

    $(selector).find("p");获取所有子标签（包括子标签中嵌套的子标签），返回一个存储所有子标签的数组

    示例：

<ul id="hello">
 <li id="liOne">
     <ul>
         <li id="liTwo"></li>
            <li id="liTwo"></li
        </ul>
    </li>
    <li id="liOne">
     <ul>
         <li id="liTwo"></li>
            <li id="liTwo"></li>
        </ul>
    </li>
</ul>

以上代码为一个<ul>标签中嵌套了一个<ul>标签

var childrenList=$("#hello").children("li");--------->childrenList为：{li#liOne,li#liOne}

这个方法返回的数组中只包含id为liOne的<li>标签。

var findList=$("#hello").find("li");------------->findList为：{li#liOne,li#liTwo,li#liTwo,li#liOne,li#liTwo,li#liTwo}

这个方法返回的数组中包含所有的<li>标签。

3、遍历子标签

childrenList.each(function(index, element) {

}

jQuery的css操作

获取属性的值： $(selector).css("属性名称");

给属性赋值：$(selector).css("属性名称","属性的值");

jQuery对“src”等attribute的操作

有些不能写在css中的属性（例如"src"）可以通过以下方法进行赋值:

$(selector).attr(attibuteName,value);

jQuery的事件处理

点击事件示例：

$(selector).click(function(){
    
    
  });

jQuery的动画

显示：$(selector).show();

隐藏：$(selector).hide();

淡入：$(selector).show(500);参数为淡入的用时（单位为ms）

淡出：$(selector).hide(500);参数为淡出的用时（单位为ms）