html 如下：

<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8" />

      <title>Move and Copy Lab Page - jQuery in Action, 3rd edition</title>

      <link rel="stylesheet" href="../css/main.css"/>

      <style>

         #source-pane img

         {

            margin-bottom: 1em;

         }

         .target

         {

            border: 1px solid maroon;

            background-color: #ffffcc;

            margin-bottom: 1em;

         }

         #controls div

         {

            margin-bottom: 0.5em;

         }

         button

         {

            margin-top: 10px;

         }

         #button-restore

         {

            display: none;

         }

         .done input[type=checkbox],

         .done #button-execute

         {

            display: none;

         }

         #button-restore

         {

            display: inline;

         }

      </style>

   </head>

   <body>

      <h1 class="header">jQuery Move and Copy Lab Page</h1>

      <div id="source-pane" class="box-small">

         <h2>Sources</h2>

         <div>

            <input type="checkbox" name="sources"/><br />

            <img src="data:images/source1.png" alt="source 1" />

         </div>

         <div>

            <input type="checkbox" name="sources"/><br />

            <img src="data:images/source2.png" alt="source 2" />

         </div>

         <div>

            <input type="checkbox" name="sources"/><br />

            <img src="data:images/source3.png" alt="source 3" />

         </div>

      </div>

      <div class="box-small">

         <h2>Target Areas</h2>

         <div>

            <div id="target-pane">

               <div id="target1" class="target">

                  <label><input type="checkbox" name="targets"/> Target 1</label>

               </div>

               <div id="target2" class="target">

                  <label><input type="checkbox" name="targets"/> Target 2</label>

               </div>

               <div id="target3" class="target">

                  <label><input type="checkbox" name="targets"/> Target 3</label>

               </div>

               <div>

                  <span>Operation:</span><br />

                  <label><input type="radio" name="operations" value="append" checked="checked"/> append</label>

                  <label><input type="radio" name="operations" value="prepend"/> prepend</label>

                  <label><input type="radio" name="operations" value="before"/> before</label>

                  <label><input type="radio" name="operations" value="after"/> after</label>

               </div>

               <div>

                  <span>Clone?:</span><br />

                  <label><input type="radio" name="clone" value="no" checked="checked"/> no</label>

                  <label><input type="radio" name="clone" value="yes"/> yes</label>

               </div>

            </div>

            <div>

               <button id="button-execute">Execute</button>

               <button id="button-restore">Restore</button>

               <button id="button-toggle">Toggle</button>

            </div>

         </div>

      </div>

      <div class="footer">

         <p>

            jQuery Selectors Lab Page - jQuery in Action, 3rd edition<br/>

            Code by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa

         </p>

      </div>

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

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

   </body>

</html>

修改元素的样式

/*

样式名的值是以空格分割多个值de字符串形式出现，而不是以 COM 属性数组的形式，这给处理带来了复杂性。

HTML5 引入了一个好的解决办法，通过称为 classList （样式列表）的 API 实现。

*/

/*

原生 js 使用 classList 增加样式（兼容新的浏览器，IE 10以上，包括 IE 10。

*/

var elements = document.getElementsByClassName('box-small');

for(var i = 0; i < elements.length; i++){

    elements[i].classList.add('target');

}

/*

addClass(names)

为集合中的元素添加指定的样式名，兼容从 IE6 开始的浏览器

name(String|Function)：空格分割的多个样式名字符串；如果是函数，调用函数的上下文是当前元素（this），

参数是元素索引和元素当前样式值（所有用到的样式名，用空格分割）

*/

$('img').addClass(function(index, styleValue){

    console.log(this);

    console.log(styleValue);  //元素当前样式值（所有用到的样式名，用空格分割）

    return 'target';   //返回值作为样式名

});

$('.box-small').addClass(function(index, styleValue){

    console.log(this);

    console.log(styleValue);

    return 'target';

});

/*

removeClass(names)

从 jQuery 集合中删除每个元素指定的样式；如果是函数，调用函数的上下文是当前元素（this），参数是元素索引和要删除的

样式名（可以是以空格分割的样式名），返回值是要删除的样式名

names(String|Function)

*/

$('#target-pane > div').removeClass('target');

console.log('删除 .box-small 中的样式：')

$('.box-small').removeClass(function(index, styleName){

    console.log($(this));

    console.log(styleName);

    return 'box-small target';

});

