jq03--基础函数
我们继续学习jq的一些函数,包括向jq对象添加、删除CSS属性以及遍历DOM树。
1.获取、设置CSS类
addClass()--向被选元素添加1个或多个类属性
.importance{font-weight:bold;font-size:xx-large;}
.blue{color:blue;} $("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("importance");
}); $("button").click(function(){
$("div").addClass("importance blue");
}); removeClass()--从被选元素删除1个或多个类属性
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
}); toggleClass()--对被选元素进行添加、删除类属性的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
}); css()--返回、设置被选元素1个或多个样式属性
$("p").css("background-color"); --首个匹配的元素的背景色
$("p").css("background-color","red"); --为所有匹配元素设置背景色
$("p").css({"background-color":"red","font-size":"150%"}); --设置多个属性值
2.尺寸
width() --返回、设置元素的宽度(不包括内边距、边框、外边距)
height() --返回、设置元素的高度(不包括内边距、边框、外边距) innerWidth() --返回元素的宽度(包括内边距)
innerHeight() --返回元素的高度(包括内边距) outerWidth() --返回元素的宽度(包括内边距、边框)
outerHeight() --返回元素的高度(包括内边距、边框)
outerWidth(true) --返回元素的宽度(包括内边距、边框、外边距)
outerHeight(true) --返回元素的高度(包括内边距、边框、外边距) $("#div1").width() $("#div1").height() $("#div1").width(500).height(500); 文档(HTML文档)尺寸:
$(document).width() $(document).height()
窗口(浏览器视口)尺寸:
$(window).width() $(window).height()
3.JQ遍历 DOM树
向上遍历:
parent() parents() parentsUntil() $("span").parent().css({"color":"red","border":"2px solid green"});
--遍历父元素
$("span").parents().css({"color":"red","border":"2px solid green"});
--遍历所有祖先元素,一路向上直到文档根元素(<html>)
$("span").parentsUntil("div").css({"color":"red","border":"2px solid green"});
--遍历2个给定元素之间的所有祖先元素,不包括给定元素 向下遍历:
children() find() $("div").children().css({"color":"green","border":"2px solid red"});
--返回直接子元素
$("div").children("p.pclass").css({...});
--添加参数对子元素进行过滤
$("div").find("span").css({"color":"green","border":"2px solid red"});
--返回被选元素的后代元素 水平遍历(遍历兄弟节点):
$("h2").siblings().css({"color":"red","border":"2px solid red"}); --返回所有兄弟节点
$("h2").siblings("p").css({"color":"red","border":"2px solid red"}); --参数过滤兄弟节点
$("h2").next().css({"color":"red","border":"2px solid red"}); --返回下一个兄弟节点
$("h2").nextAll().css({"color":"red","border":"2px solid red"}); --返回所有的next兄弟节点
$("h2").nextUntil("h6").css({...}); --2节点间的所有兄弟节点
$("h2").prev().css({...}); --返回前一个兄弟节点
prev prevAll() prevUntil()与 next()相反 过滤:
$("div p").first().css("background-color","red"); --首个div元素内部的第一个<p>
$("div p").last().css("background-color","red"); --最后div元素内部的最后一个<p>
$("p").eq(1).css("background-color","red"); --返回被选元素中带有指定索引号的元素,索引从0开始
$("p").filter(".intro").css("background-color","red"); --过滤
$("p").not(".intro").css("background-color","red"); --与filter()相反
jq03--基础函数的更多相关文章
- 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数
[源码下载] 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数 作者:webabcd 介绍速战速决 之 PHP 函数基础 函数参数 函 ...
- python基础——函数的参数
python基础——函数的参数 定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复 ...
- python基础—函数嵌套与闭包
python基础-函数嵌套与闭包 1.名称空间与作用域 1 名称空间分为: 1 内置名称空间 内置在解释器中的名称 2 全局名称空间 顶头写的名称 3 局部名称空间 2 找一个名称的查找顺序: ...
- python基础—函数装饰器
python基础-函数装饰器 1.什么是装饰器 装饰器本质上是一个python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能. 装饰器的返回值是也是一个函数对象. 装饰器经常用于有切 ...
- iOS 基础函数解析 - Foundation Functions Reference
iOS 基础函数解析 - Foundation Functions Reference 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名- ...
- (2.16)Mysql之SQL基础——函数
(2.16)Mysql之SQL基础——函数 关键词:mysql函数,mysql自定义函数,mysql聚合函数,mysql字符串函数,mysql数值函数 1.自定义函数 -- (1)一般形式 creat ...
- Python学习---基础函数的学习
1.1. 基础函数 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 灌输一个概念:Python中函数就是对象,函数和我们之前的[1,2,3],'abc ...
- Python基础-函数参数
Python基础-函数参数 写在前面 如非特别说明,下文均基于Python3 摘要 本文详细介绍了函数的各种形参类型,包括位置参数,默认参数值,关键字参数,任意参数列表,强制关键字参数:也介绍了调用函 ...
- PHP基础函数、自定义函数以及数组
2.10 星期五 我们已经真正开始学习PHP 了,今天的主要内容是php基础函数.自定义函数以及数组, 内容有点碎,但是对于初学者来说比较重要,下面是对今天所讲内容的整理: 1 php的基本语法和 ...
- JavaScript Allongé 第一呷 :基础函数 (1)
第一呷 :基础函数 关于函数,尽管少,但毫不逊色. 在javascript中,函数是值,但它们不仅仅是简单的数值,字符串,或者甚至复杂的数据结构树或者地图.函数表示要执行的运算.就像数值.字符串和数组 ...
随机推荐
- python之基础补充
一 bit,和bytes的关系 bit:就是计算机的最小的表示单位. bytes:就是计算机的最小的储存单位. 1 字节(bytes) = 8 位(bit) 格式: print(bytes('字符' ...
- 2018.06.30 BZOJ4765: 普通计算姬(dfs序+分块+树状数组)
4765: 普通计算姬 Time Limit: 30 Sec Memory Limit: 256 MB Description "奋战三星期,造台计算机".小G响应号召,花了三小时 ...
- hdu-1067(最大独立集)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1068 题意:一个男生集合和一个女生集合,给出两个集合之间一一对应的关系,求出两个集合中最大独立集的点数 ...
- gj9 迭代器和生成器
9.1 python的迭代协议 list内部实现了__iter__()协议(魔法函数),是可迭代对象,但还不是迭代器(迭代器需要实现__next__协议) 生成器实现了__iter__(),__nex ...
- linux下mysql命令大全
1.linux下启动mysql的命令: mysqladmin start /ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令: mys ...
- spark 写 hbase 数据库,遇到Will not attempt to authenticate using SASL (unknown error)
今日在windows上用spark写hbase的函数 saveAsHadoopDataset 写hbase数据库的时候,遇到Will not attempt to authenticate using ...
- spring mvc 静态资源版本控制
spring bean 文件中增加 <bean class="cn.zno.smse.common.context.VersionServletContext">< ...
- spring 课程
官网 参考文档 // 1. Spring_HelloWorld 20:22 // 2. Spring_IOC&DI概述 08:07 // 3. Spring_配置 Bean 21:58 // ...
- 配置HDFS HttpFS和WebHDFS
HDFS支持两种RESTful接口:WebHDFS和HttpFS. WebHDFS默认端口号为50070,HttpFS默认端口号为14000. 默认启动WebHDFS而不会启动HttpFS,而Http ...
- POJ1062不错的题——spfa倒向建图——枚举等级限制
POJ1062 虽然是中文题目但是还是有一定几率都不准题目意思的:1.所有可能降价的措施不是降价多少钱而是降至多少钱2.等级范围:是你所走的那一条路中所有人中最好最低等级差不允许超过limit限制 思 ...