jQuery基础语法

原创 2015年11月17日 17:23:40


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()方法相反
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery常用语法总结笔记

jQuery 1.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery...
  • qq_34477549
  • qq_34477549
  • 2016年10月15日 11:16
  • 3137

jquery基础语法

 基本语法: $(“HTML元素”).action() 实例: $(this).hide(); 隐藏当前元素 $(“p”).hide(); 隐藏所有段落 $(“p.test”).h...
  • xiangziyong1989
  • xiangziyong1989
  • 2016年06月26日 14:48
  • 102

python 基础语法总结(一)

Python 标识符 在python里,标识符有字母、数字、下划线组成。 在python中,所有标识符可以包括英文、数字以及下划线(_),但不能以数字开头。 python中的标识符是...
  • suofeng1234
  • suofeng1234
  • 2016年07月01日 16:25
  • 4436

java基本语法自学 练习题1

1.java的优势  java有纯面向对象,继承,封装,多态,跨平台,自动垃圾回收等,并且能够让程序的难度得到有效的控制。 2.什么事环境变量? 环境变量就是操作系统中应用程序获得一些运行参数的...
  • u010461609
  • u010461609
  • 2013年06月08日 08:28
  • 884

语法基础——Objective-C语法基础

iOS基础——Object-C基础 学习过Swift之后,好久没用已经生疏了,现在有项目来了,不得不停下手下的工作,开始学习OC (1)...
  • qq_30379689
  • qq_30379689
  • 2017年02月21日 19:37
  • 2322

java基础语法(本人学习java的笔记)

基本语法部分 为选定的行改为注释: shift+方向键  选定数行内容 ctrl+/      想解绑哪一行的话,同样使用ctrl+/    常...
  • lxxlxx888
  • lxxlxx888
  • 2016年05月26日 15:35
  • 3629

java 基础语法自己总结

Java数据类型:     基本数据类型  数值型 整数类型 byte short int long                   浮点类型 float  double  字符类型 ...
  • javald
  • javald
  • 2015年07月30日 00:25
  • 897

jQuery插件开发语法小结

jQuery插件开发中经常会看到$.extend({.... });   $.fn.extend({...});  (function($){...})(jQuery);这些结构,这里简单总结一下这些...
  • lmdcszh
  • lmdcszh
  • 2014年03月31日 20:28
  • 1908

PHP的基本语法(一)

一、基本认识 1、PHP 脚本可放置在文档的任意位置; 2、PHP 脚本以开头,以 ?> 结尾; 3、默认文件扩展名为.php; 4、通常包含HTML标签以及一些PHP脚本代码; 5、PHP...
  • Geek_Geek
  • Geek_Geek
  • 2015年07月19日 21:53
  • 2331

JAVA语法基础Demo练习

ATM取款机Demo小程序 一周的JAVA基础语法结束,趁着周末把之前练习过的ATM小程序独立重新做了一遍,感觉在码这个小程序的过程中,好好的把之前学过的循环语句,选择判断语句,模块化编程思...
  • Harry_ZH_Wang
  • Harry_ZH_Wang
  • 2016年09月05日 00:45
  • 945
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础语法
举报原因:
原因补充:

(最多只允许输入30个字)