jQuery初学者笔记 一
jQuery初学者笔记 一
Mirror王宇阳 by
jQuery语法
jQuery语法是通过选取HTML元素，并对选取的元素进行操作
基础语法：
所有jQuery语句用“$”符号开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击消失</p>
<p>点击消失</p>
<script src="jq/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){ //固定的jQ开头
$("p").click(function(){ // 选取p标签，并绑定clisk事件
$(this).hide(); //事件触发使用hide()方法（隐藏当前标签属性）
})
})
</script>
</body>
</html>
jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档
// jQuery入口函数
$(document).ready(function(){
//jQuery代码
});
/*******************************/
$(function(){
//jQuery代码
});
选择器语法:
jQuery的选择器语法格式和CSS的调用方法一样的哦！
选择器允许基于元素的id、class、type、属性、属性值等选择方法来找到指定的HTML元素
元素选择器
$("p"); //选取p标签元素
id选择器
$("#demo"); // 选取id='demo'的元素
.class选择器
$(".demo"); // 选取class='demo'的元素
所有元素
$("*"); // 选取全部元素
jQuery事件：
|Event 函数 |绑定函数至 |
|$(document).ready(function) |将函数绑定到文档的就绪事件（当文档完成加载时） |
|$(selector).click(function) |触发或将函数绑定到被选元素的点击事件 |
|$(selector).dblclick(function) |触发或将函数绑定到被选元素的双击事件 |
|$(selector).focus(function) |触发或将函数绑定到被选元素的获得焦点事件 |
|$(selector).mouseover(function)|触发或将函数绑定到被选元素的鼠标悬停事件 |
事件语法：
参考：
|方法 |描述 |
|bind() |向匹配元素附加一个或更多事件处理器 |
|blur() |触发、或将函数绑定到指定元素的 blur 事件 |
|change() |触发、或将函数绑定到指定元素的 change 事件 |
|click() |触发、或将函数绑定到指定元素的 click 事件 |
|dblclick() |触发、或将函数绑定到指定元素的 double click 事件 |
|delegate() |向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
|die() |移除所有通过 live() 函数添加的事件处理程序。 |
|error() |触发、或将函数绑定到指定元素的 error 事件 |
|event.isDefaultPrevented() |返回 event 对象上是否调用了 event.preventDefault()。 |
|event.pageX |相对于文档左边缘的鼠标位置。 |
|event.pageY |相对于文档上边缘的鼠标位置。 |
|event.preventDefault() |阻止事件的默认动作。 |
|event.result |包含由被指定事件触发的事件处理器返回的最后一个值。 |
|event.target |触发该事件的 DOM 元素。 |
|event.timeStamp |该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
|event.type |描述事件的类型。 |
|event.which |指示按了哪个键或按钮。 |
|focus() |触发、或将函数绑定到指定元素的 focus 事件 |
|keydown() |触发、或将函数绑定到指定元素的 key down 事件 |
|keypress() |触发、或将函数绑定到指定元素的 key press 事件 |
|keyup() |触发、或将函数绑定到指定元素的 key up 事件 |
|live() |为当前或未来的匹配元素添加一个或多个事件处理器 |
|load() |触发、或将函数绑定到指定元素的 load 事件 |
|mousedown() |触发、或将函数绑定到指定元素的 mouse down 事件 |
|mouseenter() |触发、或将函数绑定到指定元素的 mouse enter 事件 |
|mouseleave() |触发、或将函数绑定到指定元素的 mouse leave 事件 |
|mousemove() |触发、或将函数绑定到指定元素的 mouse move 事件 |
|mouseout() |触发、或将函数绑定到指定元素的 mouse out 事件 |
|mouseover() |触发、或将函数绑定到指定元素的 mouse over 事件 |
|mouseup() |触发、或将函数绑定到指定元素的 mouse up 事件 |
|one() |向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
|ready() |文档就绪事件（当 HTML 文档就绪可用时） |
|resize() |触发、或将函数绑定到指定元素的 resize 事件 |
|scroll() |触发、或将函数绑定到指定元素的 scroll 事件 |
|select() |触发、或将函数绑定到指定元素的 select 事件 |
|submit() |触发、或将函数绑定到指定元素的 submit 事件 |
|toggle() |绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
|trigger() |所有匹配元素的指定事件 |
|triggerHandler() |第一个被匹配元素的指定事件 |
|unbind() |从匹配元素移除一个被添加的事件处理器 |
|undelegate() |从匹配元素移除一个被添加的事件处理器，现在或将来 |
|unload() |触发、或将函数绑定到指定元素的 unload 事件 |
过滤选择器
基本标签层次过滤器
:first/:last
:first:选取第一个元素:last:选取最后一个元素:not(*):去除选择器给定的元素
:even/:odd
:even:偶数索引的标签
:odd:奇数索引的标签
:eq()/:gt()/:lt()
eq():选取指定索引的元素
ge():选取大于指定索引的元素
lt():选取小于指定索引的元素
:focus 选取所有失去焦点的元素
:header 选取所有标题元素（h1\h2\h3……）
:animated 匹配所有正在执行动画操作的元素
实例：
$(document).ready(function(){
$("div:lt(4)").addClass("myClass");// 除最后三个元素以外添加myClass
$("div:not(.green,.gray)").addClass("myClass"); //除了green和gay以外的元素添加myClass
$("div:gt(3)").addClass("myClass");//给最后三个元素添加myClass
$("div:even").addClass("myClass");//偶数索引添加myClass
$("div:odd").addClass("myClass");// 奇数索引添加没有Class
$("div:eq(3)").addClass("myClass");//给指定索引添加myClass
$("div:first").addClass("myClass");//第一个标签
$("div:last").addClass("myClass");//最后一个标签
});
内容过滤选择器
- :contains(text) 选取包含text文本内容的元素；区分大小写
- :empty 选取不含子元素或者文本节点的空元素
- :has(selector) 选取含有选择器所匹配的元素的元素
- :parent 选取含有子元素或文本节点的元素
属性过滤选择器
- [attribute] 选取拥有此属性的元素
- [attribute = value] 选取此属性值为value的所有元素
- [attribute != value] 选取此属性值不为value的所有元素
- [attribute ^= value] 选取此属性值为value开始的所有元素
- [attribute $= value] 选取此属性值为value结束的所有元素
- [attribute *= value] 选取属性值包含value的所有元素
表单过滤选择器
表单属性过滤选择器
jQuery效果
隐藏和显示 (hide/show)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hide()/show()</title>
</head>
<body>
<div id="demo">
<input type="button" id="hide" value="隐藏" />
<input type="button" id="show" value="显示" />
<div id="a1" style=
"color: #000;
background-color: #66FF66;
width: 100px;
height: 100px;
margin-top: 20px;
text-align: center;">
演示块
</div>
</div>
<script src="jq/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#hide").click(function(){
// 隐藏
$("#a1").hide();
})
$("#show").click(function(){
//显示
$("#a1").show();
})
})
</script>
</body>
</html>
<!-- hide/show()语法原型
$().hide(speed,callback);
$().show(speed,callback);
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
toggle():开关
$("#toggle").click(function(){
// toggle开关
$("#a1").toggle();
});
<!--
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
淡入淡出
fadeIn():淡入已隐藏的元素
- 语法
$().fadeIn(speed,callback);
<!--
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
fadeOut():淡出可见的元素
- 语法
$().fadeOut(speed,callback);
<!--
speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
fadeToggle()：淡入/出 已隐藏的/可见的元素
- 语法
$().fadeToggle(speed,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
callback:完成执行后调用的函数名称
-->
fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间）
- 语法 ：该方法严格的说只是将原本100%透明的隐藏给设置了不透明度来利用
$().fadeTo(speed,opacity,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
opacity:设置给定的不透明度（0~1）
callback:完成执行后调用的函数名称
-->
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
<script src="jq/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo">
<input type="button" id="fadeIn" value="fadeIn" />
<input type="button" id="fadeOut" value="fadeOut" />
<input type="button" id="fadeToggle" value="fadeToggle" />
<input type="button" id="fadeTo" value="fadeTo" />
<br>
<div id="a1" style="
background-color: #5555FF;
width: 300px;
height: 100px;
margin-top: 20px;
">
</div>
<div id="info" style="display: none;">
已隐藏
</div>
</div>
<script>
function info(){
$("#info").toggle();
}
$(function(){
$("#fadeIn").click(function(){
$("#a1").fadeIn("slow",info());
// slow:慢速的
// fast:快速的
});
$("#fadeOut").click(function(){
$("#a1").fadeOut("slow",info());
});
$("#fadeToggle").click(function(){
$("#a1").fadeToggle("slow",info());
})
$("#fadeTo").click(function(){
// 设置隐藏不透明度(通俗的讲就是颜色变淡并不是完全淡出)
$("#a1").fadeTo("slow",0.5);
})
})
</script>
</body>
</html>
滑动
slideDown():向下滑动元素
- 语法
$().slideDown(speed,callback);
<!--
speed:slow\fast\毫秒值
callback:完成动作后执行的函数名称
-->
slideUp():向上滑动元素
- 语法
$().slideUp(speed,callback);
<!--
speed:slow\fast\毫秒值
callback:完成动作后执行的函数名称
-->
slideToggle():上/下 切换滑动元素
$().slideToggle(speed,callback);
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideDown()|slideUp()|slideToggle()</title>
<script src="jq/jquery-3.4.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#Down,#Up,#Toggle{
width: 60px;
height: 20px;
color: #000000;
font-size: 10px;
text-align: center;
float: left;
cursor: pointer;
}
#Down{background-color: #5555FF;}
#Toggle{background-color: #FCFF9F;}
#Up{background-color: #66FF66;}
#slide{
clear: both;
background-color: #CCCCCC;
width: 180px;
height: 100px;
border-top: #FF0000;
text-align: center;
position: relative;
}
#demo{margin: 10px 0px 0px 10px;}
</style>
</head>
<body>
<div id="demo">
<div id="Down">向下滑动</div>
<div id="Toggle">滑动切换</div>
<div id="Up">向上滑动</div>
<div id="slide">
</div>
</div>
<script>
$(function(){
$("#Down").click(function(){
$("#slide").slideDown();
})
$("#Up").click(function(){
$("#slide").slideUp();
})
$("#Toggle").click(function(){
$("#slide").slideToggle();
})
})
</script>
</body>
</html>
动画
animate():创建自定义动画
- 语法
$().animate({css},speed,callback);
<!--
{css}:定义动画的css属性
（支持多个同时、支持相对值[+=/-=]、支持hide,toggle…等预定义值）
支持‘队列’式的动画（即多个animate()组成一串（队列）动画）
speed:slow/fast/毫秒值
callback:执行完成调用函数
-->
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animate()动画</title>
<script src="jq/jquery-3.4.1.min.js"></script>
<style type="text/css">
#demo{
margin: 10px;
width: 100px;
height: 100px;
background-color: #5555FF;
position: relative;
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
$(function(){
$("#demo").animate({
left:'300px',
width:'+=150px',
height:'+=150px',
// 支持多个样式的组合的动画
// 支持相对值
},2000);//支持延迟
$("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
$("#demo").click(function(){
$("#demo").animate({top:'100px'},1000);
$("#demo").animate({left:'100px'},1000);
$("#demo").animate({top:'0px'});
$("#demo").animate({left:'0px'});
// 支持队列组合的动画动作
})
})
</script>
</body>
</html>
- 停止动画或效果：
- 语法
$().stop(stopAll,goToEnd);
<!--
stopAll:是否清除动画队列 默认false
goToEnd:是否立即停止动画 默认false
默认情况下，stop()会清除被选中的元素的当前动画
-->
Callback()
- 当前动画 100% 完成之后执行
jQuery DOM
获取/设置内容
- text() 设置/返回所选元素的文本内容[原型：innerhtml]
- html() 设置/返回所选元素的内容（含HTML标签）
- val() 设置/樊湖表单字段的value
获取/设置属性
- attr() 设置/返回所选元素的属性内容（支持多个属性设置，返回数组）
添加元素
- append() 尾部插入元素
- prepend() 开头插入元素
- after() 被选元素后插入元素
- before() 被选元素前插入元素
删除元素
- remove() 删除被选元素和子元素
- 接受一个参数，过滤被删除的元素（即指定删除）
- removeClass() 删除元素的class加载
- empty() 删除被选元素的子元素
jQuery CSS 获取/设置
- addClass() 向被选元素添加一个或多个Class类
- removerClass() 从被选元素中删除指定的一个或多个Class类
- toggleClass() 对被选元素的add/remove进行切换式的操作
- css() 设置/获取被选元素的Class属性
- css("classname","value") 单个
- css("classname":"value",……) 多个
jQuery 尺寸设置
- width()/height() 设置/返回元素的宽度/高度（content;不包括内边距、边框、外边距）
- innerWidth()/innerHeight() 设置/返回元素的宽度/高度（Content+Padding；不包括边框、外边距）
- outerWidth()/outerHeight() 设置/返回元素的宽度/高度（Content+Padding+Border；不包括外边距）
jQuery 遍历
向上遍历DOM树
- parent() 返回自己的直接父类元素
- parents() 返回自己的所有直系类元素（直至根元素）
- parentsUntil() 返回两种直接的所有直系类元素（不包含）
// parents(*)/parentsUntil(*):两个方法在这里均可选一个参数接收
向下遍历DOM树
- children() 返回被选元素的所有直接子元素(支持过滤参数)
- find() 返回被选元素的后代元素(支持过滤参数，指定标签、类名、id、name等)
水平遍历DOM树
siblings() 返回被选元素的所有同级元素(支持过滤参数)
next() 返回被选元素的下一个同级元素
nextAll() 返回被选元素之后的所有同级元素
nextUntil() 返回被选元素与参数之间的所有同级元素
prev() 返回被选元素的上一个同级元素
prevAll() 返回被选元素之前的所有同级元素
prevUntil() 返回被选元素与参数之间的所有同级元素
遍历 过滤
- first() 返回被选元素的首个子元素
- last() 返回被选元素的最后子元素
- eq() 返回被选元素中带有指定索引的元素(可选参数，指定索引)
- filter()返回可匹配的所有元素
- not() 返回不匹配的所有元素
jQuery AJAX
AJAX
AJAX = 异步JavaScript + XML
在不重载网页的情况下，后台加载数据并显示在页面上
AJAX load()
- load() 从服务器加载数据，并返回数据
常常利用：调用一个重复的代码块，例如网页的导航、版本块等……
由此可以大大的减少代码量的编写工作，模块化的团队开发应该常用
- 语法
$().load(URL,data,callback);
<!--
URL:加载的数据文件位置uRL
data:与URL加载请求一起发送的字符串键/值对集合
callback:执行完毕后调用的函数
- responseTxt : 调用成功的结果
- statusTXT : 调用的状态
- xhr : XMLHttpRequest对象
-->
AJAX GET()
- $.get() 从指定的资源请求数据
- 语法
$.get(URL , callback);
<!--
URL:加载的uRL
callback:执行完毕后调用的函数
-->
- 实例
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
AJAX POST()
- $.post() 使用 POST 请求向服务器提交数据
jQuery初学者笔记 一的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- Java初学者笔记
Java初学者笔记 前提:认识汉字,认识英语单词,会用键盘打字 ------------------------------- 端口是什么: --------面向对象编程(OOP) 接口”(Inter ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 极客技术专题【007期】：jQuery初学者入门 - jQuery Event
日期:2013-8-19 来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
随机推荐
- JAVA字节码文件之第三篇(访问标识)
一.Access Flags 访问标志 访问标志信息包括该 Class 文件是类还是接口,是否被定义成 public 或者 abstract , 如果是类,是否被声明成 final. 访问标志表 二. ...
- Javascript用途,语法特点，难点，调试工具，引入方式，命名规范，变量声明及赋值，数据类型，运算符
JavaScript用来干什么 数据的验证 将动态的内容写入到网页当中(ajax) 对事件做出相应 读写html当中的内容 检测浏览器 创建cookies 模拟动画 语法特点 基于对象和事件驱动的松散 ...
- vue项目准备工作
1.写文档: 产品说明.工作日志.接口说明文档.数据库说明文档.项目架构说明文档等···· 例如:后台管理系统:商品的管理.店铺的管理.店铺类别管理.管理员的管理.用户管理等····· 前端渲染 ...
- spring-boot第一章:快速开始
快速开始 创建pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...
- ACM北大暑期课培训第三天
今天讲的内容是深搜和广搜 深搜(DFS) 从起点出发,走过的点要做标记,发现有没走过的点,就随意挑一个往前走,走不 了就回退,此种路径搜索策略就称为“深度优先搜索”,简称“深搜”. bool Dfs( ...
- Sample Code之Take a screenshot of a SceneView
周末事情太多了,以后就工作日发布随笔吧.周末的话,看心情,也许也会发~ 今天的实例代码解析是Take a screenshot of a SceneView,也就是获取快照,话不多说,进入正题. 首先 ...
- php进程 热更新
后台启动的php守护进程时 文件内include的代码变更并未生效,需要重启进程,我们可以更新代码后手动重启.但是有些对失效要求较高.那就需要自动重启了.下面整理出三个方案用以实现. 1 inoti ...
- FreeRTOS低功耗模式
在系统或电源复位以后,微控制器处于运行状态.当CPU不需继续运行时,可以利用多种低功耗模式来节省功耗,例如等待某个外部事件时,用户需要根据最低电源消耗,最快速启动时间和可用的唤醒源等条件,选定一个最佳 ...
- Activiti 启动事件（Start Event）
Activiti 启动事件(Start Event) 作者:Jesai 生活里,没有容易二字,忧伤是一种本能,而微笑是一种能力 版权所有,未经允许,禁止引用.如需引用,请注明出处. 前言: 启动事件是 ...
- Pandas中merge和join的区别
可以说merge包含了join的操作,merge支持通过列或索引连表,而join只支持通过索引连表,只是简化了merge的索引连表的参数 示例 定义一个left的DataFrame left=pd.D ...