JQUERY基础知识总结

       /******************************************1************************************/

初步了解jQuery(jQuery是什么)

知识点：
1. jQuery概述
   a.jQuery是什么:是一个javascript代码仓库，我们称之为javascript框架。
     是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
   b.它可以帮我们做什么(有什么优势)、
    1>体积小，使用灵巧(只需引入一个js文件)
    1>方便的选择页面元素(模仿CSS选择器更精确、灵活)
    2>动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
    3>控制响应事件(动态添加响应事件)
    4>提供基本网页特效(提供已封装的网页特效方法)
    5>快速实现通信(ajax)
    6>易扩展、插件丰富

2.注意事项和编写规范
3.如何下载JQUery
  官方网站：http://jquery.com/
3.如何引入JQuery包
  a.引入本地的JQuery
  b.引入Google在线提供的库文件（稳定可靠高速）
  c.使用Google提供的API导入
    <script type=“text/javascript” src=“jquery.js”></script>
    写第一个JQUery案例
    <script type=“text/javascript” src=“”></script>
    <script type=“text/javascript”>
        $(function(){
            alert(“jQuery 你好!”);
        });
    </script>
    【解释】在JQuery库中，$是JQuery的别名，$()等效于就jQuery().

 
4.讲解$(function(){});
    a.$是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
    b.希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始。
    $(document).ready(function(){});
          类似于js的window.onload事件函数，但是ready事件要先于onload事件执行。
        window.onload = function(){};
        为方便开发，jQuery简化这样的方法，直接用$()表示

    【JQuery的ready事件不等于Js的load】：
        1.执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件。
        2.用法不同：load只可写一次，ready可以多次。

6.jQuery有哪些功能(讲API)：

    a. 选择器 b.过滤器 c.事件 d.效果 e.ajax

/******************************************2************************************/

JQUERY中的选择器;

 一.基本选择器:

  1.ID选择器（$("#ID")  2.类选择器($(".class") 3.标签选择器($("标签名称")

  4.组合选择器($("选择方式1，选择方式2，...")特点：无数量限制，以逗号分隔 (逐个匹配，结果全部返回)
  5.通配符选择器($("*")[选择全部DOM元素])

 二.层次选择器:(通过DOM嵌套关系来选择元素)

  1.包含选择器：

   $("p1 p2"): 选择方式之间以空格隔开

 特点:在给定的祖先元素下匹配所有后代元素。(不受层级限制)

  2.子选择器:

   $("parent>child"):父对象>子对象，这样选择更精确

  3.相邻选择器:

  $("p1+p2"):俩个选择对象之间以+相连。特点:匹配所有紧接在p2元素后的next元素

  4.兄弟选择器:

   $("p~siblings"):选择所要的同级的兄弟元素 特点:匹配prev元素之后的所有sibling元素。

 三.常用伪类选择器:可以看作是一种特殊的类选择符
/*1*/
    选择器        说明
    :first        匹配找到的第1个元素
    :last        匹配找到的最后一个元素
    :eq        匹配一个给定索引值的元素
/*2*/
        :even        匹配所有索引值为偶数的元素
        :odd         匹配所有索引值为奇数的元素
        :gt(index)   匹配所有大于给定索引值的元素
        :lt(index)   匹配所有小于给定索引值的元素
/*3*/
    :not        去除所有与给定选择器匹配的元素
  1.特定位置选择器
    :first/:last/:eq(index)
    例：
    <table>
        <tr><th>特定位置选择器</th><th>描述</th></tr>
        <tr><td>:first</td><td>匹配找到的第一个元素</td></tr>
        <tr><td>:last</td><td>匹配找到的最后一个元素</td></tr>
    </table>
   2.指定范围选择器

        :even        匹配所有索引值为偶数的元素
        :odd         匹配所有索引值为奇数的元素
        :gt(index)   匹配所有大于给定索引值的元素
        :lt(index)   匹配所有小于给定索引值的元素

   3.排除选择器
    :not 非  列：$("div:not(.a1)")选中calss不为a1的div
/*****************************选择器优化***************/
   四.选择器优化

   1）；选择器优化

   1.多使用ID选择器

   2.少使用类选择器。（尽量以组合选择器 列如:($("div.class")/$("#id.class")

   3.使用子选择器 $（“p>c"),少使用包含选择器

   4. 缓存jQuery对象

    使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器

  jquery中选择器是模拟css中的样式选择的方式。过滤器就是在选择器的基础上做二次选择

3. 使用过滤器
    jQuery提供了2种选择文档元素的方式：选择器和过滤器
    a. 类过虑器：根据元素的类属性来进行过滤操作。
             hasClass(className)：判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不包含返回false
    b. 下标过滤器：精确选出指定下标元素
             eq(index)：获取第N个元素。index是整数值，下标从0开始
    c. 表达式过滤器
        filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。
                   功能最强大的表达式过滤器，可接收函数参数，也可以是简单的选择器表达式
    d. 映射 map(callback)：将一组元素转换成其他数组
    e. 清洗 not(expr)：删除与指定表达式匹配的元素
    f. 截取 slice(start,end)：选取一个匹配的子集

4. 查找
    a. 向下查找后代元素
        children():取得所有元素的所有子元素集合（子元素）
        find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
    e. 查找兄弟元素 siblings()查找当前元素的兄弟

/***********************************************JQUERY操作DOM*************************************************************************/

在javascript中操作DOM（添加标签元素)：

var div=document.createElement("div");//创建一个DIV标签

var txt = document.createTextNode("文本内容");//创建一个文本节点

div.setAttribute("title","标题");//添加一个title属性

    div.appendChild(txt);//将文本内容添加到div中

document.body.appendChild(div);//将创建的div添加到body中；

jquery操作DOM（添加标签元素)：

 var $div=$("<div title="我是标题">我是jquery创建的DIV</div>");

 $("body").append($div);

append(在后添加）parent.append(child);

appendTo（）:child.appendTo(parent);

prepend(在前添加)   用法和上面雷同

prependTo

insert

insertAfter:添加字符串

before

删除标签对象： $("sel").remove();  (标签从DOM中被删除）

清空标签内容:$("sel").empty();        （只是清空标签的内容，标签依然存在)

克隆与切换class的列子:：

$(function(){

   $("sel").click(function(){

   $(this).toggleClass(".on");//点击则添加calss .on 再点击则清除calss 如此反复

}

  $("sel").clone(true).insertAfter("sel1"); //clone():当参数为false或者不要参数时只克隆标签体和内容，如果为true则全部克隆包括事件

})

注意：jquery中对象使用的方法：$(obj）/$("选择器"), 格式是套一个$(   );才代表JQUERY对象

替换：

replaceWith(): $("sel").replaceWith("<button>"+$(this).text()+"</button>");  this为对应的触发事件的对象

replaceAll():$("<button>222</button>").replaceAll($("sel")

/***一般来说jquery是封装好了的javascript方法对象，更加简洁*****************************************************************/