jQuery基础知识总结

1、什么是JQuery？

    它是js的一个框架，它是开源的项目。对底层的js进行封装，我们通过js框架就可以快速的完成DOM

    对元素的增删改查操作，并提供了动画功能。jquery对外提供api让开发者去开发jquery

    插件（就是一个功能模块，用户只要做一些简单的配置就完成复杂的功能）。jquery目前

    是比较流行的一个JQuery框架。（宗旨：写得少，做的多）。

 

2、JQuery特点:

   轻量级

   强大的选择器

   出色的DOM封装

   可靠的事件处理机制

   完善的Ajax

   出色的浏览器兼容性

   丰富的插件支持

   完善的文档

   支持链式操作

 

3、JQuery的环境配置

   1)官网：http://www.jquery.com

   2)去下载jquery库文件:

      通常有两个版本:

       *未压缩版本：--用在开发和调试。（我们下载此版本）

       *压缩版本:--产品发布的时候使用，可以提高性能和减少带宽

 

4、在html页面中如何使用jQuery？

    使用<script src="jquery.js" type="text/javascript"></script>引入

 

5、在<script></script>内编写jquery脚本   

/*当文档解析完毕好以后去执行一个函数*/
// 第一种写法
jQuery(document).ready(function(){
    alert("hello,jQuery");
});


// 第二种写法
$(document).ready(function(){
    alert("hello,jQuery");
})


// 第三种写法
$(function(){
    alert("hello,jQuery");
})

      注意:jQuery可以使用$符号作为别名。

 

      强调:和window.οnlοad=function(){}区别?

      *加载时机不同，$(function(){})优先于window.οnlοad=function(){}先执行

      *执行的次数不同，window.οnlοad=function(){}只会执行最后一个绑定的函数。

        $(function(){})可以绑定多个函数来分别执行。

 

6、JQuery对象和DOM对象之间的关系，他们之间如何去转换？

   *使用DOM方法来查询得到的结果是DOM对象，它只能访问DOM对象中所提供的属性和方法。

   *使用JQuery查询得到的结果是Jquery对象，它只能访问jQuery对象中所提供的属性和方法。

     也就是说JQuery对象不能调用DOM对象的属性和方法，反之也一样。

 

     注意:养成一个良好的书写习惯,JQuery对象的变量名最好以$开头。

 

   记住:JQuery查询出来的结果是一个对象数组，就算根据id来进行查询就是返回的是一个对象数组。

        数组内存放的是DOM对象。

 

 

   *JQuery对象转换成DOM对象，通过[下标]就可以转，或者get(下标)方法来取出数据就是DOM对象

   *DOM对象转换成JQuery对象，通过$()工厂函数就可以了，把DOM对象作为参数传给$()函数，那么

      就把DOM对象转换成了JQuery对象。

 

-------------------------------------------------------------------------------------------

选择器的学习:

   *回顾下CSS选择器：---css选择器的作用是给指定的元素设置样式的。

    1)id选择器  #id名{样式规则}     id="id名"

    2)类选择器  .类名{样式规则}     class="类名1 类名2 ....."

    3)标签选择器 标签名{样式规则}

    4)后代选择器 选择器1 选择器2{样式规则}

    5)子元素选择器  选择器1>选择器2{样式规则}

    6)相邻选择器  选择器1+选择器2{样式规则}

    7)同辈选择器  选择器1~选择器2{样式规则}

    8)属性选择器

         [属性名='值']

     [属性名^='值']

     [属性名$='值']

     [属性名|='en']   比如:<input type="en-aa">

     [属性名*='en']

     [属性名~='en']   比如:<input type="en aa">

 

   jQuery选择器:--Jquery选择器的作用是给指定的元素设置行为的。它提供了css1，css2

                  css3部分的选择器，还包含自身特有的一些选择器。功能比较强大。

 

    选择器效率的问题

      1)$("#id")

      2)$("#id").find("");

      3)$("p")

      4)$(".className")

      5)$("#id :hidden")

 

 

 

   1)常用的基本选择器

     #id:根据给定的id匹配一个元素*****

     .classname:根据给定的类名匹配一个元素*****

      classname:根据给定的元素名匹配元素*****

     *:匹配所有元素

     select1,select2…:将每一个匹配到的元素合并后一起返回

 

   2)层次选择器*****

     ancestor descendant:选取ancestor元素里的所有descendant元素--对应的方法find()

     parent>child:获取parent元素下的child元素---对应的方法children()

     prev+next:选取紧接在prev元素后的next元素---对应的next()方法

     prev~siblings:选取prev元素之后的所有siblings元素--对应的nextAll()方法

      实例：         