/*

toggleClass([names][, switch])

为没有样式的元素指定添加指定的样式名，或者删除已经存在的样式

names(String|Function)

switch(Boolean)

如果设置 switch 参数，当 switch 为 true 时，那么样式通常会添加样式到没有此样式的元素上，如果为false，从元素中删除该样式

如果无参调用，集合中所有样式都会删除或恢复

如果只设置 switch 参数，集合中每个元素的样式名将根据 switch 的值保留会删除

如果提供了函数，则返回值为样式名，参数接受两个值：元素索引和元素样式的值

*/

var switchValue = true;

$('#target-pane').addClass('target');

console.log('id 为 target-pane 的 div 是否包含 target 样式：' + $('#target-pane').hasClass('target'));

$('#button-toggle').click(function(){   

    $('img').toggleClass('target');

    switchValue = !switchValue;

    console.log(switchValue);

   $('#target-pane').toggleClass('target', switchValue);

    /*

    hasClass(name)

    确定集合中的元素是否包含指定的样式

    */

    console.log('id 为 target-pane 的 div 是否包含 target 样式：' + $('#target-pane').hasClass('target'));

});

/*

直接在元素上添加样式代码（DOM 元素的 style 属性），可以覆盖预定的样式（设置了 !important 的除外）

*/

/*

css(name, value)：CSS 属性的名称。接受两种 CSS 和 DOM 的属性（如 background-color 与 backgroundColor），一般使用第一种

css(properties)

为每个元素的 CSS 样式设置指定的 value

name(String)

value(String|Number|Function)：如果是数字，转换为字符串在末尾加上“px”；如果是函数，接受两个参数：元素索引和当前值，返回值

为 CSS的新值

*/

/*

给按钮增加 20px 宽度（如果设置长度和宽度没有指定单位，那么默认就是 px）

*/

$('#button-toggle').css('width', '+=20');

$('p').css({

    margin: '1em',

    color: '#1933FF',

    opacity: 0.8

});

$('button').css({

    margin: '1em',

    color: '#1933FF',

    opacity: function(index, currentValue){

        return 1 - ((index % 10 + 3) / 10);

    }

});

/*

css(name)

根据指定的 name 查询集合中首个元素的 CSS 属性的计算值

name(String|Array)

返回值为字符串或属性-值对

*/

var styles = $('#source-pane').css(['border', 'background-color']);

for(var property in styles){

    console.log(property　+　': ' + styles[property]);

}

/*

对于经常访问的一些小的 css 集合，jQuery 提供了便捷的方法来访问它们并返回值为常见的数据类型

*/

/*

width(value)

height(value)

设置集合中每个匹配元素的宽度和高度

value(Number|String|Function)：

 */

 /*

width()

height()

查询 jQuery 对象的第一个元素的宽度和高度,单位为像素

 */

var tmpWidth = $('#source-pane').width();

console.log('#source-pane 的宽度为：' + tmpWidth);

/*

offset()

返回集合中第一个元素相对于文档的坐标，该对象（非 jQuery 对象）包含 left 和 top 属性，以像素为单位

*/

console.log($('#button-toggle').offset());

/*

offset(coordinates)

设置集合中所有元素相对于文档的当前坐标，以像素为单位 

coordinates(Object|Function)：包含 left 和 top 的对象

*/

setTimeout(function(){

    $('#button-toggle').offset({

        left: 0,

        top: 0

    })

}, 1000);

/*

position()

返回匹配集合元素中第一个元素的相对于父元素的位置（像素）

 */

console.log($('#button-toggle').position());

 /*

 注：offset() 和 position 只能用在可见元素上

 */

/*

scrollLeft()

scrollLeft(value)

scrollTop()

scrollTop(value)

*/

$('#button-restore').click(function(){

    console.log('document 滚动条的水平位置为：' + $(document).scrollLeft());

    console.log('document 滚动条的垂直位置为：' + $(document).scrollTop());

    //重回文档顶部

    setTimeout(function(){

        $(document).scrollTop(0);

    }, 1000);

});

设置元素内容

/*
样式名的值是以空格分割多个值de字符串形式出现，而不是以 COM 属性数组的形式，这给处理带来了复杂性。
HTML5 引入了一个好的解决办法，通过称为 classList （样式列表）的 API 实现。
*/
 
