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 ...
随机推荐
- HBase源代码分析
http://www.docin.com/p-647062205.html http://blog.csdn.net/luyee2010/article/category/1285622 http:/ ...
- Android的MVC框架
http://www.cnblogs.com/wanghafan/archive/2012/07/20/2600786.html MVC是当前比较流行的框架,随便Google下,就可以发现几乎所有的应 ...
- 深入理解Linux网络技术内幕——中断与网络驱动程序
接收到帧时通知驱动程序 在网络环境中.设备(网卡)接收到一个数据帧时,须要通知驱动程序进行处理. 有一下几种通知机制: 轮询: 内核不断检查设备是否有话要说.(比較耗资源,但在一些情况 ...
- 链表的实现 -- 数据结构与算法的javascript描述 第六章
链表 链表是由一组节点组成的集合.每个节点都使用一个对象的引用指向它的后继.指向另一个节点的引用叫做链 结构示意图 : 链表头需要我们标识 head { element:head,next:obj1 ...
- Java程序在向mysql中插入数据的时候出现乱码
今天在往数据库中插入数据的时候中文字符在数据库中就出现了乱码?网上有各种说法,但是适合我的,最终解决我的问题的只有下面一种! 在创建数据库的时候,注意设置编码方式. CREATE DATABASE ` ...
- js中字符串方法
字符串方法: 1. charAt(索引值)//通过索引值获取字符串中对应的值 例如: var str='sdf123'; alert(str.charAt(0));//结果弹出第一个索引对应的值:s
- SQL 语句优化—— （二） 索引的利用
索引是与表或视图关联的磁盘上结构,可以加快从表或视图中检索行的速度.索引包含由表或视图中的一列或多列生成的键.与书中的索引一样,数据库中的索引使您可以快速找到表或索引视图中的特定信息.索引包含从表或视 ...
- Oracle中的日期和字符串互相转换
转载出处:http://blog.sina.com.cn/s/blog_44a005380100k6rv.html TO_DATE格式(以时间:2007-11-02 13:45:25为例) ...
- ASP.Net中使用Report Service
昨天研究以下Report Service,发现SQL Service自带的报表服务器也非常强大, 一,报表在不同的应用中表现形式 参考:http://www.cnitblog.com/yide/arc ...
- DSP的cache一般在何时会生效，防止在cache使用造成数据不一致
在使用DSP的cache使能所有的ddr操作时,发现如果只是写操作,根据cache的机制,如果没有在了L1级hit,则直接使用write buffer来完成写操作. 假如hit的话,那之前一定发生过读 ...