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 ...
随机推荐
- android 添加左右滑屏手势
今天要在自己的项目中添加左右滑动,实现日期的加减(原来已经做了加减按键).滑动在一个中间的layout中进行 思路:添加左右划屏幕判断,得到判断后模拟加减按键按下. 模拟按键按下用 mbotton.p ...
- centos ldap
Standalone LDAP Daemon, slapd(standalone lightweight access protocol)Lightweight Directory Access Pr ...
- 多个target下编译的时候出错问题的解决
在工程里如果有多个target的时候,如图 那么编译的时候一定要注意Xcode右侧勾选了正确的target,否则有可能会导致一系列让你想不到的bug. ,另外,如果工程中有framework,那么一定 ...
- Choosing Between ElasticSearch, MongoDB & Hadoop
An interesting trend has been developing in the IT landscape over the past few years. Many new tech ...
- 整合Spring.net到asp.net网站开发中初探
整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说 Spring提供了一个轻量级的用于构建企业级 ...
- Powerdesigner逆向工程从sql server数据库生成pdm
第一步:打开"控制面板"中的"管理工具" 第二步:点击"管理工具"然后双击"数据源(odbc)" 第三步:打开之后,点击 ...
- web前端学习之路
test 随着自己对于web前端知识了解的越多,越来越发现自己真的好菜 一脸茫然阶段 两年前大学接触网页设计,那时对于网页设计一窍不通,只是看了一本自己大学编的一本入门教材,我甚至不知道那些网页设计的 ...
- linux 分割文件
import os import sysimport subprocess if len(sys.argv)<3 : print 'usage: filenum filename' file_n ...
- hive 行转列 并添加虚列
select regexp_extract(a.col2,'(phonenum=\")(.*?)\"',2) user_device, regexp_extract(a.col13 ...
- Unity StrangeIoc框架 (三）signal信号方式
先创建TestRoot using UnityEngine; using System.Collections; using strange.extensions.context.impl; publ ...