jQuery笔记归纳
使用jQuery前首先需要导如jQuery包:https://jquery.com/（点击下载按钮，进入后点击鼠标右键另存为即可下载）
例如：<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
jQuery选择器
- 标签选择器
- id选择器 $("#id")
- 类选择器 $(".class")
- 群组选择器 $("选择器1,选择器2,...,选择器n")
- 兄弟选择器 **** $("兄弟") 平级关系
- 相邻元素选择器 +
- 父子选择器 > $("父>子")
- 祖先子孙选择器 \((" 空格 ")  \)("祖 子")
- 表单元素选择器 $(":表单元素")
- 元素属性选择器 $("html元素[属性名称=属性值]")
- 伪类选择器 $("真实选择器:伪类属性")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
#div1,#div2,#div3{
width: 50px;
height: 50px;
border: 3px solid teal;
float: left;
line-height: 50px;
text-align: center;
}
ul li{
list-style-type: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
// 设置所有div向右移动10px
$("div").css({"margin-left":"10px"});
// 兄弟选择器
$("h1~div").css("color","red");
// 相邻元素选择器
$("h1+div").css("color","blue");
// 表单元素选择器
$(":text").val("Hello jQuery");
// 元素属性选择器
$("input[type=password]").val("123456");
// 伪类选择器(第一个元素)
$("ul>li:first-child").css("background-color","pink");
// 最后一个元素
$("ul>li:last-child").css("background-color","green");
// 第三个元素
$("ul>li:nth-child(3)").css("background-color","yellow");
// 倒数第三个元素
$("ul>li:nth-last-child(3)").css("background-color","teal");
// 把除第4个以外的字体样式都设置为"黑体"
$("ul>li:not(:nth-child(4))").css("font-family","黑体");
// 奇数项
$("ul>li:nth-child(odd)").css("border","2px dashed red");
// 偶数项
$("ul>li:nth-child(even)").css("border","2px solid");
/**
* eq()：匹配一个给定索引值的元素
* gt()：匹配所有大于给定索引值的元素
* lt()：匹配所有小于给定索引值的元素
* 注意：索引从0开始的
*/
$("ul>li:eq(1)").css("color","orange");
// $("ul>li:gt(2)").css("color","orange");
// $("ul>li:lt(2)").css("color","orange");
// :header 匹配如 h1, h2, h3之类的标题元素
$("h1:header()").css("color","teal");
})
</script>
</head>
<body>
<h1>我是一级标题</h1>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<br /><br /><br />
<input type="text" id="in_txt" name="inText" placeholder="文本框" /><br />
<input type="password" id="in_psd" name="inPsd" placeholder="密码框" />
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</body>
</html>
jQuery事件
单击事件 click()
双击事件 dblclick()
焦点事件 focus()：触发焦点， blur() ：失去焦点
鼠标事件
mouseOver()：鼠标悬停事件
mouseMove()：鼠标移动事件
mouseDown()：鼠标按下事件
mouseUp()：鼠标释放事件
mouseOut()：鼠标离开事件
键盘事件
keyUp()：键盘释放事件
keyDown()：键盘按下事件
keyPress()：键盘按下和释放之间的事件
选项改变事件 change()
hover事件：
一次能够绑定多个事件，它在鼠标事件上进行了扩充，在hover事件上能够将鼠标悬停和离开绑定在一起
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover事件</title>
<style>
#div1{
width:200px;
height:200px;
border: 1px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//悬停显示背景颜色，离开清除背景颜色
$("#div1").hover(function(){
$(this).css("background-color","teal");
},function(){
$(this).css("background-color","");
});
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
绑定/解绑事件 on()/off()
on()：在选择元素上绑定一个或多个事件的事件处理函数。
off()：在选择元素上移除一个或多个事件的事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定/解绑事件</title>
<style>
#div1{
width:120px;
height:auto;
border:3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//on是绑定事件的函数
//参数1：事件名称
//参数2：选择器(一个或者多个)
//参数3：一旦事件源触发事件，执行的回调函数
$("#div1").on("click",".p1,.p3",function(){
$(this).css("color","red");
})
// off()：解除绑定
// 参数1：之前绑定的事件 参数2：选择器
$("#div1").off("click",".p1,.p2");
})
// Servlet+Jquery+ajax
</script>
</head>
<body>
<div id="div1">
<p class="p1">晴川历历汉阳树</p>
<p class="p2">芳草萋萋鹦鹉洲</p>
<p class="p3">烟波江上使人愁</p>
</div>
</body>
</html>
操作节点的属性
val()：获得匹配元素的当前值。 对应js的value属性
attr()：设置或返回被选元素的属性值。 对应js的setAttribute和getAttribute
prop()：获取在匹配的元素集中的第一个元素的属性值。 用户input标签 type='checkbox' checked属性值的设置
text()：取得所有匹配元素的内容。 对应js的innerText
html()：取得第一个匹配元素的html内容。 对应js的innerHTML
遍历节点 each()
遍历祖先节点：parent()、遍历后代节点：children()、遍历同辈节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery遍历节点</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 遍历祖先节点 -->
<script>
$(function(){
// 获取上一级父元素$("#sixth").parent()
$("#sixth").parent().css("color","pink");
// each()：规定为每个匹配元素规定运行的函数（遍历）
$("#sixth").parent().each(function(){
console.log("遍历#sixth的父节点");
var att = $(this).attr("id");
console.log(att);
});
// .parents().each()：遍历所有父节点
$("#sixth").parents().each(function(){
// this.tagName：获取标签名称
console.log(this.tagName);
});
// .parents("").each()：获取指定的父元素
$("#sixth").parents("#div-zhuxian").each(function(){
var att = $(this).attr("id");
console.log(att);
});
})
</script>
<!-- 遍历后代节点 -->
<script>
$(function(){
// children()：只能获取父元素下的一级子元素
$("#div-zhuxian").children().each(function(){
// this.tagName：获取标签名称
console.log("遍历后代节点：" + this.tagName);
if(this.tagName=="P"){ // 注意：标签名称必须大写
$(this).css("background-color","pink");
}
if($("#first")){
var val1 = $(this).innerText = "666";
console.log(val1);
// on()：在选择元素上绑定一个或多个事件的事件处理函数
$("#div-zhuxian").on("click","#first",function(){
$(this).css("background-color","teal");
});
}
});
})
</script>
<!-- 遍历同辈节点（不涉及父元素和子元素） -->
<script>
$(function(){
// next()：获取下一个同辈元素
$("#third").next().css("background-color","salmon");
// nextAll()：查找当前元素之后所有的同辈元素
$("#third").nextAll().css("background-color","teal");
// 获取上一个同辈元素
$("#fourth").prev().css("font-size","20px");
// prevAll()：查找当前元素之前所有的同辈元素
$("#fourth").prevAll().css("font-size","30px");
// siblings()：获取所有的同辈元素
$("#fourth").siblings().css("color","red");
})
</script>
</head>
<body>
<div id="div-zhuxian">
<p id="first">AAA</p>
<p id="second">BBB</p>
<div id="div-father">
<p id="third">CCC</p>
<p id="fourth">DDD</p>
<div id="div-son">
<p id="fifth">EEE</p>
<p id="sixth">FFF</p>
</div>
</div>
</div>
</body>
</html>
节点操作
内部插入节点
首部插入：prepend()/prependTo()，尾部插入：append()/appendTo()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style>
#div1{
width: 100px;
height: 150px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 将子元素插入到父元素的首部 -->
<script>
$(function(){
var newElement = $("#div1").prepend("<p id='p0'>P0标签</p>");
$("#p0").css("font-size","12px");
// 为所有的P标签增加class属性
newElement.addClass("label");
// 为所有类为label的标签添加样式
$(".label").css("color","red");
// prepend()：向每个匹配的元素内部前置内容。
$("#div1").prepend("<p>BBBBBB</p>")
/*prepend：正向插入子元素 $("父选择器").prepend("字符串")；
prePend使用父元素为参照物 */
// prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中
$("<p>AAAAAA</p>").prependTo("#div1"); // 把p标签添加到id为div1的盒子中
/*prependTo：反向插入子元素 $("子选择器").prependTo("父选元素择器"):
prependTo使用子元素为参照物 */
})
</script>
<!-- 将子元素插入到父元素的尾部 -->
<script>
$(function(){
// append：附加
// $("父元素选择器").append("子元素选择器")：将子元素追加到父元素的末尾，正向追加
$("#div1").append("<h6>我是6级标签</h6>");
//$("子元素选择器").appendTo("父元素选择器")：资源元素追加到父元素的末尾，反向追加
$("<P>P标签</P>").appendTo("#div1");
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
外部插入节点
之前插入：before()/insertBefore()，之后插入：after()/insertAfter()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style>
#div1{
width: 100px;
height: 50px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 外部插入节点 -->
<!-- 外部之前插入节点 -->
<script>
$(function(){
// bofore()：在每个匹配的元素之前插入内容，正向插入
$("#div1").before("<div>短歌行 （曹操）</div>")
// insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面，反向插入
$("<p>对酒当歌，人生几何！</p>").insertBefore($("#div1"));
$("<p>譬如朝露，去日苦多。</p>").insertBefore("#div1");
})
</script>
<!-- 外部之后插入节点 -->
<script>
$(function(){
// after()：在每个匹配的元素之后插入内容，正向插入
$("#div1").after($("<p>山不厌高，海不厌深。</p>"));
$("#div1").after("<p>何以解忧，唯有杜康。</p>");
// 把所有匹配的元素插入到另一个、指定的元素元素集合的后面，反向插入
// 后插入的元素离div最近
$("<p>慨当以慷，忧思难忘。</p>").insertAfter("#div1");
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
删除节点：remove()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove()：删除节点</title>
<style>
#div1{
width: 100px;
height: 50px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 删除节点 -->
<script>
$(function(){
$("#p1").click(function(){
// remove()：删除指定节点
$("#p1").remove();
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
清空节点：empty()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty()：清空节点</title>
<style>
ul>li{
list-style-type: none;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
// 清空ul下面所有的li
$("ul>li").empty();
})
})
</script>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
<input type="button" id="btn" value="清空" />
</body>
</html>
克隆节点：clone()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone()：克隆节点</title>
<style>
#div1{
width: 100px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 克隆节点 -->
<script>
$(function(){
$("#c_btn").click(function(){
// 将id为p1的标签克隆到id为div1中
$("#p1").clone().prependTo("#div1");
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
<input type="button" id="c_btn" value="克隆" />
</body>
</html>
动画操作
隐藏和显示：hide()/show()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery隐藏和显示</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 隐藏和显示 -->
<script>
$(function(){
$("#h_btn").click(function(){
// hide()：隐藏 ()中是隐藏所用的时间，毫秒为单位
// $("#div1").hide();
$("#div1").hide(1000);
});
$("#s_btn").click(function(){
// show()：显示 ()中是显示所用的时间，毫秒为单位
// $("#div1").show();
$("#div1").show(1000);
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="h_btn" value="隐藏" />
<input type="button" id="s_btn" value="显示" />
</body>
</html>
淡出和淡入
fadeOut()：淡出(亮--->暗)，fadeIn()：淡入(暗--->亮)，fadeTo()： 渐变，fadeToggle()：淡入淡出切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery淡出和淡入</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 淡入和淡出 -->
<script>
$(function(){
$("#btn1").click(function(){
// fadeOut()：淡出
$("div").fadeOut(1000);
})
$("#btn2").click(function(){
// fadeIn()：淡入
$("div").fadeIn(1000,function(){
alert("成功淡入");
})
})
// 淡入和淡出之间切换
$("#btn3").click(function(){
//fadeToggle()：在淡入和淡出之间切换
// 一旦淡出执行完毕，按钮变为淡入,否则变为淡出
$("div").fadeToggle(1000,function(){
if($("#btn3").val()=="淡出"){
$("#btn3").val('淡入');
}else{
$("#btn3").val('淡出');
}
})
})
// 渐变
$("#btn4").click(function(){
// 参数1：渐变的时间 参数2：0.0~1.0之间的透明度
$("div").fadeTo(1000,0.7);
$("div").fadeTo(1000,0.4);
$("div").fadeTo(1000,0.1);
})
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="btn1" value="淡出" />
<input type="button" id="btn2" value="淡入" />
<input type="button" id="btn3" value="淡出" />
<!-- 透明度在1.0~0.0之间慢慢的变暗 -->
<input type="button" id="btn4" value="渐变" />
</body>
</html>
收起和展开
slideUp(): 收起，slideDown()：展开，slideTo()：收起和展开之间切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery收起与展开</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 收起与展开 -->
<script>
$(function(){
$("#btn1").click(function(){
//slideUp()：收起（上下收起）
$("div").slideUp(1000);
})
$("#btn2").click(function(){
//slideDown()：展开（上下展开）
$("div").slideDown(1000);
})
// slideToggle()：收起跟展开之间切换
$("#btn3").click(function(){
$("div").slideToggle(2000,function(){
if($("#btn3").val()=='收起'){
$("#btn3").val('展开');
}else{
$("#btn3").val('收起');
}
})
})
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="btn1" value="收起" />
<input type="button" id="btn2" value="展开" />
<input type="button" id="btn3" value="收起" />
</body>
</html>
jQuery在线API文档：http://jquery.cuishifeng.cn/
jQuery离线API文档：https://www.lanzous.com/i6zz7yh
jQuery笔记归纳的更多相关文章
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- Jquery笔记之第二天
Jquery笔记之第二天 jQuery - 获取内容和属性 获得内容 - text().html() 以及 val() <script> $(document).ready(functio ...
- Jquery笔记和ajax笔记
Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src ...
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- Python全栈之jQuery笔记
jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...
- jQuery笔记之 Ajax回调地狱
本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...
- JQuery笔记汇总
jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...
- jquery笔记（基础知识）
最近在学jquery,做点小笔记 语法: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p . ...
- 记录前台页面一些jQuery笔记
不知不觉工作两个月了,在这两个月,我成长很快学的很多,刚开始的时候,很多问题不懂,很多技术不会,当然作为实习阶段,很多不会的问题我都会去请教别人,在这里得感谢那些帮助我的人,但是经常去问别人问题,首先 ...
随机推荐
- WPF中打开网页的两种方法
1.浏览器打开 Process proc = new System.Diagnostics.Process(); proc.StartInfo.FileName = "http://www. ...
- android通用的UUID唯一标示符
http://stackoverflow.com/questions/2785485/is-there-a-unique-android-device-id 版权声明:本文为博主原创文章,未经博主允许 ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp7 网络欺诈防范
Exp7 网络欺诈防范 实验内容 1. 简单应用SET工具建立冒名网站 2. ettercap DNS spoof 3. 结合应用两种技术,用DNS spoof引导特定访问到冒名网站 4. 请勿使用 ...
- 你了解 Virtual DOM 吗？解释一下它的工作原理
Virtual DOM 是一个轻量级的 JavaScript 对象,它最初只是 real DOM 的副本.它是一个节点树,它将元素.它们的属性和内容作为对象及其属性. React 的渲染函数从 Rea ...
- 实现一个微信小程序组件：文字跑马灯效果
marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...
- python中dir,__dict__ , __setitem__（），__getitem__（）
class Testa: pass class Testb(object): pass if __name__ == '__main__': print 'testb = ',dir(Testb) p ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_10-课程详情页面静态化-课程详情模型数据查询接口
根据课程详情页面写一个获取数据模型的接口 目录的数据来自于课程计划表 右侧是课程的图片 需要写一个接口 获取课程相关的所有信息. 所以就需要一个模型类,里面包含了基本信息.图片信息.等各种详情页面的信 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_08-SpringSecurityOauth2研究-解决swagger-ui无法访问
3.3.4.4 解决swagger-ui无法访问 当课程管理加了授权之后再访问swagger-ui则报错: 这里默认配置的了所有的请求都必须认证 把图片认证的路径加进去的话 那么访问课程图片的列表 就 ...
- web手工项目01-系统组织框架-测试流程-需求评审-测试计划与方案
回顾 SVN(定义,作用,使用操作) 软件缺陷(定义,表现形式,原因和根源,基本内容,跟踪流程) JIRA(基本介绍,使用者,工作流,问题,使用) 学习目标 掌握WAMP的环境搭建 掌握熟悉项目的步骤 ...
- Spring MVC Action参数类型 List集合类型（简单案例）
题目:定义一个员工实体(Employee),实现批量添加员工功能,在表单中可以一次添加多个员工,数据可以不持久化 1,新建一个项目 2, 然后选择Maven框架选择 maven-archetype-w ...