//获取所有的input元素

alert($("#divTest input").length);

alert($("#divTest").find("input").length);

// 获取id为divTest的元素下的input子元素

alert($("#divTest>input").length);

alert($("#divTest").children("input").length);

// 获取id为next元素的下一个input元素的内容

alert($("#next+input").val());

alert($("#next").next("input").val());

//获取id为next元素的前后所有同辈a元素的个数

alert($("#next~span").length);

alert($("#next").siblings("span").length);

 

   3)基本过滤选择器

     :first:根据给定的id匹配一个元素==first()

    :last:根据给定的类名匹配一个元素---last()

    :not(selector):去除所有与给定选择器匹配的元素

    :even:选取索引值为偶数的所有元素,从0开始计数*****

    :odd:选取索引值为奇数的所有元素,从0开始计数*****

    :eq(index):匹配一个给定索引值元素,从0开始*****

    :gt(index):匹配大于给定索引值元素,从0开始

    :lt(index):匹配小于给定索引值元素,从0开始

    :header:选择h1,h2,h3一类的标签

    :animated:匹配正执行动画效果的元素

    :focus:匹配获取焦点的元素

 

   4)常用的内容过滤选择器

    :contains(text):匹配包含给定文本的元素

    :empty:匹配所有不包含子元素或者文本的空元素

    :has(selector):匹配含有选择器所匹配元素的元素*****

    :parent:选取含有子元素或者文本的元素

 

        //查找空元素的个数

          //alert($("li:empty").length);

          //查找内容包含ip的li元素的个数

          //alert($("li:contains('ip')").length);

          //查找拥有子元素的所有li元素，输出满足条件的元素个数

         // alert($("li:parent").length);

          //查找并输出包含a元素的li元素的内容

          //alert($("li:has('a')").text());   

 

    5)常用的可见性过滤选择器*****

     :hidden:选取所有不可见的元素 <input type="hidden">  display:none

     :visible:选取所有可见的元素

 

    6)常用的属性过滤选择器

    元素名[attribute]:选取拥有此属性的元素

    元素名[attribute=value]:选取属性值等于value的元素

    元素名[attribute!=value]:选取属性值不等于value的元素

    元素名[attribute^=value]:选取属性值以value开始的元素

    元素名[attribute$=value]:选取属性值以value结束的元素

    元素名[attribute*=value]:选取属性值包含value的元素

    元素名[attribute|=value]:选取属性值是value的元素或以value开头，后面跟-

    元素名[attribute~=value]:选取属性值包含value且以空格隔开的元素

    元素名[attribute1][attribute2]…:多个属性选择器合并成一个复合属性选择器

 

    7):常用的子元素过滤选择器

    :first-child:选取每个父元素下的第一个子元素

    :first-of-type:选取同名兄妹节点的第一个子元素的所有元素

    :last-child:选取每个父元素下的最后一个子元素

    :last-of-type:选取同名兄妹节点的最后一个子元素的所有元素

    :only-child:选取父元素中具有唯一的子元素的所有元素

    :only-of-type:选取前后没有同名兄妹节点的子元素的所有元素

    :nth-child(index/even/odd):选取每个父元素下的第index个子元素或奇偶元素（index从1开始算起)

    :nth-last-child(index/even/odd):取每个父元素下的第index个子元素,从最后一个往第一个数（index从1开始算起)

 

    8):常用的表单选择器

    :input:选取所有<input>、<textarea>、<select>和<button>元素(表单元素)

    :text:选取所有单行文本框

    :password:选取所有密码框

    :radio:选取所有单选按钮

    :checkbox:选取所有复选框

    :submit:选取所有提交按钮

    :image:选取所有图像按钮

    :reset:选取所有重置按钮

    :button:选取所有按钮

    :file:选取所有上传域

 

     9)常用的表单对象属性过过滤选择器

    :disabled:选取所有不可用元素

    :enabled:选取所有可用元素

    :checeked:选取所有被选中的元素（单选框和复选框）

    :selected:选取所有被选中的选项元素(下拉列表)

 

 

