jQuery的魅力

jQuery的优点

1.轻量级、核心文件才几十kb、不会影响页面加载速度

2.跨浏览器兼容。基本兼容了现在的主流的浏览器

3.链式编程、隐式迭代

4.对事件、样式、动画支持,大大简化了DOM操作

5.支持插件扩展开发。有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等

6.免费、开源

jQuery之入口函数

$(document).ready(function(){

        // 此处是页面DOM加载完成的入口

})

或者

$(function(){

        // 此处是页面DOM加载完成的入口

})

jQuery之选择器

jQuery中所有选择器都是以美元符号开头: $()

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

举个简单的例子

$(function(){

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

})

以上程序通过获取p标签从而改变文本颜色

jQuery之事件

什么是事件?

页面对不同访问者的响应叫做事件

事件处理程序指的是当HTML中发生某些事件时所调用的方法

常见的DOM事件

鼠标事件:click、dbclick、mouseenter、mouseleave、hover

键盘事件:keypress、keydown、keyup

表单事件:submit、change、focus、blur

文档/窗口事件:load、resize、scroll、unload

举个简单的例子

$(function(){

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

        $(this).hide();

    })

})

注意:$(this)选取当前的HTML元素,这里指p元素

jQuery效果-隐藏和显示

hide()隐藏

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

       $("p").hide();

})

show()显示

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

    $("p").show()

})

toggle()切换hide()和show()方法

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

    $("p").toggle();

})

jQuery效果-淡入淡出

fadeIn()淡入

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

      $("p").fadeIn();

})

fadeOut()淡出

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

       $("p").fadeOut();

})

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

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

      $("p").fadeToggle();

})

jQuery效果-滑动

slideDown()向下滑动元素

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

      $("p").slideDown();

})

slideUp()向上滑动元素

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

    $("p").slideUp();

})

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

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

    $("p").slideToggle();

})

jQuery效果-动画

animate() 方法允许您创建自定义的动画

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

    $("p").animate({

        left:'250px',

        height:'150px',

        width:'150px',

    })

})

默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。 如果需要改变,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容