/*
原生 js 使用 classList 增加样式（兼容新的浏览器，IE 10以上，包括 IE 10。
*/
var elements = document.getElementsByClassName('box-small');
for(var i = ; i < elements.length; i++){
elements[i].classList.add('target');
}
/*
addClass(names)
为集合中的元素添加指定的样式名，兼容从 IE6 开始的浏览器
name(String|Function)：空格分割的多个样式名字符串；如果是函数，调用函数的上下文是当前元素（this），
参数是元素索引和元素当前样式值（所有用到的样式名，用空格分割）
*/
$('img').addClass(function(index, styleValue){
console.log(this);
console.log(styleValue); //元素当前样式值（所有用到的样式名，用空格分割）
return 'target'; //返回值作为样式名
});
$('.box-small').addClass(function(index, styleValue){
console.log(this);
console.log(styleValue);
return 'target';
});
/*
removeClass(names)
从 jQuery 集合中删除每个元素指定的样式；如果是函数，调用函数的上下文是当前元素（this），参数是元素索引和要删除的
样式名（可以是以空格分割的样式名），返回值是要删除的样式名
names(String|Function)
*/
$('#target-pane > div').removeClass('target');
console.log('删除 .box-small 中的样式：')
$('.box-small').removeClass(function(index, styleName){
console.log($(this));
console.log(styleName);
return 'box-small target';
});
/*
toggleClass([names][, switch])
为没有样式的元素指定添加指定的样式名，或者删除已经存在的样式
names(String|Function)
switch(Boolean)
如果设置 switch 参数，当 switch 为 true 时，那么样式通常会添加样式到没有此样式的元素上，如果为false，从元素中删除该样式
如果无参调用，集合中所有样式都会删除或恢复
如果只设置 switch 参数，集合中每个元素的样式名将根据 switch 的值保留会删除
如果提供了函数，则返回值为样式名，参数接受两个值：元素索引和元素样式的值
*/
var switchValue = true;
$('#target-pane').addClass('target');
console.log('id 为 target-pane 的 div 是否包含 target 样式：' + $('#target-pane').hasClass('target'));
$('#button-toggle').click(function(){
$('img').toggleClass('target');
switchValue = !switchValue;
console.log(switchValue);
$('#target-pane').toggleClass('target', switchValue);
/*
hasClass(name)
确定集合中的元素是否包含指定的样式
*/
console.log('id 为 target-pane 的 div 是否包含 target 样式：' + $('#target-pane').hasClass('target'));
});
/*
直接在元素上添加样式代码（DOM 元素的 style 属性），可以覆盖预定的样式（设置了 !important 的除外）
*/
/*
css(name, value)：CSS 属性的名称。接受两种 CSS 和 DOM 的属性（如 background-color 与 backgroundColor），一般使用第一种
css(properties)
为每个元素的 CSS 样式设置指定的 value
name(String)
value(String|Number|Function)：如果是数字，转换为字符串在末尾加上“px”；如果是函数，接受两个参数：元素索引和当前值，返回值
为 CSS的新值
*/
/*
给按钮增加 20px 宽度（如果设置长度和宽度没有指定单位，那么默认就是 px）
*/
$('#button-toggle').css('width', '+=20');
$('p').css({
margin: '1em',
color: '#1933FF',
opacity: 0.8
});
$('button').css({
margin: '1em',
color: '#1933FF',
opacity: function(index, currentValue){
return - ((index % + ) / );
}
});
/*
css(name)
根据指定的 name 查询集合中首个元素的 CSS 属性的计算值
name(String|Array)
返回值为字符串或属性-值对
*/
var styles = $('#source-pane').css(['border', 'background-color']);
for(var property in styles){
console.log(property　+　': ' + styles[property]);
}
/*
对于经常访问的一些小的 css 集合，jQuery 提供了便捷的方法来访问它们并返回值为常见的数据类型
*/
/*
width(value)
height(value)
设置集合中每个匹配元素的宽度和高度
value(Number|String|Function)：
*/
/*
width()
height()
查询 jQuery 对象的第一个元素的宽度和高度,单位为像素
*/
var tmpWidth = $('#source-pane').width();
console.log('#source-pane 的宽度为：' + tmpWidth);
/*
offset()
返回集合中第一个元素相对于文档的坐标，该对象（非 jQuery 对象）包含 left 和 top 属性，以像素为单位
*/
console.log($('#button-toggle').offset());
/*
offset(coordinates)
设置集合中所有元素相对于文档的当前坐标，以像素为单位
coordinates(Object|Function)：包含 left 和 top 的对象
*/
setTimeout(function(){
$('#button-toggle').offset({
left: ,
top:
})
}, );
/*
position()
返回匹配集合元素中第一个元素的相对于父元素的位置（像素）
*/
console.log($('#button-toggle').position());
/*
注：offset() 和 position 只能用在可见元素上
*/
/*
scrollLeft()
scrollLeft(value)
*/
console.log('restore button 滚动条的水平位置为：' + $('#button-restore').scrollLeft());
/*
scrollTop()
scrollTop(value)
*/
console.log('restore button 滚动条的垂直位置为：' + $('#button-restore').scrollTop());

