<!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. eclipse工具的安装配置

    安装环境 系统:Windows7 软件:jre-8u73-windows-x64.exe,eclipse-inst-win64.exe Eclipse的安装过程 1.安装jre-8u73-window ...

  2. The operation names in the portType match the method names in the SEI or Web service implementation class.

    The Endpoint validation failed to validate due to the following errors: :: Invalid Endpoint Interfac ...

  3. ps命令之排序

    Linux中ps命令会自动选择一列进行排序,但有时这不是我们想要的. 方法一: ps+sort sort 选项与参数: -f  :忽略大小写的差异,例如 A 与 a 视为编码相同:-b  :忽略最前面 ...

  4. aws rhel 7 安装GUI ，配置VNC

    预计阅读时间:15分钟 预计配置时间:30分钟  (前提是已经申请AWS的EC2的rhel7 云主机并且成功运行) 目前AWS 亚马逊云免费试用一年,申请一个学习使用 痛点:没有GUI,无法搭建Jen ...

  5. uml各类图

    原文:http://www.cnblogs.com/way-peng/archive/2012/06/11/2544932.html 一.UML是什么?UML有什么用? 二.UML的历史 三.UML的 ...

  6. [翻译] FBLikeLayout

    FBLikeLayout This is an UICollectionView layout inspired by the photo section of facebook. This layo ...

  7. 如何在 OS X 中安装 ruby

    如何在 OS X 中安装 ruby 软件包下载 链接: http://pan.baidu.com/s/1mgMil5I 密码: tiqg 安装 http://brew.sh/ 1. 先安装 brew( ...

  8. 铁乐学Python_day05-字典dict

    1.[字典dict] Python内置了字典:dict的支持,dict全称dictionary, 在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 字典和列表直观上 ...

  9. libcurl-7.54.1附加zlib1.2.11的编译

    手上有个小程序需要通过HTTP协议通信,选择了出名的libcurl作为支持库.由于网上的教程多是命令行编译,本人记性不好,比较讨厌记住一堆命令,因此折腾了一天通过VS对libcurl和zlib进行了编 ...

  10. Eclipse解决运行、启动缓慢问题思路

    我的Eclipse近几天运行时速度奇慢,具体表现为: 1.只要ECLIPSE启动后,硬盘灯就狂闪,不停的读盘: 2.发布TOMCAT经常在0%: 3.偶尔CPU占满: 网上讲优化的文章无数,但是总是有 ...