jQuery绑定事件       

$("#title").click(function(){
    if($("#content").is(':hidden')) {
        $("#content").slideDown(1000);
    }else{
        $("#content").slideUp(1000);
    }
});

 先学习四个动画函数

 show(时间)---即改变透明度，高度、宽度

 hide(时间)---即改变透明度，高度、宽度

 

 slideDown(时间)--只改变元素的高度

 slideUp(时间)--只改变元素的高度

 

 判断元素是否隐藏条件？

   if($("#content").is(':hidden')){

 

   }

 

 层次选择器所对应的方法*****

next([元素])--找下一个同辈元素

pre([元素])--找上一个同辈元素

nextAll([元素])--找后面的所有同辈元素

preAll([元素])--找前面的所有同辈元素

siblings([元素])--找前后所有的同辈元素

text()---获取文本

html()--获取文本

val()--获取value属性值

length--长度

find([元素])--查找后代元素  对应的另一种写法 $("ol", this)--从this（元素）中去查找后代ol元素

focus()--让元素获得焦点

parent()--获得父元素

parents()--获取父辈元素

addClass(类名)--给元素添加类选择器

 

 

//改tab选项卡的功能，能用jquery尽量使用jquery来实现？

 

//

 

------------------------------------------------------------------------------------

*常用管理选择器所得到结果的方法*****

  1.index()--获取指定元素在查询结果中的下标。

  2.add()--在集合中添加元素

  3.not()--在集合中删除元素

  4.filter(匹配的条件/匹配的函数)--筛选集合中的元素--把符合条件的元素取出来生成一个新的数组。

  5.find()--对应的另一种写法 $("ol", this)--从this（元素）中去查找后代ol元素

  6.each()--遍历集合

  7.end()--回到上一个操作对象

  8.addBack()--结果集中加入上一个操作对象

 

*创建并插入元素节点:通过$(标签的书写规范)函数

  append()    向每个匹配的元素内部追加内容*****

 appendTo()    将所有匹配的元素追加到指定的元素中

 prepend()    向每个匹配的元素内部前置内容

 prependTo()    将所有匹配的元素前置到指定的元素中

 after()    在每个匹配的元素之后插入内容

 insertAfter()    将所有匹配的元素插入到指定元素的后面

 before()    在每个匹配的元素之前插入内容

 insertBefore()    将所有匹配的元素插入到指定元素的前面

 

*删除元素

 1、remove():对元素进行删除，返回删除的那个元素事件不可用

 2、detach():对元素进行删除，返回删除的那个元素事件可用

 3、empty():对元素进行后代元素的清除，返回没有后代元素的空元素，元素绑定的事件还是存在的。

 

*包裹元素

 1)wrap()

 2)wrapAll()

 3)wrapInner()

 

*对元素属性的操作*****

 1)attr(“属性名字”)--获取属性对应的值

 2)attr("属性名","属性值")--设置一个属性所对应的值

 3)attr({"属性名":"值","属性名":"值",......})--设置多个属性值

 

*给元素添加类选择器*****

  1)addClass("选择器1 选择器2");//添加多个类选择器

  2)removeClass();删除元素上所有的类选择器

  3)removeClass("类选择器名");删除元素上指定的选择器

  4)hasClass("类选择器名")；使用类选择器返回true，否则返回false

  5)toggleClass("类选择器名");根据元素是否使用这个类选择器来进行自动切换，使用的话删除，未使用的话添加。

 

*获取、设置文本的内容和值的方法

  1)html()

  2)text()

  3)value()--它可以回去文本的value属性值，也可以设置文本框的value属性值

           --选中下拉列表框的选项

       --选中复选框

       --选中单选框

 

*遍历节点操作*****

  1)children()--找元素中的子元素（可以指定具体要查询的子元素）

  2)next()

  3)prev()

  4)parent()

  5)parents()

  6)closest()

  7)siblings()

 

 --------------------------------------------------------------------------------

 *css-DOM的操作

   1)css()方法---作用，就是给标签设置行内样式，给标签设置style属性值       

