<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>访问与设置元素样式</title>

        <script src="js/jquery.js"></script>

        <style>

            .divstyle{

                border: 5px solid black;

                background-color: silver;

            }

            .trstyle{

                background-color: lightskyblue;;

                color: black;

            }

            .

        </style>

        <script type="text/javascript">

            //页面加载完成简写形式

            $(function(){

                //设置单元格宽度100px

                //$("td").css("width","300px");

                //$("td").css("font-size","30px");

                //$("td").css("color","red");

                //$("td").css("border","1px solid red");

                $("td").css({"width":"300px","font-size":"30px","color":"red","border":"1px solid red"})

                //获取div背景颜色,css可以设置元素属性，也可以获取css属性

                var color= $("div").css("background-color");

                alert(color);

                //设置斑马线，隔行背景颜色变成蓝色，字体变黑色  odd偶数行,如果同时设置多个类加，号隔开

                $("tr:odd").addClass("trstyle");

                //移出对应元素的css样式,移出DIV的样式,如果不穿参数，则表示移出所有CSS样式

                $("div").removeClass("divstyle");

            })

        </script>

    </head>

    <body>

        <div class="divstyle">

            <table>

                <tr><td>用户名1</td><td>密码1</td></tr>

                <tr><td>用户名2</td><td>密码2</td></tr>

                <tr><td>用户名3</td><td>密码3</td></tr>

                <tr><td>用户名4</td><td>密码4</td></tr>

                <tr><td>用户名5</td><td>密码5</td></tr>

                <tr><td>用户名6</td><td>密码6</td></tr>

                <tr><td>用户名7</td><td>密码7</td></tr>

                <tr><td>用户名8</td><td>密码8</td></tr>

                <tr><td>用户名9</td><td>密码9</td></tr>

                <tr><td>用户名10</td><td>密码10</td></tr>

            </table>

        </div>

    </body>

</html>

jQuery学习-设置访问元素样式的更多相关文章

  1. DOM访问元素样式和操作元素样式

    在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...

  2. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  3. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  4. CSS - 设置 select 元素的样式

    注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. ...

  5. Vue.js-04：第四章 - 页面元素样式的设定

    一.前言 前端开发中有三大件:HTML.CSS.JavaScript,在前面的学习中,不管是学习 Vue 的指令系统还是 Vue 的事件修饰符,主要还是针对的是我们在前端开发中的 JavaScript ...

  6. jQuery学习笔记(4)-设置元素的属性和样式

    一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...

  7. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  8. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  9. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

随机推荐

  1. python函数修饰器(decorator)

    python语言本身具有丰富的功能和表达语法,其中修饰器是一个非常有用的功能.在设计模式中,decorator能够在无需直接使用子类的方式来动态地修正一个函数,类或者类的方法的功能.当你希望在不修改函 ...

  2. java笔记--线程休眠sleep()的运用

    线程休眠sleep()方法的运用 在多线程编程中,有时需要让某个线程优先执行.除了可以设置这个线程的优先级为最高外,更加理想的方法是休眠其他线程,若有线程中断了正在休眠的线程,则抛出Interrupt ...

  3. node-sass 解决 no such file or directory

    在使用node-sass编译的时候出现以下情况 Error: ENOENT: no such file or directory, scandir 'D:\xxxx\node_modules\.npm ...

  4. 可以简易设置文字内边距的EdgeInsetsLabel

    可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h ...

  5. Python入门-模块2（sys模块、shutil 模块）

    sys模块: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序的版本信息 s ...

  6. java判断字符串内容

    java判断字符串是否全为数字 String str = "032";boolean isNum = str.matches("[0-9]+"); java判断 ...

  7. Scala编写的打印乘法口诀和金字塔

       刚开始接触scala,觉得语法简单,一时兴起就写了两个简单的例子 public class Calculate { public static void test1(){ for(int i=1 ...

  8. C++ new和delete重载

    C++ new和delete重载 2012-02-15 23:25:33|  分类: C/C++|举报|字号 订阅           首先,new和delete是运算符,重载new和delete是可 ...

  9. Windows10自动更新之后，无线有线都连不上网

    大概浪费了我至少6个小时. 一个是无线网卡,这个后来可以修复,其实也不是网卡的原因.最主要的原因是 Realtek PCIe GBE Family Controller  这个驱动.只找到一个win1 ...

  10. java内部类案例

    实现键值对的存储输出 import java.util.Arrays; public class EntryDemoTest { //实现键值对的存储 public static void main( ...