jQuery 语法:

核心语法: $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
action() 执行对元素的操作
1.事件

click()
$("p").click(function(){
// action goes here!!
});

hover()方法用于模拟光标悬停事件。
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()当元素获得焦点时，发生 focus 事件

blur()当元素失去焦点时，发生 blur 事件

mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件

mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
2.效果

a.隐藏和显示:
hide() 和 show() 方法隐藏和显示 HTML 元素
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$("button").click(function(){
$("p").hide(1000);
});
toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素
语法:同上
$("button").click(function(){
$("p").toggle();
});

b.淡入淡出:
fadeIn() fadeOut() fadeToggle() 实现元素的淡入淡出效果
语法:同上
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});

c.滑动
slideDown() slideUp() slideToggle()
语法:同上上

d.动画/停止动画
animate() 方法用于创建自定义动画
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
});
stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
3.HTML

a.获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容($("#test").text();)
html() - 设置或返回所选元素的内容（包括 HTML 标记）($("#test").html();)
val() - 设置或返回表单字段的值($("#test").val();)
设置内容
$("#test1").text("Hello world!");

b.获取属性 - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置属性
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cc/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});

c.添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

function appendText()
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);
}

d.删除元素/内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

e.CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

返回首个匹配元素的 background-color 值：
$("p").css("background-color");
将为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});
4.遍历

a.向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil()

返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});

b.向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});

使用可选参数来过滤对子元素的搜索,返回类名为 "1" 的所有 <p> 元素，并且它们是 <div>的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});

返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");//所有元素：$("div").find("*");
});

c.在 DOM 树中水平遍历
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

d.过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素
选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
$("div p").first();
});

last() 方法返回被选元素的最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素
选取第一个 <p> 元素（索引号 0）：
$(document).ready(function(){
$("p").eq(0);
});

filter() 方法允许您规定一个标准。不匹配的元素会被从集合中删除，匹配的元素会被返回。
返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".intro");
});

not() 方法返回不匹配标准的所有元素

jQeury学习笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. Umbraco模型默认属性

    Media Model的属性: umbracoFileumbracoWidthumbracoHeightumbracoBytesumbracoExtension

  2. python entry points 例子

    pbr的介绍不多,http://ju.outofmemory.cn/entry/156745 $ mkdir entry_test; cd entry_test; git init $ mkdir  ...

  3. Openstack 的 RPC使用。

    大家都已经很熟悉了RPC了. 比如说nfs就是采用的RPC通信. 尤其SUN RPC 已经成为了C语言开发的经典一种进程间调用机制. openstack 的RPC 机制, 是基于AMQP 活着其他高级 ...

  4. drupal7中CKEditor开启上传图片功能

    在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...

  5. HTML之学习笔记（三）文本标签

    标题标签 html的标题标签从h1~h6共六个级别,权值不断降低,即不断变小,不用使用CSS控制来取代h标签,因为网页搜索引擎通过搜索到你的页面,找到你页面的h标签并为h标签建立索引,如果h标签被替代 ...

  6. JavaScript之insertBefore()和自定义insertAfter()的用法。

    在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还 ...

  7. Facebook、新浪微博、Twitter、腾讯微博分享代码

    最近总结一下用到的分享代码 FaceBook分享 <a href="https://www.facebook.com/sharer/sharer.php?u=你的链接" ta ...

  8. pycharm中添加扩展工具pylint

    今天调试了好几个小时,想吧pylint集成到pycharm中去,从网上找了个宝贝帖 子,但是不好用,原因是作者写的脚本是检查工程和模块的,而我的是单独检查一个文件,当然前者肯定会在项目后期用的.所以就 ...

  9. 最近比较迷flash professional cc 做PPT，做一个flash做动态打字效果的教程

    想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...

  10. 四轴飞行器1.2.2 RT-Thread 串口

    四轴飞行器1.2.2 RT-Thread 串口        本来是打算说根据RT-Thread的设备管理提供的驱动接口些串口驱动的,但是仔细一看,我去,串口驱动写好了,只需要调用就可以了.下面我们说 ...