jQuery 实战读书笔记之第五章：使用 jQuery 操作页面的更多相关文章

  1. jQuery 实战读书笔记之第六章：事件本质

    理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...

  2. jQuery 实战读书笔记之第四章：使用特性、属性和数据

    使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象 属性指的 ...

  3. jQuery 实战读书笔记之第三章：操作 jQuery 集合

    创建新 HTML 元素 $('<div>Hello</div>'); /* 创建等价的空 div 元素 */ $('<div>'); $('<div /> ...

  4. 《深入理解java虚拟机》读书笔记四——第五章

    第五章 调优案例分析与实战

  5. 《LINUX内核设计与实现》读书笔记之第五章

    第五章——系统调用 5.1 与内核通信 1.为用户空间提供一种硬件的抽象接口 2.保证系统稳定和安全 3.除异常和陷入,是内核唯一的合法入口. API.POSIX和C库 关于Unix接口设计:提供机制 ...

  6. Linux内核分析 读书笔记 （第五章）

    第五章 系统调用 5.1 与内核通信 1.调用在用户空间进程和硬件设备之间添加了一个中间层.该层主要作用有三个: 为用户空间提供了硬件的抽象接口. 系统调用保证了系统的稳定和安全. 实现多任务和虚拟内 ...

  7. jQuery 实战读书笔记之第二章：选择元素

    基本选择器 html 代码如下,后面的 js 使用的 html 基本大同小异. <!doctype html> <html> <head> <title> ...

  8. [hadoop读书笔记] 第十五章 sqoop1.4.6小实验 - 数据在mysq和hdfs之间的相互转换

    P573 从mysql导入数据到hdfs 第一步:在mysql中创建待导入的数据 1.创建数据库并允许所有用户访问该数据库 mysql -h 192.168.200.250 -u root -p CR ...

  9. jQuery实战读书笔记（备忘录）

    选择器备忘: | :even 匹配所有索引值为偶数的元素,从 0 开始计数 :odd 匹配所有索引值为奇数的元素,从 0 开始计数 实例——设置table交替行变色: <script type= ...

随机推荐

  1. 二八定律全面分析SEO全过程

    首先,大体的了解SEO的整个流程,SEO的整个流程无非是:关键词选定.标题标签描述的正确描写---内部优化----外链----内容---友情链接---更新. 在SEO界流行这样一句话:“内容为王,外链 ...

  2. 【算法导论C++代码】Strassen算法

    简单方阵矩乘法 SQUARE-MATRIX-MULTIPLY(A,B) n = A.rows let C be a new n*n natrix to n to n cij = to n cij=ci ...

  3. vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量. 值可以是函数:就是当你 ...

  4. 第九章：Elasticsearch集群优化及相关节点配置说明

    Linux系统调优: Linux调整打开文件数(重新启动生效) 在/etc/security/limits.conf在文件中增加: * soft nofile 8192 * hard nofile 2 ...

  5. 【云计算】OpenShift容器服务参考

    https://docs.openshift.com/enterprise/latest/using_images/db_images/mysql.html 红帽发布OpenShift Dedicat ...

  6. db2 v9.5迁移至v10.5，及遇重名节点数据库无法创建db的解决办法

    同系统同版本可以使用备份恢复,本文前提是不同系统不同版本,使用db2move命令. 1.db2move db db_name export 此处注意,先建个目录放文件,因为文件比较多,如果上来直接ex ...

  7. 桌面轻量级数据库的选择：Access、SQLite、自己编写？

    1. Access我们做小项目的时候特别是小的MIS系统一般也都要用数据库来保存数据.经观察大部分的小系统都是用Access数据库,有的系统为了掩盖数据库的类型,把数据文件后缀名改了,其实只要改回到m ...

  8. SQL PL/SQL语法手册

    SQL  PL/SQL语法手册 目   录 第一部分  SQL语法部分 3 一. CREATE TABLE 语句 3 二. CREATE SEQUENCE语句 5 三. CREATE VIEW语句 6 ...

  9. 制作可以 SSH 登录的 Docker 镜像

    Docker使用系列一我们把镜像源改为了阿里云的,方便后续的操作. 执行这个命令就把源地址改为阿里的: curl https://git.oschina.net/feedao/Docker_shell ...

  10. setjmp与longjmp

    在C中有时我们会使用goto语句用于运行跳转,可是不能跨越函数 #include <stdio.h> void func2() { int num = 0; dst2: if (num & ...