jQuery方法的案例分析

　　介绍

小编给大家分享一下jQuery方法的案例分析,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

jQuery简介

jQuery是一个轻量级操作DOM的JS库,主要包含以下功能:

HTML元素选取和操作

HTML事件函数

HTML DOM遍历和修改

CSS操作

JavaScript特效和动画AJAX

基于jQuery的插件

jQuery的优势在于兼容于所有主流浏览器,包括Internet Explorer 6 !

jQuery语法

(选择)美元.action()

文档加载就绪事件

$(文档)时(函数(){//代码…… 　　});//简写方式 　　$(函数(){//代码…… 　　});

<>强劲美元(文档)。准备与窗口。onload的区别

美元(文档)。准备和窗口。onload都是在都是在页面加载完执行的函数,大多数情况下差别不大。
美元(文档)。准备:是DOM结构绘制完毕后就执行,不必等到加载完毕意。思就是DOM树加载完毕,就执行,不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个时。
窗口。onload:是页面所有元素都加载完毕,包括图片等所有元素。只能执行一次。

<强> jQuery选择器

jQuery选择器基于已经存在的CSS选择器

美元(& # 39;* & # 39;)
美元(& # 39;p # 39;)
美元(& # 39;ul李# 39;)
美元(& # 39;ul李:胎# 39;)
…

jQuery 事件

鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddbclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave
blurunloadhover


常用的 jQuery 事件方法

  • click() 点击事件
  • dbclick() 双击事件
  • mouseenter() 鼠标穿过元素事件
  • mouseleave() 鼠标离开元素事件
  • mousedown() 鼠标移动到元素上方按下鼠标事件
  • mouseup() 鼠标按住移动到元素上方松开鼠标事件
  • hover() 鼠标悬停事件
  • focus() 表单元素聚焦事件
  • blur() 表单元素失去焦点事件
  • submit() 表单提交事件
  • change() 表单元素值改变事件
  • keypress() 键盘键按住事件
  • keydown() 键盘键按下事件
  • keyup() 键盘键松开事件
  • load() 指定元素加载完成式执行事件 （1.8 版本后废弃）
  • resize() 窗口大小改变事件
  • scroll() 滚动监听事件

jQuery 效果

$(selector).action(speed,callback)
变量说明selector选择器action事件speed速度，毫秒，也可以为‘slow’、‘fast‘callback回掉函数

显示隐藏

  • hide() 隐藏元素
  • show() 显示元素
  • toggle() 显示被隐藏的元素，隐藏已显示的元素

淡入淡出

  • fadeIn() 淡入
  • fadeOut() 淡出
  • fadeToggle() 已淡出的元素淡入，已淡入的元素淡出

  • fadeTo() 渐变为给定不透明度

    $(selector).fadeTo(speed,opacity,callback);
    opacity 值为 0 与 1 之间

滑动

  • slideDown() 向下滑动展开元素
  • slideDown() 向上滑动收起元素
  • slideToggle() 已展开元素上滑收起，已收起元素下滑展示

动画

$(selector).animate({params},speed,callback);
参数说明是否必须params定义形成动画的 css 属性必须speed速度，毫秒，也可以为‘slow’、‘fast‘可选callback回掉函数可选

实例

$("button").click(function() {
　　$ (“p") .animate ({
　　左:“250 px",
　　透明度:“0.5“,
　　高度:“150 px"
　　宽度:150年“px"
　　});
　　});

停止动画

美元(选择器)。停止(stopAll goToEnd); 参数说明是否必须stopAll是否应该清除动画队列,默认是假的可选goToEnd是否立即完成当前动画可选

jQuery链(链接)

通过jQuery,可以把动作/方法链接在一起。

链接允许我们在一条语句中运行多个jQuery方法(在相同的元素上,浏览器就不必多次查找相同的元素。

(“# p1")美元 　　. css (“color",“red") 　　.slideUp (2000) 　　.slideDown (2000);//皃1"元素首先会变为红色,然后向上滑动,再然后向下滑动jQuery HTML

jQuery提供一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易。

获取内容和属性

获取内容

    <李>文本()设置或返回所选元素的文本内容李 <李> HTML()设置或返回所选元素的内容(包括HTML标记) <李>瓦尔()设置或返回表单字段的值

    jQuery方法的案例分析