当前位置: 首页 > 工具软件 > jQuery Growl > 使用案例 >

jquery学习笔记

胡飞鹏
2023-12-01

$(document).ready(function(){ ... })等价于$(function(){ ... })

作用: 防止文档在加载之前就运行jquery代码,产生错误。



  • mouseenter()事件和mouseleave() 事件通常一起使用 , mouseover() 事件和 mouseout() 事件通常一起使用
  • $.hover(function(){...},function(){...})
  • hover()事件第一个方法相当于触发 mouseenter事件,第二个方法相当于触发mouseleave()事件

注意: mouseenter 事件只有在鼠标指针进入被选元素时被触发,mouseover 事件在鼠标指针进入任意子元素时也会被触发


jquery效果

$().hide(speed,callback), $().show(speed,callback) ,$().toggle(speed,callback)

注意 speed可以取值 slow,fast,normal,毫秒数(如1000)

$().fadeIn(speed,callback),$().fadeOut(speed,callback),$().fadeToggle(speed,callback),$().fadeTo(speed,opacity,callback)

注意 opacity指透明度,取值在 [0,1] 之间

$().slideDowm(speed,callback),$().slideUp(speed,callback),$().slideToggle(speed,callback)
$().animate({params},speed,callback) $().stop(stopAll,goToEnd)

注意: stopAll:是否清楚动画队列,默认是false,即停止活动的动画,允许任何排入队列的动画向后执行;
goToEnd:是否立即完成当前动画。默认是 false

$().text(function(index,originText){...})
index:被选元素列表中当前元素的下标
originText:始(旧的)值

添加和删除元素

$().append()在被选元素结尾添加
$().prepend()在被选元素开始添加
$().after()在被选元素之后添加
$().before()在被选元素之前添加
$().remove(".italic")移除被选元素及其子元素,可选参数表示筛选class=.italic的元素
$().empty()移除被选元素的子元素
$().addClass()添加一个或多个css类
$().removeClass()删除css类
$().toggleClass()对被选元素进行添加/删除类的切换操作

遍历元素

$().parent()返回直接父元素
$().parents()返回所有祖先元素
$("span").parentsUntil("div")返回两个元素之间所有的祖先元素
$().children("p.css1")返回所有直接子元素,可以进行筛选
$().find("*")返回后代元素,直到最后一个后代
$().siblings()返回所有同胞元素
$().next()返回下一个同胞元素
$().nextAll()返回所有跟随的同胞元素
$().nextUntil("p")返回介于给定参数之间的所有同胞元素
$().prev(),$().prevAll(),$().prevUntil()和上面类似
$().first()返回被选元素的第一个元素
$().last()返回被选元素的最后一个元素
$().eq(index)返回指定索引号的元素,从0开始
$().filter(".url")匹配被选元素所有类名带有.url的元素
$().not(".url")匹配被选元素所有类名不带有.url的元素

jquery ajax(需要解决跨域请求问题)

$().load(URL,data,callback)
URL:请求的地址
data:请求的数据
callback:回调函数 function(responseTxt,statusTxt,xhr){...}
>responseTxt:调用成功返回的结果内容
>statusTxt:调用的状态(success,error)
>xhr:XMLHttpRequest对象


----------
$.get(URL,callback)
>callback:回调函数function(data,status)


----------
$.post(URL,data,callback)
>data:请求的数据
>callback:回调函数function(data,status)
----------
$.noConflict()释放对"$"符号的控制

$.ajax参考地址
JSONP跨域


jquery 插件

  1. jquery validate 表单验证插件
  2. jquery UI 样式插件
  3. jquery accordion 折叠菜单
  4. jquery autocomplete根据输入值自动补充和过滤
  5. jquery growl 消息提醒

详情见菜鸟教程

 类似资料: