继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery框架基础知识点

qq_情牵紫涩_0
关注TA
已关注
手记 16
粉丝 24
获赞 840

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对象中的每一个元素

打开App,阅读手记
12人推荐
发表评论
随时随地看视频慕课网APP