我们继续学习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. MySQL 的IFNULL()、ISNULL()和NULLIF()函数

    参考与http://blog.csdn.net/xingyu0806/article/details/52080962 IFNULL(expr1,expr2) 假如expr1不为NULL,则 IFNU ...

  2. sql笔试练习

    转:http://www.360doc.com/content/16/0919/17/14804661_592046675.shtml 本文是在Cat Qi的参考原帖的基础之上经本人一题一题练习后编辑 ...

  3. python读取文件，python读取的1变成\ufeff1

    '\ufeff1' movies={} fm=open(self.path+'/movie.txt',encoding='utf-8') w2=open('./data/1.txt','a') for ...

  4. springmvc elf8848

    刚开始觉得孔浩讲得好,之后觉得开涛讲得好,现在觉得elf8848讲得好.其实只是自己学习的各个阶段 孔浩:环境搭建,做了个基础的CRUD 开涛:讲了Controller(不该看),注解,数据绑定,请求 ...

  5. Chrome For EBS

    https://chrome.google.com/webstore/detail/oracle-ebs-r12-enablement/ekkagabmggbmpmncofhgkfigmeldifnc ...

  6. System.IO.FileLoadException:“混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。”

    解决方案: 在app.config新增如下配置节: <?xml version="1.0"?> <configuration> <startup us ...

  7. datagridview 代码添加列

    int column_key = 0; private DataGridViewTextBoxColumn column_add(string name) { DataGridViewTextBoxC ...

  8. F#语言入门之什么是F#语言

    F#是一种函数式编程语言,可以轻松编写正确且可维护的代码. F#编程主要涉及定义类型推断和自动泛化的类型和函数. 这使您可以将焦点保留在问题域上并操纵其数据,而不是编程的细节. open System ...

  9. session和cookie的异同

    Cookie是服务器发给客户端的一小段文本,保存在浏览器所在客户端的内存和磁盘上.服务器可以从客户端读出这些cookie.通过cookie,客户端可以和服务器端建立起一种联系,也就是说,Cookie是 ...

  10. Python 使用 os 模块遍历目录/获取当前文件的路径

    1.列出指定目录下所包含的目录 item = os.listdir("/Users/jinchengxie/go") 返回的是一个列表, 里面包含了指定目录下所包含的所有的目录 2 ...