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. HTML 表单 选择器

    表单元素 每个表单都对应一个<form></form>标签    表单内所有元素都写在 <form></form>里面: 1.最重要的属性 <fo ...

  2. 【leetcode】Linked List Cycle II (middle)

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Foll ...

  3. 【编程题目】一串首尾相连的珠子(m 个),有 N 种颜色(N<=10),取出其中一段,要求包含所有 N 中颜色,并使长度最短。

    40.百度研发笔试题 2)一串首尾相连的珠子(m 个),有 N 种颜色(N<=10),设计一个算法,取出其中一段,要求包含所有 N 中颜色,并使长度最短.并分析时间复杂度与空间复杂度. 思路: ...

  4. sql的优化相关问题

    这篇文章写的真心不错,值得仔细拜读,所以将其转载过来了. 一.             分析阶段 一 般来说,在系统分析阶段往往有太多需要关注的地方,系统各种功能性.可用性.可靠性.安全性需求往往吸引 ...

  5. 【2016-08-21】Linux内核版本编号规则简介

    我们已经了解可以使用下面的几天命令来查看Linux内核版本及Ubuntu发行版本的信息: uname -r uname -a cat /proc/version lsb-release -a 等等 可 ...

  6. 比较 http连接 vs socket连接

    http连接 :短连接,客户端,服务器三次握手建立连接,服务器响应返回信息,连接关闭,一次性的socket连接:长连接,客户端,服务器三次握手建立连接不中断(通过ip地址端口号定位进程)及时通讯,客户 ...

  7. linux /etc/profile和/etc/bashrc

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行,并从/etc/profile.d目录的配置文件中搜集shell的设置,/etc/bashrc:为每一个运 ...

  8. python异步爬虫

    本文主要包括以下内容 线程池实现并发爬虫 回调方法实现异步爬虫 协程技术的介绍 一个基于协程的异步编程模型 协程实现异步爬虫 线程池.回调.协程 我们希望通过并发执行来加快爬虫抓取页面的速度.一般的实 ...

  9. HTML5 – 4.canvas

    1.绘制矩形 2.绘制圆形 3.绘制文字 4.保存文件 什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. < ...

  10. Pyqt QTabWidget 简单的计算器集合

    今天我们简单介绍下QTabWidget,然后在加入Demo计算器 首先我先讲下文件的结构: 文件分四部分, 一部分是Ui设计文件, 一部分是由Ui生成的py文件, 一部分是 计算器的逻辑文件,  最后 ...