我们继续学习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. 跳出思维定势，改变交谈习惯zz

    一直以来我都是一个不折不扣的作者所划分的内向者,羞于在公众场合说话,也不愿意与陌生人交谈,甚至是与认识的人聊天,有时候也是一种痛苦,看着在办公室里夸夸其谈的同事们,我总是感觉格格不入.严格说来,我算是 ...

  2. 着重基础之—构建工具—Maven的依赖管理

    着重基础之—构建工具—Maven的依赖管理 项目构建利器Maven给我们开发人员带来了极大的便利,从繁琐的jar包管理中脱身的程序员终于可以有时间再进入另一个坑了. 我今天要给大家分享的内容是我在实际 ...

  3. win10 新增删除文件不刷新

    实际上是桌面图标缓存出问题,以下是一个简单动作即可解决问题. 按Win+R键打开“运行”窗口,输入如下命令后按回车键执行: ie4uinit -show 立竿见影,效果同360,魔方等工具软件,可参考 ...

  4. modelsim仿真基本流程

    好久没再用过modelsim,都忘的一干二净了.刚换了份工作,又要重新拾起来,不过现在感觉modelsim的仿真其实是比较快的,很有用处.再者这么长时间老是学了忘,忘了再学,觉得真浪费时间,平时确实应 ...

  5. Getting Started with Google Tango(Google Tango开始教程)

    https://developers.google.com/tango/ Build apps that understand space and motion in high fidelity on ...

  6. （线段树模板）A Simple Problem with Integers --POJ--3468

    链接: http://poj.org/problem?id=3468 代码: #include<stdio.h> #include<algorithm> #include< ...

  7. 给ubuntu系统的root设置密码：

    首先输入:sudo passwd root 然后输入当前用户的密码,例如xiaomeige这个用户的密码为xiaomeige 然后输入希望给root账户设置的密码,例如密码也为root

  8. ESP32应用程序的内存布局

    应用程序内存布局 ESP32芯片具有灵活的内存映射功能.本节介绍ESP-IDF在默认情况下如何使用这些功能. ESP-IDF中的应用程序代码可以放置在以下内存区域之一中. IRAM(指令RAM) ES ...

  9. Scala类型检查与转换

    Scala类型检查与转换 isInstanceOf:检查某个对象是否属于某个给定的类. asInstanceOf:将引用转换为子类的引用. classOf:如果想测试p指向的是一个Employee对象 ...

  10. <context:component-scan>自动扫描

    主要讲解自动扫描的<context:component-scan>中的2个子标签的使用方法 在Spring MVC中的配置中一般会遇到这两个标签,作为<context:compone ...