jQuery框架基础知识点

JQuery框架

1，使用JavaScript的所要完成的事情：

 可以方便快捷的查找需要的HTML元素

 处理javascript事件

 使用javascript开发新的组件（菜单，对话框，选项卡，日历等）

 使用JavaScript实现页面动画

 使JavaScript可以兼容主流浏览器

2，使用JQuery框架的好处：

 兼容主流浏览器

 可定制程度高，结构合理

 纯JavaScript框架，程序小巧

3，引入JQuery的两种方式：

  生产模式，经过压缩的js文件（体积轻巧）

  开发模式，未经压缩的js文件（利于调试）

ps:一般情况下，使用csd导入谷歌或百度的JS文件，这样可以减少本机对服务器的压力

4, 使用JQuery的语法：

$(表达式，[内容])

A:用法一：

查找元素

$("div"):返回该标签的所有元素

$("#id1"):返回id属性名称为id1的元素

$(".cl"):返回类名为cl的元素

B:用法二：

DOM对象和jQuery对象的互相转换

a,将DOM对象转换为jQuery对象只需在DOM对象包装在$()中就好

b,将jQuery对象转换为DOM对象可以通过获取其下标的方法获取

  $("#test")[0]

C:用法三：替代onload方法

在JavaScript中使用window.onload()加载整个页面，但这种方式会将页面中的图片，css样式等一下加载完才执行onload()方法，

这样的方式具有一定的滞后性，因此，jQuery提供了的方法是：

 $(document).ready(function(){函数体})；

 这样的方式在页面的HTML代码执行完就加载，提高了效率

jQuery对象常用的方法：

一，显示效果类操作

1，show和hide方法可以用来显示和隐藏元素

  实例：

     $(document).ready(function(){

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

                $(".adv").hide()

            });

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

                $(".adv").show()
            })  
         })

2,也可以使用toggle()方法来替代show和hide，toggle会根据当前元素的显示状态进行显示和隐藏

实例：$(document).ready(function(){

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

        $(".adv").toggle()//使该标签显示或迎隐藏

        })
    })

3，css方法，用来读取或设置元素的css属性，语法为：css(样式名，[值])；如果不传入第二个参数的值，

则为读取样式，若传入，则为设置样式

实例：$("div").css(“display”，“none”);

4,addClass和removeClass()方法，分别用来添加样式和移除样式

实例： $(".adv").addClass("dis") //表示将类名为adv的元素添加一个样式名为dis的样式

 $(".adv").removeClass("dis")//同理，此为移除该样式

5，slideDown和slideUp()方法，用于元素的展开与折叠，一般用作浮动特效广告的制作

 实例： $("#d1").slideDown()//展开

        $("#dl").slideUp()//折叠

二，文档处理类

1，append和appendTo方法，它们功能相同，用法相反，append表示给某个元素添加一写内容，

 appendTo表示将某些内容添加到某个元素当中

   实例：$(".div1").append("<p>向这个容器里边添加内容</p>")

     $("<p>这是再次添加的内容</p>").appendTo(".div1")

2，empty和remove方法，empty只是用来清空元素的内容，这时元素本身包括样式仍然保留，

 remove用来移除元素，样式等不在保留

 实例：
       $(".div1").remove()

       $(".div2").empty()

3，after和before方法，分别表示在该元素之前或之后添加内容

实例： $(".content").before("<div class='adv'><p>关闭</p></div>")

      $(".content").after("<div class='adv'><p>关闭</p></div>")

4，html和text方法，用来获取和设置元素的内容，其中，html方法返回的是元素中的html代码，

它可以解析html代码，text()返回的是元素中的文本内容，如果不传参数则为获取元素的内容，

传参数则为设置元素的内容

实例:$(".c1").text("对象本无术，类型亦无形")//设置文本的内容

    $("").html("<p>菩提本无树，明镜亦非台，本来无一物，何处惹尘埃。</p>")//其中的p标签可以被识别

5，attr()方法，用来获取或设置元素的属性，如果不传第二个参数为获取属性，传第二各参数为设置属性

实例：$(this).attr("src", "img/sunset.jpg")

6，val() 方法返回或设置被选元素的值

实例：$("button").click(function(){

   $(":text").val("Hello World");

});

三，事件处理类：

1，bind和unbind方法，为元素增加或移除事件，在jquery只有就用on()方法代替了bind方法

 实例：$("img").on("mouseover", function() {//增加鼠标移入事件

    $(this).attr("src", "img/sunset.jpg")

    });

四，其他操作：

size方法和length属性用于获取元素中的元素个数

each方法用于遍历jquery对象中的每一个元素