我们继续学习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--基础函数的更多相关文章

  1. 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数

    [源码下载] 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数 作者:webabcd 介绍速战速决 之 PHP 函数基础 函数参数 函 ...

  2. python基础——函数的参数

    python基础——函数的参数 定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复 ...

  3. python基础—函数嵌套与闭包

    python基础-函数嵌套与闭包 1.名称空间与作用域 1 名称空间分为: 1 内置名称空间   内置在解释器中的名称 2 全局名称空间   顶头写的名称 3 局部名称空间 2 找一个名称的查找顺序: ...

  4. python基础—函数装饰器

    python基础-函数装饰器 1.什么是装饰器 装饰器本质上是一个python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能. 装饰器的返回值是也是一个函数对象. 装饰器经常用于有切 ...

  5. iOS 基础函数解析 - Foundation Functions Reference

    iOS 基础函数解析 - Foundation Functions Reference 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名- ...

  6. （2.16）Mysql之SQL基础——函数

    (2.16)Mysql之SQL基础——函数 关键词:mysql函数,mysql自定义函数,mysql聚合函数,mysql字符串函数,mysql数值函数 1.自定义函数 -- (1)一般形式 creat ...

  7. Python学习---基础函数的学习

    1.1. 基础函数 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 灌输一个概念:Python中函数就是对象,函数和我们之前的[1,2,3],'abc ...

  8. Python基础-函数参数

    Python基础-函数参数 写在前面 如非特别说明,下文均基于Python3 摘要 本文详细介绍了函数的各种形参类型,包括位置参数,默认参数值,关键字参数,任意参数列表,强制关键字参数:也介绍了调用函 ...

  9. PHP基础函数、自定义函数以及数组

    2.10 星期五  我们已经真正开始学习PHP 了,今天的主要内容是php基础函数.自定义函数以及数组, 内容有点碎,但是对于初学者来说比较重要,下面是对今天所讲内容的整理:  1 php的基本语法和 ...

  10. JavaScript Allongé 第一呷 ：基础函数 (1)

    第一呷 :基础函数 关于函数,尽管少,但毫不逊色. 在javascript中,函数是值,但它们不仅仅是简单的数值,字符串,或者甚至复杂的数据结构树或者地图.函数表示要执行的运算.就像数值.字符串和数组 ...

随机推荐

  1. hdu-2191（完全背包+二进制优化模板）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 思路:完全背包模板 #include<iostream> #include<c ...

  2. Struts has detected an unhandled exception

    这个问题是struts和jsp页面的配置之间产生了问题,就是struts里边的名字和jsp里用的名字不是同一个名字,所以无法识别,所以检查一下里边的命名.

  3. ViewFlipper实现自动播放的图片库

    作者实现的基础上,加上了文字的变换 public class MainActivity extends Activity { private ViewFlipper viewFlipper; priv ...

  4. ArcGIS Desktop Python add-ins 共享和安装插件

    1)   共享和安装插件 共享Python插件的关键是.esriaddin文件;为了获取该插件功能,其他用户只要在本机执行安装操作或通过网络引用该插件就可以. ArcGIS插件安装工具 当用户双击一个 ...

  5. hdu 1058

    这道题有很多种做法,但是思路大都是一样的,代码有点类似于poj2591这道题. 题意:问因子只含有2,3,5,7的第k个数是什么? #include<stdio.h> int f[5843 ...

  6. hdu 2153 仙人球的残影

    题目 这道题可以有两种写法: 第一种:找规律,如下: #include <stdio.h> int main() { int n,i,j,res; while (scanf("% ...

  7. Linux sort uniq 命令。简单运用

    -n                              #代表以数字方法排序,如果倒序加上-r -t ':'                          #-t指定分隔符-k       ...

  8. Hibernate的查询方式汇总

    分别是HQL查询,对象化查询Criteria方法,动态查询DetachedCriteria,例子查询,sql查询,命名查询. 如果单纯的使用hibernate查询数据库只需要懂其中的一项就可以完成想要 ...

  9. Java对象的serialVersion序列化和反序列化

    Java基础学习总结——Java对象的序列化和反序列化 一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种 ...

  10. html.EditorForModel自定义模版

    https://www.cnblogs.com/lori/p/5969658.html  http://www.cnblogs.com/yinzixin/archive/2012/12/18/2821 ...