jQuery速看
本文参考w3school网站。
jQuery是一个十分流行的javascript库。
基础语法是：$(selector).action()
$：表示使用的语法为jquery
selector：选择器
action()：行为
selector 选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。。
jquery基于 css选择器 对html元素进行选择，并且还有一些自己的独特的选择器。
$("*") // 所有元素
$("this") // 选取当前html元素
$("p") // 所有p元素
$(".first") // 所有class=first的元素
$("h1,p,tr") // 支持选择器分组
$("p:first") // 选取第一个p元素
$("#second") // 所有id=second的元素
$("p.first") // 所有类名为first的p元素
$(".first:hover") // 支持伪类/伪元素
//css中的组合选择符也适用于jquery
$(".first p") //后代选择符,类名为first的元素中所包含的所有p元素
$(".first>p") //子选择符，类名为first的子p元素，孙子p元素就不考虑了
$(".first+p") //相邻兄弟选择符，紧邻的第一个
$(".first~p") //普通相邻兄弟选择符，靠着的所有
还可以对具有某种属性的html元素进行选择。
$("[href]") //选取所有带有 href 属性的元素。
$("[href='#']") //选取所有带有 href 值等于 "#" 的元素。
$("a[href!='#']") //选取所有带有 href 值不等于 "#" 的a元素。
$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。
遍历方法
在实际生产环境中，我们可能会对所选中的元素的子元素或者父元素或者元素集中的某元素进行操作，所以我们需要知道jQuery用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素的方法。
1 父元素
parent() 返回被选元素的直接父元素。
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
2 子元素
children() 返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
3 同胞元素
siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
4 过滤
first() 返回被选元素的首个元素。
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素。
filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 返回不匹配标准的所有元素。
5 遍历
each() 为每个匹配元素执行函数
事件方法
在讲action()行为之前，得先介绍一下事件，因为行为一般由事件触发。
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
来看一看常用的事件方法：
1 $(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。(一般jq中必加此函数，尽管我接下来的代码示例大部分都没加。。。。)
$(document).ready(function(){
//jQuery代码
})
2 click() 鼠标点击事件
3 dbclick() 鼠标双击事件
4 mouseenter() 当鼠标指针穿过元素事件
5 mouseleave() 鼠标离开元素事件
6 mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键
7 hover() 用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个 函数(mouseleave)。
8 focus() blur() 元素获得/失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> </style>
</head>
<body>
<form>
姓名：<input name="name" value="欧阳锋"/><br/>
功法：<input name="gongfa" value="蛤蟆功"/>
</form> <script src="js/jq.js"></script>
<script>
$(document).ready(function(){
$('input').focus(function(){
$(this).css('background-color','#2aabd2')
});
$('input').blur(function(){
$(this).css('background-color','white')
}); }) </script>
</body>
</html>
focus和blur演示
action() 行为
通常jQuery的行为可以分为两类，第一类是对html元素或者其属性进行操作，另一类就是jQuery所提供的效果
第一类
1 获取以及设置html元素节点的值
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> </style>
</head>
<body>
<p>hello <span>world</span></p>
<select name="languane">
<option value="chinese" >简体中文</option>
<option value="english" selected>English</option>
</select> <script src="js/jq.js"></script> //个人jquery路径
<script>
console.log($('p').text());
console.log($('p').html());
console.log($('select').val());
</script>
</body>
</html>
三种方法效果演示
2 获取以及设置html元素节点的属性
attr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
color: #1b6d85;
text-decoration: none;
} </style>
</head>
<body> <a href="#" target="_blank">hello world</a> <script src="js/jq.js"></script>
<script>
console.log($('a').attr('href'));
$('a').attr({
'href':'http://baidu.com'
}) </script>
</body>
</html>
演示代码
3 添加或者删除元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
color: #1b6d85;
text-decoration: none;
} </style>
</head>
<body> <a href="#" target="_blank">hello world</a> <script src="js/jq.js"></script>
<script>
var a = $('a').eq(0);
a.after('<b> after </b>');
a.before('<b> before </b>')
a.append('<b> append </b>');
a.prepend('<b> prepend </b>') </script>
</body>
</html>
4 删除元素
remove() - 删除被选元素（及其子元素） 可以传入一个参数，参数语法与选择器类似。$('p').remove('.first') 删除class=first的所有p元素。
empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
color: #0b79e9;
} </style>
</head>
<body> <p id="id1">hello <span>lala</span> world</p>
<p class="first">crazy</p>
<div style="height: 200px;width:200px;background-color: #2e85e6">
<p>crazy</p>
</div> <script src="js/jq.js"></script>
<script>
var a = $('p');
a.remove('.first');
$('div').empty()
</script>
</body>
</html>
5 操作css类
css() - 设置或返回样式属性，（当我们仅仅使用js时，element.style并不能获取内部样式或者外部样式中的css属性，使用jquery.css()则很方便）
如需设置指定的 CSS 属性，请使用如下语法: css("propertyname","value"); 多个属性使用逗号隔开。
addClass() - 向被选元素添加一个或多个类，注意： 添加类时不要加 '.' ，添加多个类时用空格隔开。
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
color: #0b79e9;
}
.second{
background-color: yellow;
} </style>
</head>
<body> <p id="id1">hello world</p>
<p class="first">crazy</p>
<div style="height: 200px;width:200px;background-color: #2e85e6">
<p>crazy</p>
</div> <script src="js/jq.js"></script>
<script>
var a = $('p').eq(1);
console.log(a.css('color'));
$('p').eq(0).addClass('first second');
$('p').eq(0).removeClass('first'); </script>
</body>
</html>
6 尺寸
width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 返回元素的宽度（包括内边距）。
innerHeight() 返回元素的高度（包括内边距）。
outerWidth() 返回元素的宽度（包括内边距和边框）。
outerHeight() 返回元素的高度（包括内边距和边框）。
outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
color: #0b79e9;
background-color: #9aaece;
height: 300px;
width: 300px;
margin: 0;
text-align: center;
box-shadow: 2px 2px 2px grey; }
.second{
background-color: yellow;
font-size: 32px;
padding: 10px; }
.third{
margin: 10px;
background-color: #afd9ee;
font-size: 24px;
color:white;
} </style>
</head>
<body> <div class="first">
<div class="second">
<p>hello world</p>
</div>
<div class="third">
<p>lala</p>
</div>
</div> <script src="js/jq.js"></script>
<script>
var a = $('.first').eq(0);
console.log(a.width());
console.log(a.height());
var b = $('.second').eq(0);
console.log(b.innerHeight()); </script>
</body>
</html>
第二类
1 隐藏/显示
hide(speed,callback) 隐藏元素,speed表示速度，callback表示 回调函数。
Callback 函数在当前动画 100% 完成之后执行。两个参数非必需，若无特殊说明，以下所有方法中的speed和callback都为非必需参数
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
show(speed,callback) 显示元素
toggle(speed,callback) 显示或者隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> </style>
</head>
<body>
<p>hello world</p>
<button type="button">显示或者隐藏</button>
<script src="js/jq.js"></script>
<script>
$('button').eq(0).click(function(){
$('p').toggle(200,function(){
console.log('haha')
})
}) </script>
</body>
</html>
2 淡入/淡出
fadeIn(speed,callback) 用于淡入已隐藏的元素。
fadeOut(speed,callback) 方法用于淡出可见元素。
fadeToggle(speed,callback) 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo(speed,opacity,callback) 方法允许渐变为给定的不透明度（opacity值介于 0 与 1 之间）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
height: 100px;
width:100px;
background-color: #9aaece;
}
.second{
height: 100px;
width:100px;
background-color: pink;
}
.third{
height: 100px;
width:100px;
background-color: grey;
} </style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="first" style="display: none"></div>
<button type="button">fadein/fadeout</button>
<script src="js/jq.js"></script>
<script>
$('button').click(function(){
$('div').eq(0).fadeOut(1000,function(){
$('div').eq(3).fadeIn(1000,function(){
$('div').fadeTo(1000,0.24)
})
}); })
</script>
</body>
</html>
3 滑动
slideDown(speed,callback) 方法用于向下滑动元素。
slideUp(speed,callback) 方法用于向上滑动元素。
slideToggle(speed,callback) 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
height: 100px;
width:100px;
background-color: #9aaece;
display: none;
text-align: center;
}
.second{
height: 100px;
width:100px;
background-color: pink;
}
.third{
height: 100px;
width:100px;
background-color: grey;
} </style>
</head>
<body>
<div class="first">
<p>hello world</p>
</div> <button type="button">slideup/slidedown</button>
<script src="js/jq.js"></script>
<script>
$('button').click(function(){
$('.first').slideDown(1000,function(){
$('.first').slideUp(2000)
})
}) </script>
</body>
</html>
4 动画
animate({params},speed,callback) 方法用于创建自定义动画。必需的 params 参数定义形成动画的 CSS 属性。
注意：1 jQuery 提供针对动画的 队列 功能。也就是说多个animate()调用会被逐一运行，不需要将animate嵌入到上一个animate的回调函数中。
2 jQuery几乎可以操作所有css属性，当使用 animate() 时，必须使用 Camel标记法 书写所有的属性名，比如，必须使用 fontSize 而不是 font-size。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
height: 100px;
width:100px;
background-color: #9aaece;
text-align: center;
opacity: 0.4;
position: relative; /*默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
如需对位置进行操作，记得首先把元素的 CSS position 属性设置为
relative、fixed 或 absolute。*/
}
.second{
height: 100px;
width:100px;
background-color: pink;
}
.third{
height: 100px;
width:100px;
background-color: grey;
} </style>
</head>
<body>
<div class="first">
<p>hello world</p>
</div> <button type="button">animate</button>
<script src="js/jq.js"></script>
<script>
$('button').click(function(){
$('.first').animate({
left:'150px',
top:'200px',
},1000);
$('.first').animate({
fontSize:'26px'
},1000)
}) </script>
</body>
</html>
5 停止效果
stop() 方法用于停止动画或效果，在它们完成之前。
不带参数：仅仅停止滑动
一个参数 true：停止所有动画
两个参数 true,true:停止动画，但快速完成动作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first{
height: 100px;
width:100px;
background-color: #9aaece;
text-align: center;
opacity: 0.4;
position: relative; /*默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
如需对位置进行操作，记得首先把元素的 CSS position 属性设置为
relative、fixed 或 absolute。*/
}
.second{
color: white;
background-color: grey;
}
.third{
height: 100px;
width:100px;
background-color: grey;
} </style>
</head>
<body>
<div class="second">
<button type="button" id="first_but">animate</button>
<button type="button" id="second_but">stop_animate</button>
<button type="button" id="third_but">stop_but_runover</button>
<button type="button" id="fourth_but">stop_slide</button>
</div> <div class="first">
<p class="third">hello world</p>
</div> <script src="js/jq.js"></script>
<script>
$('#first_but').click(function(){
$('.first').animate({
left:'150px',
top:'200px',
},4000);
$('.first').animate({
fontSize:'26px'
},4000)
});
$('#second_but').click(function(){
$('.first').stop(true)
}); $('#third_but').click(function(){
$('.first').stop(true,true)
});
$('#fourth_but').click(function(){
$('.first').stop()
}) </script>
</body>
</html>
jQuery AJAX
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
$(selector).load(URL,data,callback) 从服务器加载数据，并把返回的数据放入被选元素中
$.get(URL,callback) 通过 HTTP GET 请求从服务器上请求数据。
$.post(URL,data,callback) 通过 HTTP POST 请求从服务器上请求数据。
jQuery速看的更多相关文章
- jQuery入门看这一篇就够了
一.选择器 1.基本 名称 用法 描述 #id $("#myDiv"); 根据给定的ID匹配一个元素 element $("div"); 根据给定的元素标签名匹 ...
- jquery选择器 看这个链接吧！2017.6.2
http://www.cnblogs.com/tylerdonet/archive/2013/04/02/2996713.html关于jquery选择器说明.
- P1162_填涂颜色(JAVA语言)(速看！全洛谷最暴力解法！QAQ)
思路:看了看数据n<=30,于是我们可以暴力求解(主要是BFS学的不咋地~2333).枚举每个0的位置,看上下左右四个方向上是否都有1.都有1的话说明被1包围,即在闭合圈的内部,开个数组标记一下 ...
- 速看，ElasticSearch如何处理空值
大家好,我是咔咔 不期速成,日拱一卒 在MySQL中,十分不建议大家给表的默认值设置为Null,这个后期咔咔也会单独出一期文章来说明这个事情. 但你进入一家新公司之前的业务中存在大量的字段默认值为Nu ...
- DC010的精华分享【首发速看】
世界黑客大会[DC010] 是全球安全圈最神秘.最前沿的黑客大派对 而作为中国首个受DEFCON授权支持成立的 地区性 信息 安全 技术交流平台 DEFCONGROUP 010(DC010) 在国内 ...
- 安全意识第三期丨关于高速ETC办理的这些新骗局，速看！
近期,最火爆的莫过于ETC了. 不仅各大银行,甚至微信和支付宝都推出了办理服务. 虽说更加便捷了,却也带来了安全隐患. 下面这个案例,大家一定要注意,已经有很多车主“中招”,落入了骗子的圈套. 注意: ...
- jQuery 常用速查
jQuery 速查 基础 $("css 选择器") 选择元素,创建jquery对象 $("html字符串") 创建jquery对象 $(callback) $( ...
- 前后台交互经常使用的技术汇总（后台：Java技术，前台：Js或者Jquery）
1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...
- MVC中处理表单提交的方式（Ajax+Jquery）
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
随机推荐
- Flexbox + js实现滑动拼图游戏
滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片. 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等.但是,使用了Flexbox布局以后 ...
- 阿里云oracle启动失败
1.监听启动失败: 将$ORACLE_HOME/network/admin 中的listener.ora中的主机名改为localhost 2.sqlplus中startup启动失败 ,出现ORA-00 ...
- Scrum Meeting 11.1
成员 今日任务 明日计划 用时 徐越 学习利用servlet上传下载文件 代码迁移 4h 赵庶宏 数据库的连接及代码学习 数据库连接 2h 武鑫 设计界面;尝试写一些初步的代码,独立完成一些简单界面 ...
- MathExam作业
作业 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 50 40 • Estimate • ...
- 实验三— —敏捷开发与XP实践
---恢复内容开始--- java的第二个实验——JAVA面向对象程序设计 北京电子科技学院 实 验 报 告 课程:Java程序设计 班级:1352 姓名:林涵锦 学号:2013 ...
- 第十章I/O
系统级i/o 开始进程时的三个标准: 标准输入(描述符0):STDIN_FILENO 标准输出(描述符1):STDOUT_FILENO 标准错误(描述符2):STDERR_FILENO 文件位置: 从 ...
- cocos2d-x 相关文章资源（安卓开发）
http://blog.csdn.net/sdhjob/article/details/38734993 http://www.cnblogs.com/code4app/p/4026665.html ...
- html border画三角形
最近遇到了问题就是画推进条类似于
- C# Linq找不到行或已更改
前段时间工作中的一个新需求,有机会用到了Linq to SQL.使用后的第一感觉,就是方便很多,也为整个项目节约了一大把的开发时间,甚至代码量也少了很多.不过在程序的实际运行中,始终会遇到一些莫名其妙 ...
- datetime类型转换
Select CONVERT(varchar(100), GETDATE(), 8):14:53:14 Select CONVERT(varchar(100), GETDATE(), 9): 06 ...