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 ...
随机推荐
- Maven学习记录3——创建、编译、打包、运行项目
http://blog.csdn.net/yaya1943/article/details/48464371
- TeamWork#3,Week5,Scrum Meeting 11.6, 11.7, 11.11, 11.12
11.6:到目前为止基本已完成相关知识的学习,各方面工作都开始进行,一开始进行比较慢. 11.7:项目遇到困难,需要补充相关知识,进度慢了下来. 11.11:各方面工作进展比较顺利,没有什么大问题. ...
- Task 4.5 求二维数组中的最大连通子数组之和
任务:输入一个二维整形数组,数组里有正数也有负数. 求所有子数组的和的最大值.要求时间复杂度为O(n). 1.设计思想:因为用之前的解决子数组最大和的问题的思路一直没能解决这个问题,后来看到同学使用将 ...
- 猫咪记单词——NABCD模型分析
N ——Need 需求:学习英语是一件非常重要的事.面对各种各样的考试,学习英语,最重要的就是词汇量,背单词是提高词汇量的最直接的方法,但是单纯的背单词太单调.寻找一些合适的,更易于接受的背单词学习英 ...
- 软工1816 · 作业（十二）Beta答辩总结
组长博客 宣传视频 github团队项目仓库 本组成员 队员姓名与学号 124 王彬(组长) 206 赵畅 215 胡展瑞 320 李恒达 131 佘岳昕 431 王源 206 陈文垚 209 陈志炜 ...
- 阅读<构建之法>第三10、11、12章并提出问题
<构建之法>第10.11.12章 第10章: 问题:对我们了解了用户的需求后,但是我们想法和做出来的软件会和用户的需求有偏差,比如风格.界面的修饰等等,那么我们程序猿怎样才能让自己的想法更 ...
- iOS成长之路-使用系统默认声音、震动
导入框架 代码片段 apple系统默认声音名称说明: 1.声音格式是MP3或m4r的需要转成caf格式(可先转成aif , aiff,然后修改后缀) 2.路径在/System/Library/Audi ...
- Internet History, Technology and Security (Week 7)
Week 7 Technology: Application Protocols Welcome to Week 7 of IHTS. This week has less material than ...
- 软工网络15团队作业8——Beta阶段敏捷冲刺（day1）
第 1 篇 Scrum 冲刺博客 1. 介绍小组新加入的成员,Ta担任的角色 --给出让ta担当此角色的理由 小组新加入的成员:3085叶金蕾 担任的角色:测试/用户体验/开发 理由:根据小组讨论以及 ...
- ubuntu下安装软件的三种方法
在ubuntu当中,安装应用程序常用的三种方法,分别是apt-get,dpkg安装deb和make install安装源码包三种. apt-get方法 使用apt-get install来安装应用程序 ...