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 ...
随机推荐
- 【python】类变量和对象变量
来源:http://www.cnblogs.com/gtarcoder/p/5005897.html python是一种解释性的语言,任何变量可以在使用的时候才声明以及定义,也可以在程序运行的任何位置 ...
- mac os 下打开FTP服务器
mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w /System/Library/ ...
- Java Collection、Map集合总结
1.Java中的Collection集合总结 Collection |---List(存储有序,可重复) |---ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全.效率高 |--- ...
- October 7th 2016 Week 41st Friday
The land didn't move, but moved; the sea was not still, yet was still. 大地止而亦行,大海动而亦静. Remember that ...
- September 20th 2016 Week 39th Tuesday
Failure is not fatal, but failure to change might be. 失败并不致命,但无法改变却可能是致命的. I need change, but it see ...
- September 7th 2016 Week 37th Wednesday
Patience is bitter, but its fruit is sweet. 忍耐是痛苦的,但它的果实却是甜蜜的. However, many may give up before they ...
- MD(markdown)语法
#标题1 ##标题2 段落->空行分隔 `加背景` [超链接](https://www.baidu.com) **加粗** _斜体_ ~~删除线~~ . 列表一 . 列表二 图片: ![alt ...
- C++多线程编程(入门实例)
多线程在编程中有相当重要的地位,我们在实际开发时或者找工作面试时总能遇到多线程的问题,对多线程的理解程度从一个侧面反映了程序员的编程水平. 其实C++语言本身并没有提供多线程机制(当然目前C++ 11 ...
- NYOJ题目112指数运算
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAIICAIAAAAaCETRAAAgAElEQVR4nO3drW7jWtwv4PcmwnMhxb ...
- NYOJ题目100 1的个数
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsMAAAIqCAIAAABOpdBfAAAgAElEQVR4nO3drXLbzP834P9JhOdAgn ...