我们继续学习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. Libevent学习之SocketPair实现

    Libevent设计的精化之一在于把Timer事件.Signal事件和IO事件统一集成在一个Reactor中,以统一的方式去处理这三种不同的事件,更确切的说是把Timer事件和Signal事件融合到了 ...

  2. gj9 迭代器和生成器

    9.1 python的迭代协议 list内部实现了__iter__()协议(魔法函数),是可迭代对象,但还不是迭代器(迭代器需要实现__next__协议) 生成器实现了__iter__(),__nex ...

  3. 自学如何去学习jQuery

    学习JQ第一个demo: 制作一个轮播图,制作方法我前面写了一篇博客,传送门-->http://www.cnblogs.com/yewenxiang/p/6100206.html 需要的JQ知识 ...

  4. 将Excel导入DataGridView 中的"select * from [Sheet1$]"中[ ]里面表单名的动态获取

    Sheet1$是Excel默认的第一个表名,如果改动:select * from [Sheet1$]"将查询失败,因此应根据选择自动获取excel表名: OpenFileDialog ofd ...

  5. Python Sleep休眠函数

    #!/usr/bin/env python import os import time def fun(name): write_name="command %s failed!\n&quo ...

  6. java 路径、className.class.getResourceAsStream()、ClassLoader.getSystemResourceAsStream() 、FileInputStream

    className.class.getResourceAsStream 用法: 第一: 要加载的文件和.class文件在同一目录下,例如:com.x.y 下有类Test.class ,同时有资源文件c ...

  7. 团队项目（第四周冲刺之二）—GG队

    项目冲刺: 队员 学号 叶尚文(队长) 3116008802 蔡晓晴 3216008808 杜婷萱 3216008809 龙剑初 3116004647 于泽浩 3116004661 (先把帅气的合照不 ...

  8. Android 体系架构

    什么是Android? 答:Android就是移动设备的软件栈,包括(一个完整的操作系统,中间件,关键应用程序), 底层是Linux内核,包括(安全管理, 内存管理,进程管理 ,电源管理,硬件驱动-) ...

  9. ListView的另一种可读性更强的ViewHolder模式写法

    常见的写法是这样的: @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHol ...

  10. 实现EventHandler的监测

    的监测", "category":"", "tags":"", "publish":&qu ...