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学习记录的更多相关文章

  1. jquery学习记录

    1.选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class=&q ...

  2. jQuery学习记录1

    jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;} 是冲突的,用了前者,再$(this).addClas ...

  3. jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。

    jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论   本文来源于www.i ...

  4. jQuery Moblile Demos学习记录Panel

    jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论   本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...

  5. 16 | “order by”是怎么工作的? 学习记录

    <MySQL实战45讲>16 | “order by”是怎么工作的? 学习记录http://naotu.baidu.com/file/0be0e0acdf751def1c0ce66215e ...

  6. 【jQuery】精细学习记录

    [jQuery]精细学习记录 基础 基本语法: $(选择器).action(回调函数); $/jQuery //jQuery核心函数 $(选择器) //获得的jQuery对象 jQuery核心 - j ...

  7. Python学习记录day5

    title: Python学习记录day5 tags: python author: Chinge Yang date: 2016-11-26 --- 1.多层装饰器 多层装饰器的原理是,装饰器装饰函 ...

  8. mysql查询练习题-2016.12.16

    >>>>>>>>>> 练习时间:2016.12.16 编辑时间:2016-12-20-->22:12:08 题: 涉及:多表查询.ex ...

  9. Python学习记录day6

    title: Python学习记录day6 tags: python author: Chinge Yang date: 2016-12-03 --- Python学习记录day6 @(学习)[pyt ...

随机推荐

  1. 【python】类变量和对象变量

    来源:http://www.cnblogs.com/gtarcoder/p/5005897.html python是一种解释性的语言,任何变量可以在使用的时候才声明以及定义,也可以在程序运行的任何位置 ...

  2. mac os 下打开FTP服务器

    mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w /System/Library/ ...

  3. Java Collection、Map集合总结

    1.Java中的Collection集合总结 Collection |---List(存储有序,可重复) |---ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全.效率高 |--- ...

  4. October 7th 2016 Week 41st Friday

    The land didn't move, but moved; the sea was not still, yet was still. 大地止而亦行,大海动而亦静. Remember that ...

  5. September 20th 2016 Week 39th Tuesday

    Failure is not fatal, but failure to change might be. 失败并不致命,但无法改变却可能是致命的. I need change, but it see ...

  6. September 7th 2016 Week 37th Wednesday

    Patience is bitter, but its fruit is sweet. 忍耐是痛苦的,但它的果实却是甜蜜的. However, many may give up before they ...

  7. MD(markdown)语法

    #标题1 ##标题2 段落->空行分隔 `加背景` [超链接](https://www.baidu.com) **加粗** _斜体_ ~~删除线~~ . 列表一 . 列表二 图片: ![alt ...

  8. C++多线程编程(入门实例)

    多线程在编程中有相当重要的地位,我们在实际开发时或者找工作面试时总能遇到多线程的问题,对多线程的理解程度从一个侧面反映了程序员的编程水平. 其实C++语言本身并没有提供多线程机制(当然目前C++ 11 ...

  9. NYOJ题目112指数运算

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAIICAIAAAAaCETRAAAgAElEQVR4nO3drW7jWtwv4PcmwnMhxb ...

  10. NYOJ题目100 1的个数

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsMAAAIqCAIAAABOpdBfAAAgAElEQVR4nO3drXLbzP834P9JhOdAgn ...