$("p").css("color","red");

$("p").css({"color":"red","fontSize":"32px","backgroundColor":"#888888"});

alert($("p").css("fontSize"));

   2)设置元素的宽和高

     1)width()

     2)height()

     注意：

     *有参数是设置，无参数是获取

     *获取浏览器的宽和高

     alert($(window).width());

     alert($(window).height());

     innerHeight()--包括内边距。不包括边框和外边距

     outerHeight()--包括内边距,包括边框       

     innerWidth()

     outerWidth()

 

   3)设置元素的滚动偏移量

     scrollTop()

     scrollLeft()

 

     $(window).scroll(function(){});浏览器滚动事件

 

   4)css-DOM中的定位方法

     offset()--得到一个Jquery对象，里面封装了相对浏览器的偏移量（left，top属性）

              还可以设置相对浏览器的偏移量 offset({left:100,top:100});

     position()--得到一个Jquery对象,里面封装了相对父元素的偏移量left，top属性）

 

*事件的绑定

  1)on("事件类型1 事件类型2",[{"键":"值"}],"处理函数");

     *第一个参数，事件类型可以多个

     *第二个参数,传给处理函数的数据

     *第三个参数,响应处理函数

 

  2)off()--解除元素的绑定事件

    *不带参数，解除元素上所有的事件

    *带事件名，多个用空格隔开，解除元素上指定的事件

    *带两个参数的，解除具有指定处理函数的事件

 

  3)简写的方式*****

    语法:jquery对象.事件(),比如:$show.click(function(){}).mouserover(function(){})

 

*常用的合成事件

  1)hover(函数1，函数2)

    当鼠标移入的时候执行函数1，移出的时候执行函数2

  2)toggle()--切换（隐藏的时候显示，显示的时候隐藏）

 

*事件对象

  什么是事件对象？

  当一个元素触发事件的时候，内部会生成一个事件对象，（里面封装了与事件相关的信息）

  此事件对象作为参数传给处理函数。处理函数就能从事件对象中获取相关的事件信息

  比如:通过事件对象可以阻止冒泡型事件、阻止元素的默认行为，获得鼠标的坐标、

  获得键盘按键所对应的字符或码值、获得鼠标的按键类型、获得事件源、获得事件类型

 

  1)event.type属性--获取事件类型

  2)event.preventDefault();--阻止元素的默认行为

  3)event.stopPropagation();--阻止冒泡型事件

  4)event.target---获取事件源,返回的是DOM对象

  5)event.pageX和event.pageY 获得鼠标的X,Y坐标

  6)return false，既阻止元素的默认行为，又阻止冒泡型事件

  7)event.which,获得鼠标键 1，左，2中 3右

  8)event.keycode

 

*模拟事件的操作

  trigger("事件名")

  可以使用简写的方式，比如元素.click()

 

 ----------------------------------------------------------------------------------

 *jQuery动画?

 动画就是在单位时间内去修改元素的一个或多个属性值，也就是属性值在单位时间内从一个

 状态到另外一个状态。

 

 jquery为什么提供了一些现成的动画方法来完成特定的效果。

 show(毫秒)

 hide(毫秒)

    ---上面两个动画在指定的时间内改变属性透明度、高度、宽度。

 toggle()--在show()和hide()之间进行切换，自动判断隐藏还是显示

 

 fadeIn()

 fadeOut()

 fadeToggle()--透明边不透明，不透明变透明

 fadeTo()--指定透明度

     ----只改变元素的透明度

 

 

slideDown()

slideUp()

slideToggle()--收起的时候显示，显示的时候收起。

   ---改变元素的宽度和高度。

 

以上动画都可以指定完成时间和一个函数，这个函数的作用就是当动画结束后要执行的功能。

 

*以上提供的动画未必能满足我们开发中所需的所有需求，所以要学会自定义动画。

 

  总结：自定义动画用animate({多个属性的键值对}，时间，函数)；

 

  结束动画:stop(参数1，参数2)

      参数1：清除队列中的所有动画  true

      参数2：让正在执行的动画直接跳到末尾状态 true

  延迟动画的方法

     delay(时间)--时间为毫秒数