jQeury学习笔记
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学习笔记的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- paip.c++ qt 项目工程互相引用的方法
paip.c++ qt 项目工程互相引用的方法 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/ ...
- S3C6410嵌入式应用平台构建（三）
构建了好久的系统,由于工作原因,没有及时写记录,目前我已经进展到构建yaffs2文件系统,启动Linux内核了.Uboot移植基本功能已经完成. 由于Uboot移植方法大致是一样的,我主要参考这位博友 ...
- 奔五的人，准备学习iOS开发
这些年一直在java/web/android方面折腾,去年最终换成了apple的设备,本想就開始折腾iOS,却始终没能进入状态. 从今天開始,本人宣布:正式进入iOS/xcode 5的编程学习中,也希 ...
- 在 Visio 中录制宏
在“开发工具”选项卡上,单击“录制宏”.(如果您看不到“开发工具”选项卡,请参阅下面的“显示‘开发工具’选项卡”.) 在“宏名”框中,键入宏名称. 在“快捷键”框中,键入与 Ctrl 键一起使用可运行 ...
- 【原创】重绘winform的GroupBox
功能:重绘winform的GroupBox,以便调整边框颜色和边框宽度 using System; using System.Collections.Generic; using System.Com ...
- Java 字符串截取函数 substring()
在String中有两个substring()函数,如下: 一:String.substring(int start) 参数: start:要截取位置的索引 返回: 从start开始到结束的字符串 例如 ...
- 软件开发常用Linux命令
解压缩 tar -zxvf xxx.tar.gz 文件显示及查找常用于分析log //显示file中包含aaa的行 cat <file>|grep aaa 查看cpu memory基本信息 ...
- 选项卡 js操作
html代码展示(这里展示的是关于日程的标签页)css样式这里省略了>>>>自己写的可能更好看 <div class="row"> <ul ...
- C++_基础_类和对象
内容: (1)引用 (2)类型转换 (3)C++社区给C程序员的建议 (4)面向对象编程的概念 (5)类和对象 (6)构造函数 (7)初始化列表及其必要性 1.引用1.1 指针和引用的使用说明(1)指 ...
- Cglib学习站点（转）
1.CGlib简单介绍,访问地址:http://www.blogjava.net/stone2083/archive/2008/03/16 /186615.html,从简单的示例到不同业务场景的变化, ...