关闭

jQuery基础语法

169人阅读 评论(0) 收藏 举报
分类:


1.jQuery选择器:
语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素


2.jQuery事件
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件


3.jQuery效果
   1)jQuery隐藏/显示
   $(selector).hide(speed,callback);
   $(selector).show(speed,callback);
   $(selector).toggle(speed,callback);
   (hide隐藏,show显示,speed控制隐藏或者显示速度(参数取值slow,fast,毫秒),callback隐藏或者显示完成之后所执行的函数名称,toggle是对显示或者隐藏的切换)
   
   2)淡入淡出
   &(selector).fadeIn(speed,callback);用于淡入已隐藏的元素
   &(selector).fadeOut(speed,callback);用于淡出可见元素
   $(selector).fadeToggle(speed,callback)可以在淡入淡出之间进行切换
   $(selector).fadeTo(speed,opacity,callback);opacity将淡入淡出效果设置为给定的不透明度(介于0-1)之间
   
   3)滑动
   $(selector).slideDown(speed,callback);用于向下滑动元素
   $(selector).slideUp(speed,callback);用于向上滑动元素
   $(selector).slideToggle(speed,callback);在向上向下元素中间进行滑动的切换
   
   4)动画
   $(selector).animate({params},speed,callback);
   必需的params参数定义形成动画的css属性
   $(selector).stop(stopAll,goToEnd);
   stopAll参数规定是否清除动画队列,goToEnd参数规定是否完成当前动画
   
4.jQuery HTML
   1)jQuery获取
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容(包括HTML标记)
val()设置或返回表单字段的值
attr()获取属性值

2)jQuery添加/删除
append()在被选元素的结尾插入内容
prepend()在被选元素的开发插入内容
after()在被选元素之后插入内容
before()在被选元素之前插入内容
remove()删除被选元素(及其子元素)
empty()从被选元素中删除子元素

3)jQuery操作css
addClass()向被选元素添加一个或多个类
removeClass()从被选元素中删除一个或多个类
toggleClass()对被选元素进行添加/删除类的切换操作
css()设置或返回被选元素的一个或多个样式属性

5.jQuery遍历
祖先
parent()被选元素的直接父元素
$(document).ready(function(){
$("span").parent();
});

parents()返回被选元素的所有祖先元素
$(document).ready(function(){
$("span").parents();
});

parentsUntil()返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
});

后代
children()方法返回被选元素的所有直接子元素
也可以使用参数来过滤对子元素的搜索

find()返回被选元素的后代元素,一路向下直到最后一个后代

    同胞
siblings()返回被选元素的所有同胞元素
$(document).ready(function(){
$("h2").siblings();
});

next()返回被选元素的下一个同胞元素
nextAll()返回被选元素的所有跟随的同胞元素
nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() , prevUntil() 类似于next,但是方向相反

过滤
first()
last()
eq()返回被选元素中带有指定索引号的元素
filter() 方法允许您规定一个标准.不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not()与filter()方法相反
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10668次
    • 积分:377
    • 等级:
    • 排名:千里之外
    • 原创:29篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论