2016.8.16 JQuery学习记录
1.$(document).ready(function(){});
这个函数会在浏览器加载完页面之后，尽快执行；
2.所有的JQuery函数用有个$开始表示，All jQuery functions start with a $；jQuery选择器通常选择HTML元素，然后做一些元素。
3.在使用JQuery之前，要引入JQuery库，在这样的背景下，你可以使用它们在编辑器中的animate.css图书馆，下面是通过“type”属性操作元素：
例如： $("button").addClass("animated bounce"); //选择button标签元素，调用animated库中的CSS，使其跳动起来；
4.JQuery也可以通过$(".Classname").addClass(" "); 来操作同一类的元素标签，做同样的动作；
例如：$(".well").addClass("animated shake");
5.JQuery也可以通过$("#IDname").addClass(" "); 来操作一个ID名字的元素标签，做出动作；
例如： $("#target3").addClass("fadeOut");
7.我们也可以在页面加载后，执行移除Class的动作，出现动画效果，通过函数removeClass（“”）；
例如： $("button").removeClass("btn-default");
8.JQuery还提供给我们，css（）函数用了改变一个元素的css样式，在页面加载后，产生动画效果；
例如：$("#target1").css("color","red");
9.JQuery还允许我们通过函数，改变非CSS属性的HTML标签的属性，函数.prop()。prop()允许您调整元素的性质。
例如：$("#target1").prop("disabled",true);
10.JQuery允许使用函数.html()，这个函数可以添加HTML标签；
例如：$("#target4").html("<em>#target4</em>"); //这样就在ID=target4的元素上，改变了他的text的内容以及属性
11.JQuery库的remove（）函数可以，移除一个HTML标签的所有内容，包括标签本身：
例如：$("#target4").remove();
12.JQuery库有一个函数，叫做appendto()，允许你选择HTML元素并将它们附加到另一个元素。
例如：$("#target2").appendTo("#right-well");
13.JQuery库允许，除了移动元素外，你也可以将它们从一个地方复制到另一个地方。通过函数clone（），可以把元素从一个地方复制到另一个地方
例如：$("#target2").clone().appendTo("#right-well"); //这里涉及两个函数的连用，把两个jQuery功能结合在一起，这就是所谓的功能连接
14.每个HTML元素都有，从它的父元素继承的属性。也就是说，包含在<div class=""container-fluid>中的标签元素，继承了class=“container-fluid”的样式；
jQuery库，有一个功能叫做parent()允许你访问，仅仅是上一层的父元素，的任何一个你选择的元素。
例如： $("#target1").parent().css("background","red"); //这里就是让ID=“target1”的元素的，仅仅是上一层父元素，的背景变为红色
15.当然有通过子元素来操作父元素的函数，就有通过父元素来操作子元素的函数。那就是.children()函数
例如：$("#right-well").children().css("color","orange");
16.JQuery库允许，你通过函数nth-child(n)，目标：nth-child（n）的CSS选择器允许你选择所有父元素中的第n个元素，同时做出同样的动作。
例如： $(".target:nth-child(2)").addClass("animated bounce"); //这里就是让所有的target类中的第二个元素，同时跳动
17.JQuery库中，可以使用even表示偶数，odd表示奇数，所以在操作相应元素时，也可以指定父元素中所有的偶元素或者所有的奇数元素：
例如： $(".target:even").addClass("animated shake"); //这里就是控制所有的偶数元素一起颤抖
18.当然JQuery库中用$表示的HTML元素可以是任何，包括<body>，我们可以操作这个页面，使用同一个炫酷的效果；
例如： $("body").addClass("animated fadeOut"); //这个效果是使页面，整体消失，渐渐的
$("body").addClass("animated hinge"); //这个效果是使页面，挂起，然后掉落的感觉，It’s amazing!
2016.8.16 JQuery学习记录的更多相关文章
- jquery学习记录
1.选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class=&q ...
- jQuery学习记录1
jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的,用了前者,再$(this).addClas ...
- jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。
jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.i ...
- jQuery Moblile Demos学习记录Panel
jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...
- 16 | “order by”是怎么工作的？ 学习记录
<MySQL实战45讲>16 | “order by”是怎么工作的? 学习记录http://naotu.baidu.com/file/0be0e0acdf751def1c0ce66215e ...
- 【jQuery】精细学习记录
[jQuery]精细学习记录 基础 基本语法: $(选择器).action(回调函数); $/jQuery //jQuery核心函数 $(选择器) //获得的jQuery对象 jQuery核心 - j ...
- Python学习记录day5
title: Python学习记录day5 tags: python author: Chinge Yang date: 2016-11-26 --- 1.多层装饰器 多层装饰器的原理是,装饰器装饰函 ...
- mysql查询练习题-2016.12.16
>>>>>>>>>> 练习时间:2016.12.16 编辑时间:2016-12-20-->22:12:08 题: 涉及:多表查询.ex ...
- Python学习记录day6
title: Python学习记录day6 tags: python author: Chinge Yang date: 2016-12-03 --- Python学习记录day6 @(学习)[pyt ...
随机推荐
- Navicat连接oracle，出现Only compatible with oci version 8.1 and&nb （转）
与本地oracle连接的时候,一般没问题,sqlplus和oci都是本地oracle自带的,(设置: 工具->选项->oci) 分别为: oci:D:\app\pcman\produc ...
- Server.Transfer方式（或称HttpContext方式）传值实例
public class QueryPage : System.Web.UI.Page { protected System.Web.UI.WebControls.TextBox txtStaDate ...
- WaxPatch中demo注意问题
问题一 https://github.com/mmin18/WaxPatch网址中提供的demo是可以运行,但是存在一个问题,如果把patch.zip换成自己的并且上传到自己的服务器(github), ...
- ios block中引用self
__block __weak typeof(self) tmpSelf = self; ^(){ tmpSelf...... }
- ZooKeeper 配置文件（zoo.cfg）详解
参数名 说明 clientPort 客户端连接server的端口,即对外服务端口,一般设置为2181吧. dataDir 存储快照文件snapshot的目录.默认情况下,事务日志也会存储在这里.建议同 ...
- CLR via C#(14)-可空值类型，关于？和？？的故事
我们都知道,值类型是不能为Null的,但是在实际应用中有些情形却需要将值类型置为null.因此,CLR中引用了可空值类型的用法.今天的文章中见到最多的符号估计就是?了吧. ?——初识可空值类型 1. ...
- EF – 4.CRUD与事务
5.6.1 <Entity Framework数据更新概述> 首先介绍Entity Framework实现CRUD的基本方法,接着介绍了如何使用分部类增强和调整数据实体类的功能与行为特性 ...
- Android - 控件android:ems属性
Android - 控件android:ems属性http://blog.csdn.net/caroline_wendy/article/details/41684255?utm_source=tui ...
- AIX扩展文件系统的大小
由于AIX系统空间不够需要增加硬盘,希望增加文件系统的空间,折腾了好几天怎么都不能扩展文件系统的空间,原来是把硬盘加错了卷组 首先,确定文件系统所在的LV /dev/datalv 270.0 ...
- POJ1699 HDU 1560 Best Sequence(AC自动机 最短路)
曾写过迭代加深搜索的方法,现在使用在AC自动上跑最短路的方法 dp[i][j]表示状态为到节点i,模式串是否包含的状态为j的最短串的长度,则状态转移方程为: dp[nx][ny] = min(dp[x ...