JQuery 函数 操作
.jQuery主函数
参数 | 说明 |
$(function) | 指定DOM就绪后才执行的函数 |
$(selector) $(selector,context) | 从页面中选择元素 |
$(HTMLElement) $(HTMLElement[]) | 基于一个HTMLElement对象或一个HTMLElement对象组生成jQuery对象 |
$() | 选择0个元素 |
$(HTML)$(HTML,map) | 基于HTML代码片段生成新元素,支持可选的map对象参数,利用它定义新元素的属性 |
.选择元素
(1)获取id:$('#id名')
(2)获取class:$('.class名')
(3)获取标签:$('标签名')
(4)选择器
选择器 | 说明 |
:animated | 选择所有正在处理动画的元素 |
:contains(text) | 选择包含指定文本的元素 |
:eq(n) | 选择第n个元素(从0开始计数) |
:even | 选择所有的偶数元素(从0开始计数) |
:first | 选择第一个匹配的元素 |
:gt(n) | 选择序号大于n的所有元素(从0开始计数) |
:has(selector) | 选择至少包含一个匹配指定选择器的元素的元素 |
:last | 选择最后一个匹配的元素 |
:lt(n) | 选择序号小于n的所有元素(从0开始计数) |
:not(selector) | 排除至少包含一个匹配指定选择器的元素的元素 |
:odd | 选择所有奇数元素(从0开始计数) |
:text | 选择所有的输入文本框元素 |
一、获取
1、获取内容----.text() .html() .value()
- text() - 设置或返回所选元素的文本内容 格式:$(选择器).text();
- html() - 设置或返回所选元素的内容(包括 HTML 标记) 格式:$(选择器).html();
- val() - 设置或返回表单字段的值 格式:$(选择器).val()
2、获取属性----------attr()
格式:$("选择器").attr("属性名")
二、设置
1、设置内容
.text() 格式:$("选择器").text("要设置的内容")
.html() 格式:$("选择器").html("要设置的内容")
.val() 格式:$("选择器").val("要设置的内容")
2、设置属性
(1) .attr() 格式:$("选择器").attr("属性名","属性值")
(2)attr() 方法也允许您同时设置多个属性。$("button").click(function() {$("选择器).attr({"属性名" : "属性值","属性名" : "属性值"})})
(3)attr()方法也允许回调函数,$("选择器").attr("属性名",function(){回调函数})
三、添加
- append() - 在被选元素的结尾插入内容--------内部添加
- prepend() - 在被选元素的开头插入内容--------内部添加
- after() - 在被选元素之后插入内容--------------外部添加
- before() - 在被选元素之前插入内容-------------外部添加
格式:括号内部添加的是字符串
四、删除
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
格式:$("选择器").empty()
格式:$("选择器").remove()
过滤删除 $("选择器").remove("子选择器")
五、CSS类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
格式:前三个括号内部放的是Class的名字
css("样式名","样式值"),可以添加多个样式css({"样式名":"样式值","样式名":"样式值",........})
六、尺寸
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
七、JQUERY 遍历
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历(tree-traversal)。
1、祖先
祖先是父、祖父或曾祖父等等。
通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先
- parent()--------parent() 方法返回被选元素的直接父元素。
- parents()------parents() 方法返回被选元素的所有祖先元素,它是一个集合
- parentsUntil()----------parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素,也是一个集合
2、后代
后代是子、孙、曾孙等等。
- children()---------children() 方法返回被选元素的所有直接子元素。可以进行过滤选择.children("p.1")返回class名为1的p元素
- find()-------------find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。find("选择器")
3、同胞
同胞拥有相同的父元素。
- siblings()--------------siblings() 方法返回被选元素的所有同胞元素。
- next()-----------------next() 方法返回被选元素的下一个同胞元素。
- nextAll()--------------nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil()------------nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()----------------返回被选元素的上一个同胞元素
- prevAll()--------------返回被选元素的所有前面的同胞元素。
- prevUntil()------------返回介于两个给定参数之间的所有前面的同胞元素
4、元素过滤
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。